​

let inc = 0.2;

let scl = 10;

let cols, rows;

let fr;

​

let zoff = 0;

​

let numParticles = 200;

let particles = [];

​

let flowField = [];

​

function setup() {

  createCanvas(500, 500);

  cols = floor(width / scl);

  rows = floor(height / scl);

  fr = createP("");

​

  flowField = new Array(cols * rows)

  for (let i = 0; i < numParticles; i++) {

    particles[i] = new Particle();

  }

}

​

function draw() {

  background(255);

​

  let yoff = 0;

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

    let xoff = 0;

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

      let index = x + y * cols;

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

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

      v.setMag(0.1)

      flowField[index] = v;

      xoff += inc;

      stroke(200);

      strokeWeight(1);

      push();

      translate(x * scl, y * scl);

      rotate(v.heading());

      line(0, 0, scl, 0);

      pop();

    }

    yoff += inc;

  }

  zoff += 0.01;

​

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

    particles[i].follow(flowField);

    particles[i].update();

    particles[i].show();

    particles[i].edges();

  }

​

  // whats the framerate

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

}

​