var cell = 40;

var divides = [1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 18, 20, 24];

​

​

var cols, rows;

​

var zoff = 0;

​

var arcs = [];

​

var flowfield;

var margin = 0.02;

var darkmode = false;

var bgColor = 255;

​

function setup() {

  createCanvas(windowWidth,windowHeight);

  initGrid();

  background(255);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  initGrid();

}

​

function initGrid() {

  var contentArea = 1-margin*2;

  cell = width*contentArea / divides[ floor(divides.length * random()) ];

  cols = floor(width*contentArea / cell);

  rows = floor(height*contentArea / cell);

​

  if(rows==0) {

    rows = 1;

    if(cell>height) {

      cell = height;

    }

  }

  inc = 0.002 * cell;

  flowfield = new Array(cols * rows);

  arcs = new Array(cols * rows);

  var offsetX = (width-cell*cols)/2;

  var offsetY = (height-cell*rows)/2;

  for(var i=0; i<cols*rows; i++) {

    var cx = i % cols * cell + cell/2 + offsetX;

    var cy = floor( i / cols ) * cell + cell/2 + offsetY;

    arcs[i] = new Arc(cx, cy, cell*.8);

  }

  zoff = 0;

}

​

function draw() {

  if(frameCount%800==0) {

    darkmode = !darkmode;

    bgColor = darkmode ? 33 : 255;

  } 

  background(bgColor);

  if(frameCount%200==0) {

    initGrid();

  }

  var yoff = 0;

  for (var y = 0; y < rows; y++) {

    var xoff = 0;

    for (var x = 0; x < cols; x++) {

      var index = x + y * cols;

      var amp = 1.41;

      var noiseValue = noise(xoff, yoff, zoff) * amp;

      if(noiseValue>0.9) {

        noiseValue = 0.9+(noiseValue-0.9)/(amp-0.9)*0.1;

      }

      noiseValue = constrain(noiseValue, 0, 1);

      var angle = noiseValue * TWO_PI;

      var v = p5.Vector.fromAngle(angle);

      v.setMag(1);

      flowfield[index] = v;

      xoff += inc;

      arcs[index].update( noiseValue*100 );

    }

    yoff += inc;

    zoff += inc/280;

    // if(rows==1) {

    //   zoff += inc/240;    

    // } else {

    //   zoff += inc/280;      

    // }

​

  }

}