Bak-Tang-Wiesenfeld Sandpile

const GW = 120, GH = 80;
const CX = GW >> 1, CY = GH >> 1;
let grid, topple, off, octx, img, buf32, palette;
let dropsPerFrame = 1;
let avalancheSize = 0, lastAvalanche = 0, peakAvalanche = 0, totalDrops = 0;

function init() {
  grid = new Uint8Array(GW * GH);
  topple = new Uint8Array(GW * GH);
  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  buf32 = new Uint32Array(img.data.buffer);

  // BTW palette: 0 = deep void, 1 = cool blue, 2 = warm amber, 3 = hot red.
  // Bytes are little-endian RGBA: 0xAABBGGRR.
  palette = new Uint32Array(4);
  palette[0] = (0xff << 24) | (0x18 << 16) | (0x0c << 8) | 0x06;
  palette[1] = (0xff << 24) | (0xa8 << 16) | (0x66 << 8) | 0x1f;
  palette[2] = (0xff << 24) | (0x2a << 16) | (0xb0 << 8) | 0xf2;
  palette[3] = (0xff << 24) | (0x55 << 16) | (0x33 << 8) | 0xff;

  // Pre-load the pile so the first frame is already interesting.
  for (let i = 0; i < 4000; i++) {
    grid[CY * GW + CX] += 1;
    if (grid[CY * GW + CX] >= 4) relax();
    totalDrops++;
  }
}

// Abelian sandpile relaxation. Toppling is order-independent so we do a
// simple two-buffer sweep: mark cells with >= 4 grains, then for every
// marked cell subtract 4 and hand 1 grain to each cardinal neighbor.
// Boundary cells lose grains that fall off the edge.
function relax() {
  let total = 0;
  while (true) {
    let any = 0;
    // pass 1: mark and zero topples buffer
    for (let i = 0; i < grid.length; i++) {
      if (grid[i] >= 4) { topple[i] = 1; any = 1; } else { topple[i] = 0; }
    }
    if (!any) break;
    // pass 2: subtract 4 from each toppler, add 1 to neighbors
    for (let y = 0; y < GH; y++) {
      const row = y * GW;
      for (let x = 0; x < GW; x++) {
        const i = row + x;
        if (!topple[i]) continue;
        grid[i] -= 4;
        total++;
        if (x > 0) grid[i - 1] += 1;
        if (x < GW - 1) grid[i + 1] += 1;
        if (y > 0) grid[i - GW] += 1;
        if (y < GH - 1) grid[i + GW] += 1;
      }
    }
  }
  return total;
}

function tick({ ctx, frame, width, height }) {
  // Drop grains at the center, then relax the pile.
  let frameTopples = 0;
  for (let d = 0; d < dropsPerFrame; d++) {
    grid[CY * GW + CX] += 1;
    totalDrops++;
    if (grid[CY * GW + CX] >= 4) frameTopples += relax();
  }
  if (frameTopples > 0) {
    avalancheSize = frameTopples;
    lastAvalanche = frameTopples;
    if (frameTopples > peakAvalanche) peakAvalanche = frameTopples;
  } else {
    avalancheSize = 0;
  }

  // Paint grid by state count.
  for (let i = 0; i < grid.length; i++) {
    const v = grid[i];
    buf32[i] = palette[v > 3 ? 3 : v];
  }
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, width, height);

  // HUD. Tells the viewer what's happening physically.
  const pad = 8;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(pad, pad, 196, 64);
  ctx.fillStyle = "#e8e8f0";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText("Bak-Tang-Wiesenfeld sandpile", pad + 8, pad + 18);
  ctx.fillStyle = "#9aa3b2";
  ctx.fillText("grains dropped: " + totalDrops, pad + 8, pad + 34);
  const av = avalancheSize > 0 ? avalancheSize : lastAvalanche;
  ctx.fillText("last avalanche: " + av + " topples", pad + 8, pad + 48);
  ctx.fillText("peak avalanche: " + peakAvalanche, pad + 8, pad + 62);

  // Center crosshair so the drop point is visible.
  const cellW = width / GW, cellH = height / GH;
  ctx.strokeStyle = "rgba(255,255,255,0.35)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(CX * cellW + cellW / 2 - 6, CY * cellH + cellH / 2);
  ctx.lineTo(CX * cellW + cellW / 2 + 6, CY * cellH + cellH / 2);
  ctx.moveTo(CX * cellW + cellW / 2, CY * cellH + cellH / 2 - 6);
  ctx.lineTo(CX * cellW + cellW / 2, CY * cellH + cellH / 2 + 6);
  ctx.stroke();
}