​

function smoothstep(edge0, edge1, x) {

  x = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0);

  return x * x * (3 - 2 * x);

}

​

function lerpColors(colors, t) {

  // Ensure t is between 0 and 1

  t = constrain(t, 0, 1);

​

  // If t is 1, return the last color

  if (t === 1) return colors[colors.length - 1];

​

  // Figure out which segment we're in

  let segment = t * (colors.length - 1);

  let index = floor(segment);

​

  // Get the two colors to lerp between

  let colorA = colors[index];

  let colorB = colors[index + 1];

​

  // Calculate the position between these two colors

  let segmentT = segment - index;

​

  // Return the lerped color

  return lerpColor(colorA, colorB, segmentT);

}

​

function setup() {

  createCanvas(1024, 1024);

  c2 = color(255, 76, 57);

  c1 = color(98, 28, 55);

  cw = color('white');

  c1w = lerpColor(c1, cw, 0.75);

  c2w = lerpColor(cw, c2, 0.25);

  noiseDetail(4, 0.25);

  noLoop();

}

​

function draw() {

  // let's save frameCount into a time variable t, and scale it slower for

  // smoother motion

  let t = frameCount * 0.05;

​

  background(220);

  noStroke();

  // let's iterate over the canvas but for speed we'll jump by 3 instead of

  // by one

  for (let i = 0; i < width; i += 1) {

    for (let j = 0; j < height; j += 1) {

      // use noise to color this "pixel", and use t to change over time

      let n = noise(i * 0.005 + t, j * 0.005, t);

      let m = smoothstep(0.2, 0.8, n);

      m = lerpColors(

        [

          c1,

          c1w,

          cw,

          c2w,

          c2,

        ],

        m

      );

      fill(m);

      // draw the "pixel"

      rect(i, j, 1);

    }

  }

}

​