260114

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
const NUM = 7;
const DELAY = 0.5;

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

  let boxCount = NUM * NUM;
  let maxCount = 1 + (boxCount - 1) * DELAY;
  animate(animeValue, {
    count: maxCount,
    duration: 7500,
    ease: 'inOutSine',
    loop: true,
    loopDelay: 500,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  orbitControl();
  rotateX(-TAU / 8);
  rotateY(TAU / 8);
  randomSeed(1000);

  let f = animeValue.count;
  let boxSize = 60;
  let inBoxSize = 59;
  let offset = 10;
  let y = 0;
  let index = 0;
  push();
  noStroke();
  translate(
    (-NUM * (boxSize + offset)) / 2 + (boxSize + offset) / 2,
    0,
    (-NUM * (boxSize + offset)) / 2 + (boxSize + offset) / 2
  );
  for (let i = 0; i < NUM; i++) {
    for (let j = 0; j < NUM; j++) {
      push();
      let localF = constrain(f - index * DELAY, 0, 1);
      y = (localF - sin(localF * TAU)) * boxSize;
      translate(0, -y, 0);
      fill(palette[int(random(palette.length))]);
      translate(i * (boxSize + offset), 0, j * (boxSize + offset));
      box(inBoxSize);
      pop();
      index++;
    }
  }
  pop();
  push();
  translate(
    (-NUM * (boxSize + offset)) / 2 + (boxSize + offset) / 2,
    0,
    (-NUM * (boxSize + offset)) / 2 + (boxSize + offset) / 2
  );
  noFill();
  for (let i = 0; i < NUM; i++) {
    for (let j = 0; j < NUM; j++) {
      push();
      translate(i * (boxSize + offset), 0, j * (boxSize + offset));
      box(boxSize);
      pop();
    }
  }
  pop();
}

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