const COL1 = [0.5, 0, 1];

const COL2 = [1, 0.5, 0];

​

let SIZE;

function setup() {

  SIZE = min(windowWidth, windowHeight);

  createCanvas(SIZE, SIZE);

  colorMode(RGB, 1);

}

​

let t;

function draw() {

  t = ((frameCount - 1) % FRAMES) / FRAMES;

  // t = mouseX / width;

  drawingContext.globalAlpha = 1;

  background(getShade(0.5));

  stroke(0);

  strokeWeight(1);

  const count = 8;

  const s = 0.58 / count;

  const x_count = count + 1;

  const y_count = count + 5;

  for (let i=-1; i<x_count; i++)

    for (let j=-1; j<y_count; j++) {

      let x = i / count;

      let y = 0.87 * j / count;

      if (j % 2 === 0) x += 0.5 / count;

      const d = createVector(x - 0.5, y - 0.5).mag()

      // const c_t = round(ssin(d - t));

      const n_s = 100;

      const c_t = (

        // round(noise(x * n_s, y * n_s))

        (i + j).mod(2)

        + (ssin(d - t))

      ).mod(2);

      drawSwitchingCube(x, y, s, c_t);

    }

}

​

function drawSwitchingCube(x, y, s, t) {

  const s_c = color(getShade(0));

  s_c.setAlpha(0.5);

  stroke(s_c);

  noStroke();

  if (t < 0.5)

    drawCube(x, y, s, 0, tri(t));

  else

    drawCube(x, y, s, 0.5, tri(t));  

}

​

const sig = t => {

  const k = 1;

  const s = tri(t);

  return sigmoid(s, k);

}

​

function drawCube(x, y, s, r, t) {

  // const count = 6;

  // beginShape();

  // for (let i=0; i<count; i++) {

  //   const f = (i + 0.5)/count;

  //   const vx = x + ncos(f) * s;

  //   const vy = y + nsin(f) * s;

  //   vertex(vx * width, vy * height);

  // }

  // endShape(CLOSE);

  const count = 3;

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

    const f = i / count;

    const c_f = lerp(f, 0.5, t);

    const c = getShade(c_f);

    const sr = (r + f).mod(1);

    // c.setAlpha(alpha * 256);

    fill(c);

    drawSegment(x, y, s, sr);

  }

}

​

function getShade(f) {

  const c1 = color(COL1);

  const c2 = color(COL2);

  return lerpColor(c1, c2, f);

}

​

function drawSegment(x, y, s, r) {

  const count = 3;

  const sides = 6;

  beginShape();

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

    const f = (i + 0.5)/sides;

    const sr = f + r;

    const vx = x + ncos(sr) * s;

    const vy = y + nsin(sr) * s;

    vertex(...getXY(vx, vy));

  }

  vertex(...getXY(x, y));

  endShape(CLOSE);

}

​

function getXY(x, y) {

  const ns = 0.5;

  // const offset = noise((ncos(t) + x) * ns, (nsin(t) + y) * ns) * 0.05;

  const offset = 0;

  return [(x + offset) * width, (y + offset) * height]

}

const ncos = f => cos(TAU * f);

const nsin = f => sin(TAU * f);

const scos = f => ncos(f) * 0.5 + 0.5;

const ssin = f => nsin(f) * 0.5 + 0.5;

const tri = f => 1 - abs(1 - f.mod(1) * 2);

​

const sigmoid = (v, k) => {

    v = v.mod(2);

​

    if (v >= 1)

        v = (2 - v);

​

    return v < 0.5

        ? (k * v * 2) / (k - v * 2 + 1) / 2

        : 1 - (k * (1 - v) * 2) / (k - (1 - v) * 2 + 1) / 2;

}

Number.prototype.mod = function (n) {

    return ((this % n) + n) % n;

};

​