​

function make2DArray(rows, cols) {

  var arr = new Array(rows); //like arr[]; but with number of columns hardcoded

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

    arr[i] = new Array(cols);

  }

  return arr;

}

​

let angle = 0;

let w = 100;

let cols;

let rows;

let curves;

​

function setup() {

  createCanvas(630, 630);

  frameRate(60);

  // # Color Palette

  c1 = color(231, 111, 81);

  c2 = color(244, 162, 97);

  c3 = color(233, 196, 106);

  c4 = color(42, 157, 143);

  c5 = color(38, 70, 83);

  cols = floor(width / w) - 1;

  rows = floor(height / w) - 1;

  curves = make2DArray(rows, cols);

​

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

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

      curves[j][i] = new Curve();

    }

  }

}

​

function draw() {

  background(255);

  let d = w - 0.2 * w;

  let r = d / 2;

​

  // horizontal circles

  noFill();

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

    // circles

    let cx = w + i * w + w / 2;

    let cy = w / 2;

    strokeWeight(2);

    stroke(0,150);

    circle(cx, cy, d);

​

    // noise

    let m = map(mouseX, 0 ,width, 0, 20);

    let n = noise(cx + frameCount / 500, cy + (i * frameCount / 500)) * m;

​

    // points on circles

    x = r * cos((angle + n) - HALF_PI);

    y = r * sin((angle + n) - HALF_PI);

    strokeWeight(10);

    stroke(0);

    point(cx + x, cy + y);

​

    // animated line

    strokeWeight(1);

    stroke(255, 20);

    line(cx + x, 0, cx + x, height);

​

    // add point to curves

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

      curves[j][i].setX(cx + x);

    }

  }

​

  // vertical circles

  stroke(0);

  noFill();

​

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

    // circles

    let cx = w / 2;

    let cy = w + j * w + w / 2;

    strokeWeight(2);

    stroke(0, 150);

    circle(cx, cy, d);

​

    // noise

    let m = map(mouseY, 0 ,height, 0, 20);

    let n = noise(cx + frameCount / 200, cy + (j * frameCount / 200)) * m;

    // points on circles

    x = r * cos((angle + n) - HALF_PI);

    y = r * sin((angle + n) - HALF_PI);

    strokeWeight(10);

    stroke(0);

    point(cx + x, cy + y);

​

    // animated line

    strokeWeight(1);

    stroke(255, 20);

    line(0, cy + y, width, cy + y);

​

    // add point to curves

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

      curves[j][i].setY(cy + y);

    }

  }

​

  // add point to curve and draw

  if (angle < TWO_PI) {

​

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

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

        curves[j][i].addPoint();

        curves[j][i].show();

      }

    }

  }

​

  else {

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

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

        curves[j][i].reset();

      }

    }

    angle = 0;

  }

​

  angle += 0.05;

​

​

}

​

function lerpColorFive(c1, c2, c3, c4, c5, i)

{

  if(i <= 0.25)       {return lerpColor(c1,c2, map(i,0,0.25,0,1));}

  else if(i <= 0.5)   {return lerpColor(c2,c3, map(i,0.25,0.5,0,1));}

  else if(i <= 0.75)  {return lerpColor(c3,c4, map(i,0.5,0.75,0,1));}

  else                {return lerpColor(c4,c5, map(i,0.75,1,0,1));}

}