​

let inc = 0.2;

let scl = 64;

let cols, rows;

let fr;

​

let colours = [

  "rgba(0,0,0,0)",

  "#D00000",

  "#FFBA08",

  "rgba(0,0,0,0)",

  "#3F88C5",

  "rgba(0,0,0,0)",

  "#032B43",

  'rgba(0,0,0,0)',

  'rgba(0,0,0,0)',

  "#136F63",

  'rgba(0,0,0,0)',

  "#6DD3CE",

  "rgba(0,0,0,0)",

];

// let colours = ['rgba(0,0,0,0.006)', 'rgba(255, 146, 139, 0.002)'];

let currentColour = 0;

let colourHex = colours[currentColour];

function newColour() {

  currentColour++;

  colourHex = colours[(currentColour + 1) % colours.length];

​

  // console.log(colourHex)

}

// console.log(colourHex)

​

let colourSwapFrame = 50;

​

let zoff = 0;

​

let numParticles = 2000;

let particles = [];

​

let flowField = [];

​

function setup() {

  createCanvas(1024, 1024);

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

  }

  background(255);

}

​

function draw() {

  // background(255, 10);

​

  // console.log(frameCount, colourSwapFrame);

  // if (frameCount % colourSwapFrame === 0) {

  //   newColour();

  // }

  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 * 4;

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

      v.setMag(0.8);

      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.04;

​

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

    particles[i].follow(flowField);

    particles[i].update();

    particles[i].edges();

    particles[i].show();

    particles[i].newColour();

  }

​

  // whats the framerate

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

}

​