Spiral Waves in Cardiac Tissue

// Cardiac excitable-medium CA on a 200x200 grid.
// Each cell holds a state s in [0, N): 0 = resting (excitable),
// 1..DEP = depolarized (action-potential upstroke, can excite neighbors),
// DEP+1..N-1 = absolute refractory (cannot fire), then wraps to 0.
// A resting cell fires (jumps to state 1) iff at least THRESH of its 8
// Moore neighbors are currently in the depolarized band. Non-resting
// cells just advance their phase deterministically. The initial
// condition is a broken plane wave (top half lit, bottom half blocked by
// refractory tissue) — the open end of the wavefront curls around the
// refractory block and locks into a rotating spiral, the textbook
// substrate for re-entrant ventricular fibrillation. Click a resting
// cell to inject a fresh circular pulse: watch two spirals collide and
// fragment into the chaotic activity of fibrillation.

const GW = 200, GH = 200, N = GW * GH;
const DEP = 3;          // duration of depolarized band (frames)
const REFR = 9;         // duration of refractory band (frames)
const NSTATE = DEP + REFR + 1;  // total cycle length, 0 is resting
const THRESH = 2;       // neighbors needed in depolarized band to fire

let cur, nxt;
let off, octx, img, pix;
let palette;            // Uint32Array RGBA per state
let lastInject = -1;
let acc = 0;
const stepMs = 1000 / 30;

function buildPalette() {
  palette = new Uint32Array(NSTATE);
  // 0 = resting: deep maroon (idle tissue)
  palette[0] = (0xff << 24) | (24 << 16) | (8 << 8) | 18;
  // depolarized band: bright crimson → white-hot at the leading edge
  for (let k = 1; k <= DEP; k++) {
    const t = (k - 1) / Math.max(1, DEP - 1);
    const r = 255;
    const g = (60 + 180 * t) | 0;
    const b = (40 + 160 * t) | 0;
    palette[k] = (0xff << 24) | (b << 16) | (g << 8) | r;
  }
  // refractory band: cooling violet → blue → back to maroon
  for (let k = DEP + 1; k < NSTATE; k++) {
    const t = (k - DEP - 1) / Math.max(1, REFR - 1);
    const r = (200 - 170 * t) | 0;
    const g = (40 + 10 * t) | 0;
    const b = (180 - 150 * t) | 0;
    palette[k] = (0xff << 24) | (b << 16) | (g << 8) | r;
  }
}

function seedSpiral() {
  // Broken plane wave: top half is a thin depolarized stripe heading
  // down; the right half of that stripe is freshly refractory so the
  // wavefront has an open end that curls into a spiral tip.
  cur.fill(0);
  const stripeY = (GH * 0.45) | 0;
  for (let y = stripeY; y < stripeY + DEP; y++) {
    const row = y * GW;
    for (let x = 0; x < GW; x++) {
      cur[row + x] = (y - stripeY) + 1;          // depolarized 1..DEP
    }
  }
  // Refractory block in the right half just below the stripe — this
  // pins one end of the wave so the free end on the left rotates.
  for (let y = stripeY + DEP; y < stripeY + DEP + REFR; y++) {
    const row = y * GW;
    for (let x = (GW / 2) | 0; x < GW; x++) {
      cur[row + x] = (y - stripeY) + 1;          // continues into refractory
    }
  }
}

function injectPulse(cx, cy, r) {
  if (cx < 0 || cy < 0 || cx >= GW || cy >= GH) return;
  const r2 = r * r;
  for (let y = -r; y <= r; y++) {
    const yy = cy + y;
    if (yy < 0 || yy >= GH) continue;
    const row = yy * GW;
    for (let x = -r; x <= r; x++) {
      if (x * x + y * y > r2) continue;
      const xx = cx + x;
      if (xx < 0 || xx >= GW) continue;
      const i = row + xx;
      if (cur[i] === 0) cur[i] = 1;
    }
  }
}

function init({ ctx }) {
  cur = new Uint8Array(N);
  nxt = new Uint8Array(N);
  seedSpiral();
  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  pix = new Uint32Array(img.data.buffer);
  buildPalette();
  // Let the spiral curl a bit before the first frame.
  for (let s = 0; s < 8; s++) step();
}

function step() {
  for (let y = 0; y < GH; y++) {
    const ym = (y - 1 + GH) % GH;
    const yp = (y + 1) % GH;
    const row  = y  * GW;
    const rowm = ym * GW;
    const rowp = yp * GW;
    for (let x = 0; x < GW; x++) {
      const s = cur[row + x];
      if (s === 0) {
        const xm = (x - 1 + GW) % GW;
        const xp = (x + 1) % GW;
        let cnt = 0;
        const a = cur[rowm + xm]; if (a >= 1 && a <= DEP) cnt++;
        const b = cur[rowm + x ]; if (b >= 1 && b <= DEP) cnt++;
        const c = cur[rowm + xp]; if (c >= 1 && c <= DEP) cnt++;
        const d = cur[row  + xm]; if (d >= 1 && d <= DEP) cnt++;
        const e = cur[row  + xp]; if (e >= 1 && e <= DEP) cnt++;
        const f = cur[rowp + xm]; if (f >= 1 && f <= DEP) cnt++;
        const g = cur[rowp + x ]; if (g >= 1 && g <= DEP) cnt++;
        const h = cur[rowp + xp]; if (h >= 1 && h <= DEP) cnt++;
        nxt[row + x] = cnt >= THRESH ? 1 : 0;
      } else {
        const ns = s + 1;
        nxt[row + x] = ns >= NSTATE ? 0 : ns;
      }
    }
  }
  const t = cur; cur = nxt; nxt = t;
}

function render(ctx, width, height, time) {
  for (let i = 0; i < N; i++) pix[i] = palette[cur[i]];
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, GW, GH, 0, 0, width, height);

  // HUD: count active (depolarized) cells as a proxy for "load".
  let active = 0;
  for (let i = 0; i < N; i++) {
    const s = cur[i];
    if (s >= 1 && s <= DEP) active++;
  }
  const pct = (100 * active / N).toFixed(1);
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(8, 8, 168, 44);
  ctx.fillStyle = "#ffdede";
  ctx.font = "12px monospace";
  ctx.fillText("excitable-medium CA  200x200", 14, 24);
  ctx.fillStyle = active / N > 0.18 ? "#ff8080" : "#ffdede";
  ctx.fillText("depolarized: " + pct + "%", 14, 40);

  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillRect(8, height - 26, 220, 18);
  ctx.fillStyle = "#ffe0e0";
  ctx.fillText("click resting tissue to inject a pulse", 14, height - 13);
}

function tick({ ctx, dt, time, width, height, input }) {
  const clicks = input && input.consumeClicks ? input.consumeClicks() : [];
  for (const c of clicks) {
    const gx = ((c.x / width) * GW) | 0;
    const gy = ((c.y / height) * GH) | 0;
    injectPulse(gx, gy, 6);
    lastInject = time;
  }

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

  render(ctx, width, height, time);
}