Forest Fire — Self-Organized Criticality

const GW = 150, GH = 150;
const p = 0.005, f = 0.00005;
const EMPTY = 0, TREE = 1, BURN = 2;
let A, B, off, octx, img, data;
let acc = 0;
const stepMs = 1000 / 30;

function init() {
  A = new Uint8Array(GW * GH);
  B = new Uint8Array(GW * GH);
  for (let i = 0; i < A.length; i++) A[i] = Math.random() < 0.55 ? TREE : EMPTY;
  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  data = img.data;
}

function stepCA() {
  for (let y = 0; y < GH; y++) {
    const yN = (y - 1 + GH) % GH, yS = (y + 1) % GH;
    for (let x = 0; x < GW; x++) {
      const i = y * GW + x;
      const s = A[i];
      if (s === BURN) { B[i] = EMPTY; continue; }
      if (s === EMPTY) { B[i] = Math.random() < p ? TREE : EMPTY; continue; }
      const xW = (x - 1 + GW) % GW, xE = (x + 1) % GW;
      let burn = false;
      if (A[yN * GW + xW] === BURN || A[yN * GW + x] === BURN || A[yN * GW + xE] === BURN ||
          A[y * GW + xW] === BURN || A[y * GW + xE] === BURN ||
          A[yS * GW + xW] === BURN || A[yS * GW + x] === BURN || A[yS * GW + xE] === BURN) burn = true;
      else if (Math.random() < f) burn = true;
      B[i] = burn ? BURN : TREE;
    }
  }
  const t = A; A = B; B = t;
}

function tick({ ctx, dt, width, height, input }) {
  const clicks = input && input.consumeClicks ? input.consumeClicks() : [];
  for (let c = 0; c < clicks.length; c++) {
    const cx = clicks[c].x, cy = clicks[c].y;
    const gx = Math.floor((cx / width) * GW);
    const gy = Math.floor((cy / height) * GH);
    if (gx >= 0 && gx < GW && gy >= 0 && gy < GH) {
      A[gy * GW + gx] = BURN;
    }
  }

  acc += Math.min(0.05, dt) * 1000;
  let n = 0;
  while (acc >= stepMs && n < 3) { stepCA(); acc -= stepMs; n++; }

  for (let i = 0, j = 0; i < A.length; i++, j += 4) {
    const s = A[i];
    if (s === TREE) { data[j] = 34; data[j + 1] = 139; data[j + 2] = 58; data[j + 3] = 255; }
    else if (s === BURN) {
      const r = Math.random();
      data[j] = 255; data[j + 1] = r < 0.5 ? 90 : 160; data[j + 2] = 20; data[j + 3] = 255;
    } else {
      data[j] = 12; data[j + 1] = 16; data[j + 2] = 14; data[j + 3] = 255;
    }
  }
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, width, height);
}