260121

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
let textures = [];
let BOX_SIZE = 80;
let TEX_SIZE = 80;
let rotationAngle = 0;
let prevF = 0;
let index = 0;

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  let tex = createGraphics(TEX_SIZE, TEX_SIZE);
  textures.push(tex);
  animate(animeValue, {
    count: 1,
    duration: 3000,
    ease: 'inCirc',
    loop: true,
    loopDelay: 2000,
    alternate: true,
    onLoop: () => {
      index++;
    },
  });
}

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


  noStroke();
  let f = animeValue.count;
  let deltaF = f - prevF;
  if (deltaF > 0) {
    rotationAngle += deltaF * TAU / 4;
  }
  prevF = f;
  let gridSize = 5;
  let spacing = BOX_SIZE * (1 + f * 0.5);
  translate(-(gridSize - 1) * spacing / 2, -(gridSize - 1) * spacing / 2, -(gridSize - 1) * spacing / 2);

  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      for (let k = 0; k < gridSize; k++) {
        push();
        noStroke();
        let x = i * spacing;
        let y = j * spacing;
        let z = k * spacing;
        translate(x, y, z);

        let r = random();
        if (r < 0.33) {
          rotateX(rotationAngle);
        } else if (r < 0.66) {
          rotateY(rotationAngle);
        } else {
          rotateZ(rotationAngle);
        }

        let textureIndex = (i + j + k);
        if (textureIndex >= textures.length) {
          createTextures();
        }
        texture(textures[textureIndex]);
        box(BOX_SIZE);
        pop();
      }
    }
  }
  // noLoop();
}

function createTextures() {
  let boxColors = [palette[1], palette[2], palette[3], palette[4]];
  let tex = createGraphics(TEX_SIZE, TEX_SIZE);
  tex.noStroke();
  tex.background(boxColors[int(random(boxColors.length))]);
  if (random() < 0.7) {
    let startX = 20;
    let startY = 20;
    let gap = 10;
    tex.push();
    tex.noFill();
    tex.stroke(boxColors[int(random(boxColors.length))]);
    tex.strokeWeight(gap);
    tex.translate(-gap + gap / 2, -gap + gap / 2);
    for (let i = 0; i < 4; i++) {
      let offset = i * gap * 2;
      tex.rect(startX + offset, startY + offset, TEX_SIZE, TEX_SIZE);
    }
    tex.pop();
  }
  else if (random() < 0.3) {
    tex.push();
    tex.fill(boxColors[int(random(boxColors.length))]);
    let lineCount = 5;
    let lineSpacing = TEX_SIZE / lineCount;
    for (let i = 0; i < lineCount; i++) {
      let y = i * lineSpacing;
      tex.rect(0, y, TEX_SIZE, lineSpacing / 2);
    }

    tex.pop();
  }
  else {
    tex.push();
    tex.fill(boxColors[int(random(boxColors.length))]);
    tex.translate(TEX_SIZE / 2, TEX_SIZE / 2);
    tex.arc(0, 0, TEX_SIZE, TEX_SIZE, TAU / 4 + TAU / 2, TAU / 4);
    tex.pop();
  }
  textures.push(tex);
}

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