2d Cellular Automata Explorer

// Please refer to the page at https://conwaylife.com/wiki/List_of_Life-like_rules

​

OPC.button("clearButton", "clear");

OPC.button("randomButton", "random");

​

OPC.toggle("birth_0", false);

OPC.toggle("birth_1", false);

OPC.toggle("birth_2", false);

OPC.toggle("birth_3", true);

OPC.toggle("birth_4", false);

OPC.toggle("birth_5", false);

OPC.toggle("birth_6", false);

OPC.toggle("birth_7", false);

OPC.toggle("birth_8", false);

​

OPC.toggle("survival_0", false);

OPC.toggle("survival_1", false);

OPC.toggle("survival_2", true);

OPC.toggle("survival_3", true);

OPC.toggle("survival_4", false);

OPC.toggle("survival_5", false);

OPC.toggle("survival_6", false);

OPC.toggle("survival_7", false);

OPC.toggle("survival_8", false);

​

OPC.color("color_state0", "#000000");

OPC.color("color_state1", "#ffffff");

​

const w = 400; // Resolution

const brushRadius = 12;

let cells;

let g;

​

function buttonPressed(variableName) {

  if (variableName == "clearButton") cells.fill(0);

  if (variableName == "randomButton")

    for (i = w * w; i--; ) cells[i] = int(random(2));

}

​

function setup() {

  const m = min(windowWidth, windowHeight);

  createCanvas(m, m);

  cells = new Uint8Array(w * w).fill(0);

  g = createGraphics(w, w);

}

​

function draw() {

  g.background(color_state0);

  g.loadPixels();

  brush();

​

  const data_state1 = new Uint8Array([

    red(color_state1),

    green(color_state1),

    blue(color_state1),

  ]);

  const next = new Uint8Array(cells);

  const survival = new Uint8Array([

    survival_0,

    survival_1,

    survival_2,

    survival_3,

    survival_4,

    survival_5,

    survival_6,

    survival_7,

    survival_8,

  ]);

  const birth = new Uint8Array([

    birth_0,

    birth_1,

    birth_2,

    birth_3,

    birth_4,

    birth_5,

    birth_6,

    birth_7,

    birth_8,

  ]);

​

  for (let y = 1; y < w - 1; ++y) {

    for (let x = 1; x < w - 1; ++x) {

      const i = x + y * w;

      const oldState = cells[i];

      const condition = oldState ? survival : birth;

​

      const neighbors =

        + cells[i + 1] 

        + cells[i - 1] 

        + cells[i - w] 

        + cells[i + w] 

        + cells[i - 1 - w] 

        + cells[i - 1 + w] 

        + cells[i + 1 - w] 

        + cells[i + 1 + w];

​

      const newState = condition[neighbors];

      next[i] = newState;

      newState && g.pixels.set(data_state1, i * 4);

    }

  }

  cells = next;

  g.updatePixels();

  image(g, 0, 0, width, height);

}

​

function brush() {

  const mx = ceil(map(mouseX, 0, width, 0, w - 1));

  const my = ceil(map(mouseY, 0, height, 0, w - 1));

​

  const b = brushRadius;

  for (let dy = -b; dy <= b; dy++) {

    for (let dx = -b; dx <= b; dx++) {

      const d = dx ** 2 + dy ** 2;

      if (d > b * b) continue;

      const x = mx + dx;

      const y = my + dy;

      if (x < 0 || x >= w || y < 0 || y >= w) continue;

      cells[x + y * w] = 1;

    }

  }

}

​