260108

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

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: 1,
    duration: 30000,
    ease: "inOut(3.56)",
    loop: true,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  randomSeed(1000);

  let f = animeValue.count;

  let r = 1000;
  let theta = TAU * f;
  let camX = r * cos(theta);
  let camY = -(r / 2) * sin(theta);
  let camZ = r * sin(theta);
  camera(camX, camY, camZ, 0, 0, 0, 0, 1, 0);

  let spacing = 120;
  let cols = 10;
  let rows = 10;
  let offsetX = -((cols - 1) * spacing) / 2;
  let offsetY = -((rows - 1) * spacing) / 2;
  let pyramidHeight = 50 * 5;
  push();
  rotateX(TAU / 4);
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      push();
      translate(offsetX + i * spacing, offsetY + j * spacing, -pyramidHeight);
      let randomHeight = random(-3, 15);
      rotateZ(random(TAU));
      drawPyramid(1, randomHeight);
      pop();
    }
  }
  pop();

  // noLoop();
}

function drawPyramid(s, h) {
  push();
  let faceColors = [];
  for (let i = 0; i < 4; i++) {
    faceColors.push(palette[floor(random(palette.length - 1))]);
  }
  fill(faceColors[0]);
  stroke(palette[6]);
  strokeWeight(2);

  const baseY0 = -40 * s;
  const baseY1 = 40 * s;
  const baseX1 = 40 * s;
  const baseX2 = -40 * s;
  const peakZ = 50 * h;

  beginShape();
  vertex(0, baseY1, 0);
  vertex(baseX1, baseY0, 0);
  vertex(baseX2, baseY0, 0);
  vertex(0, 0, peakZ);
  endShape(CLOSE);

  beginShape(TRIANGLES);
  // Base
  fill(faceColors[1]);
  vertex(0, baseY1, 0);
  vertex(baseX1, baseY0, 0);
  vertex(baseX2, baseY0, 0);
  // Side face 1
  fill(faceColors[2]);
  vertex(0, baseY1, 0);
  vertex(baseX1, baseY0, 0);
  vertex(0, 0, peakZ);
  // Side face 2
  fill(faceColors[3]);
  vertex(baseX1, baseY0, 0);
  vertex(baseX2, baseY0, 0);
  vertex(0, 0, peakZ);
  // Side face 3
  fill(faceColors[0]);
  vertex(baseX2, baseY0, 0);
  vertex(0, baseY1, 0);
  vertex(0, 0, peakZ);
  endShape();
  pop();
}

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