Forest Fire with Wind

const GW = 160, GH = 120;
const EMPTY = 0, TREE = 1, BURN = 2, ASH = 3;
const BURN_FRAMES = 6;

let A, B, age, ageB, off, octx, img, data;
let W, H, cellW, cellH;
let windX, windY;
let dragging = false, dragStartX = 0, dragStartY = 0;
let acc = 0;
const stepMs = 1000 / 30;

function init({ width, height }) {
  W = width; H = height;
  cellW = W / GW; cellH = H / GH;
  A = new Uint8Array(GW * GH);
  B = new Uint8Array(GW * GH);
  age = new Uint8Array(GW * GH);
  ageB = new Uint8Array(GW * GH);
  for (let i = 0; i < A.length; i++) A[i] = Math.random() < 0.62 ? TREE : EMPTY;
  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  data = img.data;
  for (let i = 3; i < data.length; i += 4) data[i] = 255;
  // default wind: gentle east
  windX = 0.7; windY = 0.0;
}

// per-neighbor catch probability, anisotropic along wind.
// dx,dy is the direction fire travels (burning neighbor -> us).
function pCatch(dx, dy) {
  const dot = dx * windX + dy * windY;
  let p = 0.32 * Math.exp(dot * 1.8);
  if (p > 0.98) p = 0.98; else if (p < 0.005) p = 0.005;
  if (dx !== 0 && dy !== 0) p *= 0.72;
  return p;
}

function stepCA() {
  const regrow = 0.0025, spark = 0.00004;
  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, s = A[i], a = age[i];
      if (s === BURN) {
        if (a + 1 >= BURN_FRAMES) { B[i] = ASH; ageB[i] = 0; }
        else { B[i] = BURN; ageB[i] = a + 1; }
        continue;
      }
      if (s === ASH) {
        if (Math.random() < regrow * 0.4) { B[i] = TREE; ageB[i] = 0; }
        else { B[i] = ASH; ageB[i] = a < 60 ? a + 1 : 60; }
        continue;
      }
      if (s === EMPTY) {
        B[i] = Math.random() < regrow ? TREE : EMPTY; ageB[i] = 0;
        continue;
      }
      const xW = (x - 1 + GW) % GW, xE = (x + 1) % GW;
      let caught = false;
      if (A[yN * GW + xW] === BURN && Math.random() < pCatch(1, 1)) caught = true;
      else if (A[yN * GW + x] === BURN && Math.random() < pCatch(0, 1)) caught = true;
      else if (A[yN * GW + xE] === BURN && Math.random() < pCatch(-1, 1)) caught = true;
      else if (A[y * GW + xW] === BURN && Math.random() < pCatch(1, 0)) caught = true;
      else if (A[y * GW + xE] === BURN && Math.random() < pCatch(-1, 0)) caught = true;
      else if (A[yS * GW + xW] === BURN && Math.random() < pCatch(1, -1)) caught = true;
      else if (A[yS * GW + x] === BURN && Math.random() < pCatch(0, -1)) caught = true;
      else if (A[yS * GW + xE] === BURN && Math.random() < pCatch(-1, -1)) caught = true;
      else if (Math.random() < spark) caught = true;
      if (caught) { B[i] = BURN; ageB[i] = 0; }
      else { B[i] = TREE; ageB[i] = a < 250 ? a + 1 : 250; }
    }
  }
  const t = A; A = B; B = t;
  const u = age; age = ageB; ageB = u;
}

function ignite(px, py, r) {
  const gx = Math.floor(px / cellW);
  const gy = Math.floor(py / cellH);
  for (let dy = -r; dy <= r; dy++) {
    for (let dx = -r; dx <= r; dx++) {
      if (dx * dx + dy * dy > r * r) continue;
      const x = ((gx + dx) % GW + GW) % GW;
      const y = ((gy + dy) % GH + GH) % GH;
      const i = y * GW + x;
      if (A[i] === TREE) { A[i] = BURN; age[i] = 0; }
    }
  }
}

function drawArrow(ctx) {
  const cx = W * 0.5, cy = H * 0.5;
  const sp = Math.hypot(windX, windY);
  if (sp < 0.02) return;
  const L = 64;
  const ux = windX / sp, uy = windY / sp;
  // Canvas y grows downward; our windY is "screen-down" already.
  const ex = cx + ux * L, ey = cy + uy * L;
  ctx.lineWidth = 3;
  ctx.strokeStyle = "rgba(255,255,255,0.85)";
  ctx.beginPath();
  ctx.moveTo(cx - ux * 8, cy - uy * 8);
  ctx.lineTo(ex, ey);
  ctx.stroke();
  // head
  const ang = Math.atan2(uy, ux);
  ctx.beginPath();
  ctx.moveTo(ex, ey);
  ctx.lineTo(ex - 12 * Math.cos(ang - 0.45), ey - 12 * Math.sin(ang - 0.45));
  ctx.lineTo(ex - 12 * Math.cos(ang + 0.45), ey - 12 * Math.sin(ang + 0.45));
  ctx.closePath();
  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.fill();
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; cellW = W / GW; cellH = H / GH; }

  // input: clicks ignite; drag (press + move) sets wind from press point
  const clicks = input.consumeClicks();
  for (let c = 0; c < clicks.length; c++) ignite(clicks[c].x, clicks[c].y, 3);

  if (input.mouseDown) {
    if (!dragging) { dragging = true; dragStartX = input.mouseX; dragStartY = input.mouseY; }
    const ddx = input.mouseX - dragStartX;
    const ddy = input.mouseY - dragStartY;
    const len = Math.hypot(ddx, ddy);
    if (len > 14) {
      // normalize then scale by drag length up to ~120 px -> max speed 1.4
      const speed = Math.min(1.4, len / 90);
      windX = (ddx / len) * speed;
      windY = (ddy / len) * speed;
    }
  } else {
    dragging = false;
  }

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

  // paint grid
  let burning = 0, trees = 0;
  for (let i = 0, j = 0; i < A.length; i++, j += 4) {
    const s = A[i];
    if (s === TREE) {
      trees++;
      const a = age[i];
      // older trees a bit darker green
      const g = 150 - Math.min(60, a >> 1);
      data[j] = 30; data[j + 1] = g; data[j + 2] = 52;
    } else if (s === BURN) {
      burning++;
      const a = age[i];
      // fresh = white-yellow, older = deep red
      const t = a / BURN_FRAMES;
      data[j] = 255;
      data[j + 1] = Math.max(40, 230 - (t * 190) | 0);
      data[j + 2] = Math.max(10, 80 - (t * 70) | 0);
    } else if (s === ASH) {
      const a = age[i];
      const v = 70 - Math.min(50, a);
      data[j] = v; data[j + 1] = v - 6; data[j + 2] = v - 12;
    } else {
      data[j] = 18; data[j + 1] = 22; data[j + 2] = 20;
    }
  }
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, W, H);

  drawArrow(ctx);

  // HUD
  ctx.font = "12px ui-monospace, monospace";
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(6, 6, 168, 50);
  ctx.fillStyle = "#e8eae6";
  const sp = Math.hypot(windX, windY);
  ctx.fillText(`wind  ${windX.toFixed(2)}, ${windY.toFixed(2)}`, 12, 22);
  ctx.fillText(`|w|   ${sp.toFixed(2)}`, 12, 36);
  ctx.fillText(`burn  ${burning}   tree ${trees}`, 12, 50);
}