260124

const { animate } = anime;
const W = 800;
const H = 800;
const BOX_NUM = 7;
let palette = [];
let randomIndex = 0;
let animeValue = {
  count: 0,
};
function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  randomIndex = floor(random(BOX_NUM));
  animate(animeValue, {
    count: 1,
    duration: 2000,
    ease: 'inOutSine',
    loop: true,
    loopDelay: 1000,
    alternate: true,
    onLoop: () => {
      if (animeValue.count > 0.5) {
        randomIndex = floor(random(BOX_NUM));
      }
    },
  });
}

function draw() {
  background(palette[4]);
  orbitControl();
  let f = animeValue.count;
  push();
  rotateX(-TAU / 8);
  rotateY(-TAU / 8);

  let boxSize = W / BOX_NUM;
  translate(-W / 2, 0, 0);
  push();
  translate(-boxSize / 2, boxSize / 2, boxSize / 2);
  line(0, 0, 0, W, 0, 0);
  pop();
  fill(palette[0]);
  for (let i = 0; i < BOX_NUM; i++) {
    push();
    if (i === randomIndex) {
      translate(0, 0, -20);
    }
    let delay = i / BOX_NUM;
    let adjustedF = constrain(map(f, delay, 1, 0, 1), 0, 1);
    translate(i * boxSize, adjustedF * -boxSize * 5, 0);
    box(boxSize);
    pop();
  }
  // noLoop();
}

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