Elementary Rule Cycler

const RULES = [
  { n: 30,  color: [255, 150, 60],  name: 'Rule 30'  },
  { n: 90,  color: [240, 240, 245], name: 'Rule 90'  },
  { n: 110, color: [80, 220, 140],  name: 'Rule 110' },
  { n: 184, color: [80, 200, 240],  name: 'Rule 184' },
];

const CELL = 3;
const GENS_PER_RULE = 250;
const FADE_GENS = 40;

let cols, rows;
let history;
let rowColors;
let writeIdx;
let cur, nxt;
let genInRule;
let ruleIdx;
let fading;
let stepAccum;
const STEP_HZ = 60;

function resetGrid(w, h) {
  cols = Math.max(8, Math.floor(w / CELL));
  rows = Math.max(8, Math.floor(h / CELL));
  history = new Uint8Array(rows * cols);
  rowColors = new Uint8Array(rows * 3);
  writeIdx = rows - 1;
  cur = new Uint8Array(cols);
  nxt = new Uint8Array(cols);
  genInRule = 0;
  ruleIdx = 0;
  fading = true;
  stepAccum = 0;
  seedRule();
}

function seedRule() {
  cur.fill(0);
  cur[cols >> 1] = 1;
  genInRule = 0;
  fading = true;
}

function step(ruleN) {
  const L = cols;
  for (let i = 0; i < L; i++) {
    const l = cur[i === 0 ? L - 1 : i - 1];
    const c = cur[i];
    const r = cur[i === L - 1 ? 0 : i + 1];
    const pat = (l << 2) | (c << 1) | r;
    nxt[i] = (ruleN >> pat) & 1;
  }
  const tmp = cur; cur = nxt; nxt = tmp;
}

function writeRow() {
  writeIdx = (writeIdx + 1) % rows;
  const base = writeIdx * cols;
  history.set(cur, base);

  const rule = RULES[ruleIdx];
  let cr = rule.color[0], cg = rule.color[1], cb = rule.color[2];
  if (fading && ruleIdx > 0) {
    const t = Math.min(1, genInRule / FADE_GENS);
    const prev = RULES[(ruleIdx - 1 + RULES.length) % RULES.length].color;
    cr = (prev[0] * (1 - t) + cr * t) | 0;
    cg = (prev[1] * (1 - t) + cg * t) | 0;
    cb = (prev[2] * (1 - t) + cb * t) | 0;
  }
  const cbase = writeIdx * 3;
  rowColors[cbase] = cr;
  rowColors[cbase + 1] = cg;
  rowColors[cbase + 2] = cb;

  genInRule++;
  if (genInRule >= FADE_GENS) fading = false;
  if (genInRule >= GENS_PER_RULE) {
    ruleIdx = (ruleIdx + 1) % RULES.length;
    seedRule();
  }
}

function init({ canvas, ctx, width, height }) {
  resetGrid(width, height);
}

function tick({ ctx, dt, width, height }) {
  if (cols !== Math.max(8, Math.floor(width / CELL)) ||
      rows !== Math.max(8, Math.floor(height / CELL))) {
    resetGrid(width, height);
  }

  stepAccum += dt;
  const stepDt = 1 / STEP_HZ;
  let steps = 0;
  while (stepAccum >= stepDt && steps < 4) {
    step(RULES[ruleIdx].n);
    writeRow();
    stepAccum -= stepDt;
    steps++;
  }

  ctx.fillStyle = '#08090c';
  ctx.fillRect(0, 0, width, height);

  for (let r = 0; r < rows; r++) {
    const histRow = (writeIdx - (rows - 1 - r) + rows * 2) % rows;
    const base = histRow * cols;
    const cbase = histRow * 3;
    const cr = rowColors[cbase];
    const cg = rowColors[cbase + 1];
    const cb = rowColors[cbase + 2];
    const age = (rows - 1 - r) / rows;
    const dim = 1 - age * 0.35;
    const fr = (cr * dim) | 0, fg = (cg * dim) | 0, fb = (cb * dim) | 0;
    ctx.fillStyle = `rgb(${fr},${fg},${fb})`;
    let runStart = -1;
    for (let i = 0; i < cols; i++) {
      const v = history[base + i];
      if (v && runStart < 0) runStart = i;
      else if (!v && runStart >= 0) {
        ctx.fillRect(runStart * CELL, r * CELL, (i - runStart) * CELL, CELL);
        runStart = -1;
      }
    }
    if (runStart >= 0) {
      ctx.fillRect(runStart * CELL, r * CELL, (cols - runStart) * CELL, CELL);
    }
  }

  const rule = RULES[ruleIdx];
  ctx.font = '600 13px ui-monospace, monospace';
  ctx.textBaseline = 'top';
  const label = rule.name;
  const padX = 10, padY = 8;
  const tw = ctx.measureText(label).width;
  ctx.fillStyle = 'rgba(8,9,12,0.65)';
  ctx.fillRect(padX - 6, padY - 4, tw + 12, 20);
  ctx.fillStyle = `rgb(${rule.color[0]},${rule.color[1]},${rule.color[2]})`;
  ctx.fillText(label, padX, padY);

  const barW = 120, barH = 3;
  const p = Math.min(1, genInRule / GENS_PER_RULE);
  ctx.fillStyle = 'rgba(255,255,255,0.12)';
  ctx.fillRect(padX, padY + 22, barW, barH);
  ctx.fillStyle = `rgba(${rule.color[0]},${rule.color[1]},${rule.color[2]},0.85)`;
  ctx.fillRect(padX, padY + 22, barW * p, barH);
}