260117

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

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: 4000,
    ease: 'outInSine',
    loop: true,
    loopDelay: 1000,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  // orbitControl();
  noStroke()
  let f = animeValue.count;
  let gridSize = 6;
  let spacing = BOX_SIZE;
  createTextures(f);

  rotateX(-TAU / 8)
  rotateY(TAU / 8)

  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();
        let x = i * spacing;
        let y = j * spacing;
        let z = k * spacing;
        translate(x, y, z);
        let textureIndex = (i + j + k) % textures.length;
        texture(textures[textureIndex]);
        box(BOX_SIZE);
        pop();
      }
    }
  }
  // noLoop();
}

function createTextures(f) {
  noiseSeed(100);
  let tex = textures[0];
  tex.background(palette[0]);
  tex.noStroke();
  tex.fill(palette[4]);
  for (let i = 0; i < 4; i++) {
    tex.push();
    let angle = TAU / 4 * i;
    let offset = TEX_SIZE / 2;
    tex.translate(TEX_SIZE / 2 + cos(angle) * offset, TEX_SIZE / 2 + sin(angle) * offset);
    tex.rotate(sin(f * TAU));
    tex.arc(0, 0, TEX_SIZE, TEX_SIZE, TAU / 4 + angle, TAU / 2 + angle)
    tex.pop();
  }


  textures.push(tex);
}

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