Noise loop study 2

// By Roni Kaufman

// https://ronikaufman.github.io

// https://twitter.com/KaufmanRoni

​

// Made for @sableRaph's weekly creative challenge on Twitch (#WCCChallenge)

// https://www.twitch.tv/sableraph

// "Noise"

​

let N_FRAMES = 750;

let m, n;

​

function setup() {

  createCanvas(600, 600);

  noStroke();

  rectMode(CENTER);

  frameRate(30);

  //noLoop();

}

​

function draw() {

  let t = (frameCount%N_FRAMES)/N_FRAMES;

  t = easeInOutSine(t);

  if (frameCount%N_FRAMES == 1) {

    do {

      m = ~~random(1, 6);

      n = ~~random(1, 6);

    } while (m == 1 && n == 1)

  }

  let w = width/m;

  let h = height/n;

  let s = 12, density = 32;

  for (let x = 0; x < width; x += s) {

    for (let y = 0; y < height; y += s) {

      let theta = TAU*t;

      if (y%(2*h) < h) theta *= -1;

      if (x%(2*w) < w) theta *= -1;

      let no = loopNoise(x, y, theta);

      let fillCol, backCol;

      if (theta < 0) {

        fillCol = "#050505";

        backCol = lerpColor(color("#fffbe6"), color("#f9d531"), 1-pow(2*t-1, 4));

      } else {

        fillCol = lerpColor(color("#050505"), color("#2b67af"), 1-pow(2*t-1, 4));

        backCol = "#fffbe6";

      }

      if (floor(no*density)%2 == 0) {

        [fillCol, backCol] = [backCol, fillCol];

      }

      fill(backCol);

      square(x+s/2, y+s/2, s);

      fill(fillCol);

      let z = pow(2*((no*density)%1)-1, 2);

      square(x+s/2, y+s/2, s, s*z);

    }

  }

}

​

function loopNoise(x, y, theta) {

  let rad = 1, sc = 1/500, offset = 10; // parameters for the noise

  return noise(

    offset + rad*cos(x*sc+theta),

    offset + rad*sin(x*sc+theta),

    y*sc

  );

}

​

// from easings.net

function easeInOutSine(x) {

  return -(Math.cos(Math.PI * x) - 1) / 2;

}