260123

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];

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

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

  push();
  noStroke();
  rotateX(-TAU / 20);
  rotateY(TAU / 20);

  let rectSize = 300;
  let blockNum = 8;
  let layerNum = 4;
  let rectHight = rectSize / blockNum;
  translate(-rectSize / 2, -rectSize / 2);
  for (let i = 0; i < layerNum; i++) {
    push();
    let c = color(palette[i % palette.length]);
    translate(0, 0, -i * 10);
    translate(rectSize / 2, rectSize / 2);
    rotateZ(TAU / layerNum * i);
    translate(-rectSize / 2, -rectSize / 2);
    for (let j = 0; j < blockNum; j++) {
      push();
      translate(0, j * rectHight, 0);
      c.setAlpha(map(j, 0, blockNum - 1, 20, 200));
      fill(c);
      rect(0, 0, rectSize + rectSize / 2, rectHight);
      pop();
    }
    pop();
  }
  pop();
  // noLoop();
}

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