var inc = 0.1;

// How many pixels to one vextor

var scl = 10;

var cols, rows;

​

var zoff = 0;

​

// Keep track of frame rate

var fr;

​

// Store the direction vectors in an array

var flowfield = [];

​

// Particle array

var particles = [];

​

// ////////////////////////////////////////////////

// // Editable properties:

// // Edit `loopFrames` to change the loop duration

// // And disable `saveVideo` while you're working on your sketch

// var loopFrames = 240; // 4-second loop (60fps * 4)

// let saveVideo = true;

​

// // Loop properties that help you loop elements in your animation.

// // These are updated in `updateLoopRecording()`

// let frameCountLooped = 1;

// let loopProgress = 0;

// let loopProgressRadians = 0;

​

// // call this function at the end of `draw()`

// var recorder = null;

// function updateLoopRecording() {

//   if(!recorder) recorder = new p5Recorder(loopFrames);

//   // create a looped framecount & normalized progress

//   frameCountLooped = frameCount % loopFrames;

//   loopProgress = frameCountLooped / loopFrames;

//   loopProgressRadians = loopProgress * TWO_PI;

//   // update video recorder

//   if(saveVideo) recorder.renderVideo();

// }

// /////////////////////////////////////////////

​

function setup() {

  createCanvas(400, 400);

  cols = floor(width / scl);

  rows = floor(height / scl);

  fr = createP('');

  flowfield = new Array(cols * rows);

  for (var i = 0; i < 1000; i++) {

    particles[i] = new Particle();

  }

}

​

function draw() {

  background(255);

  var yoff = 0;

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

    var xoff = 0;

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

      // Pick the angels of the vectors

      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;

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

      // The following line changes how the particles follow the vector path

      v.setMag(1);

      var index = x + y * cols;

      flowfield[index] = v;

      // push();

      //   translate(x * scl, y * scl);

      //   rotate(v.heading());

      //   stroke(0, 50);

      //   strokeWeight(1);

      //   line(0, 0, scl, 0);

      // pop();

      xoff += inc;

​

    }

    yoff += inc;

    zoff += 0.0003;

  }

  // Update the particles

  for (var i = 0; i < particles.length; i++) {

    particles[i].follow(flowfield);

    particles[i].update();

    particles[i].edges();

    particles[i].show();

  }

  //fr.html(floor(frameRate()));

  // updateLoopRecording();

}