260107

const { animate, steps } = 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: 4000,
    ease: steps(30, true),
    loop: true,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  orbitControl();
  noStroke();
  noiseSeed(100);

  let f = animeValue.count;
  let gridSize = 20;
  let cellSize = 30;
  let offset = -((gridSize - 1) * cellSize) / 2;
  let operationType = floor(f * 2); //0~2

  push();
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      let x = offset + i * cellSize;
      let y = offset + j * cellSize;

      // 中央からの距離
      let center = gridSize / 2;
      let distanceFromCenter = dist(i, j, center, center);

      // true/falseを作る
      let n = noise(i * 0.08, j * 0.08, f) * TAU;
      let wave1 = sin(distanceFromCenter * 0.2 + f * TAU + n) > 0;
      let wave2 = cos(distanceFromCenter * 0.2 + f * TAU + n) > 0;

      let result;
      switch (operationType) {
        case 0:
          result = boolAND(wave1, wave2);
          break;
        case 1:
          result = boolOR(wave1, wave2);
          break;
        case 2:
          result = boolNOT(wave1, wave2);
          break;
      }

      let colorIndex = (operationType + 1) % (palette.length - 3);
      if (result) {
        push();
        translate(x, y, 0);
        fill(palette[colorIndex]);
        box(gridSize);
        pop();
      } else {
        push();
        translate(x, y, -gridSize / 2);
        fill(palette[colorIndex - 1]);
        sphere(8);
        pop();
      }
    }
  }

  pop();

  // noLoop();
}

// ブール代数
// AND: 両方がtrueの時だけtrue
function boolAND(a, b) {
  return a && b;
}

// OR : どちらかがtrueならtrue
function boolOR(a, b) {
  return a || b;
}

// NOT: trueならfalse、falseならtrue
function boolNOT(a) {
  return !a;
}

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