260727

const W = 800;
const H = 800;
let palette = [];

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[3]);
}

function getBoxTransform(segment) {
  let boxSize = 150;
  let boxHeight = 50;
  let smallW = 50;
  let smallH = 50;
  let moveRange = 150;

  let y = 0;
  let w = smallW;
  let h = smallH;
  let d = smallW;

  if (segment < 1 / 3) {
    let t = segment * 3;
    y = -t * moveRange;
  } else if (segment < 2 / 3) {
    let t = (segment - 1 / 3) * 3;
    y = -moveRange;
    w = lerp(smallW, boxSize, t);
    h = lerp(smallH, boxHeight, t);
    d = lerp(smallW, boxSize, t);
  } else {
    let t = (segment - 2 / 3) * 3;
    if (t < 0.5) {
      let fallT = t * 2;
      y = lerp(-moveRange, 0, fallT);
      w = boxSize;
      h = boxHeight;
      d = boxSize;
    } else {
      let shrinkT = (t - 0.5) * 2;
      y = 0;
      w = lerp(boxSize, smallW, shrinkT);
      h = lerp(boxHeight, smallH, shrinkT);
      d = lerp(boxSize, smallW, shrinkT);
    }
  }

  return { y: y, w: w, h: h, d: d };
}

function drawBoxSides(w, h, d) {
  let hw = w / 2;
  let hh = h / 2;
  let hd = d / 2;

  beginShape(QUADS);
  vertex(-hw, -hh, hd);
  vertex(hw, -hh, hd);
  vertex(hw, hh, hd);
  vertex(-hw, hh, hd);

  vertex(hw, -hh, -hd);
  vertex(-hw, -hh, -hd);
  vertex(-hw, hh, -hd);
  vertex(hw, hh, -hd);

  vertex(hw, -hh, hd);
  vertex(hw, -hh, -hd);
  vertex(hw, hh, -hd);
  vertex(hw, hh, hd);

  vertex(-hw, -hh, -hd);
  vertex(-hw, -hh, hd);
  vertex(-hw, hh, hd);
  vertex(-hw, hh, -hd);
  endShape();
}

function drawBoxSet(segment, x, z) {
  let numberOfBoxes = 3;
  let stagger = 1 / numberOfBoxes;

  push();
  translate(x, 0, z);
  strokeWeight(2);
  stroke(palette[6]);
  for (let i = 0; i < numberOfBoxes; i++) {
    let boxSegment = (segment - i * stagger + 1) % 1;
    let boxState = getBoxTransform(boxSegment);
    push();
    fill(palette[i]);
    translate(0, boxState.y, 0);
    drawBoxSides(boxState.w, boxState.h, boxState.d);
    pop();
  }
  pop();
}

function getSetSegment(globalFrame, setIndex, setPlayFrames, setGapFrames) {
  let localFrame = globalFrame - setIndex * setGapFrames;
  let normalized = localFrame % setPlayFrames;
  if (normalized < 0) {
    normalized = normalized + setPlayFrames;
  }
  return normalized / setPlayFrames;
}

function draw() {
  background(palette[3]);
  // orbitControl();
  ortho();

  let gridNum = 3;
  let setPlayFrames = 180;
  let overlapRatio = 0.8;
  let setGapFrames = setPlayFrames * (1 - overlapRatio);
  let globalFrame = frameCount;
  let cellSpacing = 220;
  let offset = ((gridNum - 1) * cellSpacing) / 2;

  push();
  translate(0, 50, 0);
  rotateX(-TAU / 8);
  rotateY(TAU / 8);

  for (let j = 0; j < gridNum; j++) {
    for (let i = 0; i < gridNum; i++) {
      let setIndex = j * gridNum + i;
      let setSegment = getSetSegment(
        globalFrame,
        setIndex,
        setPlayFrames,
        setGapFrames,
      );

      let x = i * cellSpacing - offset;
      let z = j * cellSpacing - offset;
      drawBoxSet(setSegment, x, z);
    }
  }
  pop();
}

const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: [
      "#9dbdba",
      "#f8b042",
      "#e47763",
      "#253276",
      "#dfdad3",
      "#FFFFFF",
      "#000000",
    ],
  },
];