260109

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: 3000 * 255,
    ease: steps(255, true),
    loop: true,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  stroke(palette[5]);
  frameRate(30);

  orbitControl();
  let f = animeValue.count;

  let totalRows = 50;
  let cellW = 15;
  // 初期値を用意
  let cells = Array(totalRows).fill(0);
  cells[floor(totalRows / 2)] = 1;

  let totalCols = cells.length;
  let offsetX = -((totalCols - 1) * cellW) / 2;
  let offsetY = ((totalRows - 1) * cellW) / 2;

  push();
  translate(offsetX, offsetY, 0);
  for (let i = 0; i < totalRows; i++) {
    //256パターン
    let rule = map(f, 0, 1, 0, 255);
    cells = nextGeneration(cells, rule);
    push();
    for (let j = 0; j < cells.length; j++) {
      let x = j * cellW;
      let y = -i * cellW;
      let z = 0;
      if (cells[j] === 1) {
        push();
        translate(x, y, z);
        fill(palette[0 % palette.length]);
        box(cellW - 1);
        pop();
      } else if (sin((i + j) / f) > 0.3) {
        push();
        translate(x, y, -cellW);
        fill(palette[1 % palette.length]);
        box(cellW - 1);
        pop();
      } else if (sin((i + j) / f) <= 0.2) {
        push();
        translate(x, y, -2 * cellW);
        fill(palette[2 % palette.length]);
        box(cellW - 1);
        pop();
      } else {
        push();
        translate(x, y, -cellW);
        fill(palette[3 % palette.length]);
        box(cellW - 1);
        pop();
      }
    }
    pop();
  }
  pop();
  // noLoop();
}

function nextGeneration(cells, rule) {
  let next = new Array(cells.length);
  for (let i = 0; i < cells.length; i++) {
    let left = cells[i - 1] || 0;
    let center = cells[i];
    let right = cells[i + 1] || 0;
    // ビットに変換
    let pattern = left * 4 + center * 2 + right * 1;
    // シフトする
    if (((rule >> pattern) & 1) === 1) {
      next[i] = 1;
    } else {
      next[i] = 0;
    }
  }
  return next;
}

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