flowfield.js

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/BjoM9oKOAKY

var inc = 0.1;
var scl = 10;
var cols, rows;

var zoff = 0;

var fr;

var particles = [];

var flowfield;

var centerX;
var centerY;
var rotateI = 1;

var seeField = false;
var resetBackground = true;
var fieldOff = false;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 255);
  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP('');
  centerX = cols / 2;
  centerY = rows / 2;

  flowfield = new Array(cols * rows);

  for (var i = 0; i < 300; i++) {
    particles[i] = new Particle();
  }
}

var t = 0;

function draw() {
  if (resetBackground){
    background(255);
    fieldOff = false;
  } else if(!fieldOff) {
    background(255);
    fieldOff = true;
  }
  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 angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(.2);
      flowfield[index] = v;
      xoff += inc;
      if (seeField && resetBackground){
        stroke(0, 50);
        push();
        translate(x * scl, y * scl);
        rotate(v.heading());
        strokeWeight(1);
        line(0, 0, scl, 0);
        pop();
      }
    }
    yoff += inc;
    t += .001;
    zoff += 0.0003;
  }

  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()));
}

function mousePressed(){
  particles.push(new Particle);
}

function keyPressed(){
  if (keyCode == 32 && seeField){
    seeField = false;
  } else if (keyCode == 32 && !seeField) {
    seeField = true;
  }
  if (keyCode == 66 && resetBackground){
    resetBackground = false;
  } else if (keyCode == 66 && !resetBackground){
    resetBackground = true;
  }
  return false;
}