260112

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
let dirPhase = 0;
let prevF = 0;
let isDescending = false;

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

  dirPhase = 0;
  isDescending = false;
  animeValue.count = 0;

  animate(animeValue, {
    count: 1,
    duration: 1400,
    ease: "outElastic(1,0.3)",
    loop: true,
    alternate: true,
  });
}

function draw() {
  background(palette[0]);
  orbitControl();
  noFill();
  stroke(palette[4]);
  strokeWeight(2);

  let f = animeValue.count;
  if (!isDescending && f > 0.9) {
    isDescending = true;
  } else if (isDescending && f < 0.1) {
    isDescending = false;
    dirPhase = (dirPhase + 1) % 6;
  }
  prevF = f;

  let tx = 0;
  let ty = 0;
  let tz = 0;

  let num = 20;
  let boxW = 380;
  for (let i = num - 1; i >= 0; i--) {
    push();

    let boxSize = boxW * pow(0.86, num - 1 - i);
    let nextBoxSize = boxW * pow(0.86, num - i);

    let stepMove = (boxSize - nextBoxSize) / 2;
    let move = lerp(0, stepMove, f);

    translate(tx, ty, tz);
    box(boxSize);

    if (dirPhase === 0) {
      tx += move;
    } else if (dirPhase === 1) {
      tx -= move;
    } else if (dirPhase === 2) {
      ty += move;
    } else if (dirPhase === 3) {
      ty -= move;
    } else if (dirPhase === 4) {
      tz += move;
    } else {
      tz -= move;
    }
    pop();
  }

  // noLoop();
}

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