260127

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let boxTranslateValue = {
  count: 0,
};
let boxSizeValue = {
  count: 0,
};
let colorShift = 0;
function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(boxTranslateValue, {
    count: 1,
    duration: 6000,
    ease: 'inOut(6.0)',
    loop: true,
    onLoop: () => {
      colorShift++;
    },
    // alternate: true,
  });
  animate(boxSizeValue, {
    count: 1,
    ease: 'inOut(8.56)',
    duration: 3000,
    loop: true,
    alternate: true,
  });
}

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

  let translateValue = boxTranslateValue.count;
  let sizeValue = boxSizeValue.count;

  let boxSize = 100;
  let boxNum = 15;


  push();
  rotateX(-TAU / 8);
  rotateY(-TAU / 8);
  for (let j = 0; j < 2; j++) {
    rotateY(TAU / 4);
    for (let i = 0; i < boxNum; i++) {
      push();
      noFill();
      translate(boxNum / 2 * boxSize - boxSize * i - boxSize / 2, 0, 0);
      box(boxSize);
      translate(translateValue * boxSize, 0, 0);
      noStroke();
      fill(palette[int((i + colorShift) % palette.length)]);
      box(boxSize - sizeValue * boxSize / 2);
      pop();
    }
  }
  pop();


  // noLoop();
}

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