260130

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

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

function draw() {
  background(palette[4]);
  // orbitControl();
  let f = sin(frameCount * 0.01) * 0.01;
  let num = 15;
  let size = (W - 50) / num;
  let step = size * 0.8;
  rotateY(f);
  rotateX(f);
  // 中心に揃える
  translate(-((num - 1) * step) / 2 - size / 2, -((num - 1) * step) / 2 - size / 2, 0);
  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      push();
      fill(palette[(i + j) % palette.length]);
      translate(j * step, i * step, 0);
      rect(0, 0, size, size);
      pop();
    }
  }
  // noLoop();
}

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