Wireworld Clockworks

const COLS = 60, ROWS = 40;
let cellSize = 16, ox = 0, oy = 0;
let A, B, stepAcc = 0;

const EMPTY = 0, COND = 1, HEAD = 2, TAIL = 3;

function setCell(buf, x, y, v) {
  if (x >= 0 && x < COLS && y >= 0 && y < ROWS) buf[y * COLS + x] = v;
}

function hline(buf, x0, x1, y, v) {
  const a = Math.min(x0, x1), b = Math.max(x0, x1);
  for (let x = a; x <= b; x++) setCell(buf, x, y, v);
}
function vline(buf, x, y0, y1, v) {
  const a = Math.min(y0, y1), b = Math.max(y0, y1);
  for (let y = a; y <= b; y++) setCell(buf, x, y, v);
}

function buildLoop(buf, cx, cy, w, h) {
  hline(buf, cx, cx + w, cy, COND);
  hline(buf, cx, cx + w, cy + h, COND);
  vline(buf, cx, cy, cy + h, COND);
  vline(buf, cx + w, cy, cy + h, COND);
}

function buildCircuit() {
  const g = new Uint8Array(COLS * ROWS);

  buildLoop(g, 2, 4, 10, 4);
  setCell(g, 5, 4, HEAD);
  setCell(g, 6, 4, TAIL);

  buildLoop(g, 2, 14, 8, 4);
  setCell(g, 4, 14, HEAD);
  setCell(g, 5, 14, TAIL);

  hline(g, 12, 28, 6, COND);
  hline(g, 10, 28, 16, COND);

  vline(g, 28, 6, 11, COND);
  hline(g, 28, 33, 11, COND);
  vline(g, 28, 16, 11, COND);

  setCell(g, 34, 10, COND);
  setCell(g, 34, 12, COND);
  setCell(g, 35, 10, COND);
  setCell(g, 35, 12, COND);
  setCell(g, 36, 10, COND);
  setCell(g, 36, 12, COND);
  setCell(g, 37, 11, COND);
  setCell(g, 36, 11, COND);

  hline(g, 37, 55, 11, COND);
  vline(g, 55, 11, 30, COND);
  hline(g, 20, 55, 30, COND);
  vline(g, 20, 20, 30, COND);
  hline(g, 20, 40, 20, COND);
  vline(g, 40, 11, 20, COND);

  return g;
}

function init({ canvas, ctx, width, height }) {
  cellSize = Math.max(6, Math.floor(Math.min(width / COLS, height / ROWS)));
  ox = Math.floor((width - COLS * cellSize) / 2);
  oy = Math.floor((height - ROWS * cellSize) / 2);
  A = buildCircuit();
  B = new Uint8Array(COLS * ROWS);
  ctx.imageSmoothingEnabled = false;
}

function step() {
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      const i = y * COLS + x;
      const s = A[i];
      if (s === EMPTY) { B[i] = EMPTY; continue; }
      if (s === HEAD) { B[i] = TAIL; continue; }
      if (s === TAIL) { B[i] = COND; continue; }
      let n = 0;
      for (let dy = -1; dy <= 1; dy++) {
        const yy = y + dy;
        if (yy < 0 || yy >= ROWS) continue;
        for (let dx = -1; dx <= 1; dx++) {
          if (dx === 0 && dy === 0) continue;
          const xx = x + dx;
          if (xx < 0 || xx >= COLS) continue;
          if (A[yy * COLS + xx] === HEAD) n++;
        }
      }
      B[i] = (n === 1 || n === 2) ? HEAD : COND;
    }
  }
  const t = A; A = B; B = t;
}

function tick({ ctx, dt, width, height, input }) {
  const clicks = input.consumeClicks();
  for (const c of clicks) {
    const gx = Math.floor((c.x - ox) / cellSize);
    const gy = Math.floor((c.y - oy) / cellSize);
    if (gx < 0 || gx >= COLS || gy < 0 || gy >= ROWS) continue;
    const i = gy * COLS + gx;
    if (A[i] === EMPTY) A[i] = COND;
    else if (A[i] === COND) A[i] = HEAD;
  }

  stepAcc += dt;
  while (stepAcc >= 0.1) { step(); stepAcc -= 0.1; }

  ctx.fillStyle = '#06070a';
  ctx.fillRect(0, 0, width, height);

  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      const s = A[y * COLS + x];
      if (s === EMPTY) continue;
      if (s === COND) ctx.fillStyle = '#d49a2a';
      else if (s === HEAD) ctx.fillStyle = '#5ff0ff';
      else ctx.fillStyle = '#2a7a99';
      ctx.fillRect(ox + x * cellSize, oy + y * cellSize, cellSize - 1, cellSize - 1);
    }
  }

  ctx.globalCompositeOperation = 'lighter';
  ctx.fillStyle = 'rgba(95,240,255,0.18)';
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      if (A[y * COLS + x] === HEAD) {
        ctx.fillRect(ox + x * cellSize - 2, oy + y * cellSize - 2, cellSize + 3, cellSize + 3);
      }
    }
  }
  ctx.globalCompositeOperation = 'source-over';
}