Hodgepodge Machine

// Gerhardt-Schuster hodgepodge machine (1989). A cellular automaton built
// to caricature an excitable chemical medium. Each cell holds an integer
// state s in [0, N-1]:
//   s = 0           "healthy"   — susceptible to infection
//   0 < s < N-1     "infected"  — actively reacting, integer-valued sickness
//   s = N-1         "ill"       — fully reacted, recovers next tick
//
// Update rule on a Moore (8-) neighborhood:
//   healthy:   s' = floor(A/k1) + floor(B/k2)
//                   A = #infected neighbors, B = #ill neighbors
//   infected:  s' = floor(S/(A+1)) + g
//                   S = sum of states over neighborhood incl self
//                   A = #(infected + ill) neighbors
//   ill:       s' = 0
//
// With the right k1, k2, g you get rotating spiral waves and concentric
// target patterns — visually distinct from cyclic CA: states don't march
// monotonically through a cycle, they ramp up and crash. Render uses a
// warm (black -> red -> orange -> yellow -> white) colormap so the
// chemical-front feel reads at a glance.

const GW = 200, GH = 150;
const N = GW * GH;
const NSTATES = 100;       // 0..99
const ILL = NSTATES - 1;
const K1 = 3;              // infected-neighbor weight (healthy update)
const K2 = 3;              // ill-neighbor weight (healthy update)
const G = 28;              // infected ramp constant
const SUM_DIV_CAP = NSTATES - 1;

let a, b;                  // Uint8Array state buffers
let off, octx, img, buf32; // offscreen render
let palette;               // Uint32Array, ARGB little-endian (RGBA bytes)
let acc = 0;
const stepMs = 1000 / 24;

// Auto-reseed: the CA can settle into a quiet near-uniform state where
// nothing visible is happening. Every ~27s we drop a fresh hot blob in to
// re-nucleate spirals so a scroll-by viewer never sees a frozen screen.
let reseedAcc = 0;
const RESEED_INTERVAL_S = 27;

function init() {
  a = new Uint8Array(N);
  b = new Uint8Array(N);

  // Mostly healthy + a few dense hot spots so spirals/targets have
  // something to nucleate from. Pure-random init across the whole grid
  // produces noisy hodgepodge that takes a long time to organize;
  // localized infection seeds give target patterns within seconds.
  for (let i = 0; i < N; i++) a[i] = 0;
  for (let k = 0; k < 8; k++) {
    const cx = (Math.random() * GW) | 0;
    const cy = (Math.random() * GH) | 0;
    const r = 3 + ((Math.random() * 5) | 0);
    for (let y = -r; y <= r; y++) {
      for (let x = -r; x <= r; x++) {
        if (x * x + y * y > r * r) continue;
        const xi = ((cx + x) % GW + GW) % GW;
        const yi = ((cy + y) % GH + GH) % GH;
        const j = yi * GW + xi;
        // a mix of infected levels and ill cells within each blob
        const rr = Math.random();
        if (rr < 0.15) a[j] = ILL;
        else a[j] = 10 + ((Math.random() * (ILL - 20)) | 0);
      }
    }
  }

  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  buf32 = new Uint32Array(img.data.buffer);

  // Warm colormap: black -> deep red -> orange -> yellow -> near-white.
  // Hodgepodge "heat" maps naturally to fire colors.
  palette = new Uint32Array(NSTATES);
  for (let k = 0; k < NSTATES; k++) {
    const t = k / (NSTATES - 1);
    // piecewise warm ramp
    let r, g, bl;
    if (t < 0.25) {
      const u = t / 0.25;        // 0..1
      r = u * 180;
      g = 0;
      bl = 0;
    } else if (t < 0.55) {
      const u = (t - 0.25) / 0.30;
      r = 180 + u * 75;          // 180 -> 255
      g = u * 130;               // 0 -> 130
      bl = 0;
    } else if (t < 0.85) {
      const u = (t - 0.55) / 0.30;
      r = 255;
      g = 130 + u * 110;         // 130 -> 240
      bl = u * 60;               // 0 -> 60
    } else {
      const u = (t - 0.85) / 0.15;
      r = 255;
      g = 240 + u * 15;          // 240 -> 255
      bl = 60 + u * 190;         // 60 -> 250
    }
    const R = r | 0, G = g | 0, B = bl | 0;
    // ImageData byte order is RGBA, so packed little-endian Uint32 is ABGR.
    palette[k] = (0xff << 24) | (B << 16) | (G << 8) | R;
  }

  // A few pre-steps so the first frame already has structure.
  for (let s = 0; s < 4; 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 xm = (x - 1 + GW) % GW;
      const xp = (x + 1) % GW;
      const i = row + x;
      const s = a[i];

      if (s === ILL) {
        b[i] = 0;
        continue;
      }

      // Inspect 8 Moore neighbors.
      const n0 = a[rowm + xm], n1 = a[rowm + x], n2 = a[rowm + xp];
      const n3 = a[row + xm],                   n4 = a[row + xp];
      const n5 = a[rowp + xm], n6 = a[rowp + x], n7 = a[rowp + xp];

      let infected = 0;  // 0 < ns < ILL
      let ill = 0;       // ns === ILL
      let sum = s;       // include self for infected update
      // unrolled neighbor walk
      let ns;
      ns = n0; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n1; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n2; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n3; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n4; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n5; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n6; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;
      ns = n7; sum += ns; if (ns === ILL) ill++; else if (ns > 0) infected++;

      let next;
      if (s === 0) {
        // Healthy cell: pick up infection from neighborhood.
        next = ((infected / K1) | 0) + ((ill / K2) | 0);
      } else {
        // Infected cell: ramp toward ill, modulated by neighborhood mean.
        const ai = infected + ill;
        next = ((sum / (ai + 1)) | 0) + G;
      }

      if (next < 0) next = 0;
      else if (next > ILL) next = ILL;
      b[i] = next;
    }
  }
  const t = a; a = b; b = t;
}

function reseed() {
  // Drop a single random hot blob (~20 cells) of mixed infected/ill states
  // into the current grid. Matches the per-blob recipe in init() so the
  // injected perturbation behaves like the original nucleation seeds.
  const cx = (Math.random() * GW) | 0;
  const cy = (Math.random() * GH) | 0;
  const r = 2 + ((Math.random() * 2) | 0); // r in 2..3 -> ~13..29 cells
  for (let y = -r; y <= r; y++) {
    for (let x = -r; x <= r; x++) {
      if (x * x + y * y > r * r) continue;
      const xi = ((cx + x) % GW + GW) % GW;
      const yi = ((cy + y) % GH + GH) % GH;
      const j = yi * GW + xi;
      const rr = Math.random();
      if (rr < 0.15) a[j] = ILL;
      else a[j] = 10 + ((Math.random() * (ILL - 20)) | 0);
    }
  }
}

function tick({ ctx, dt, width, height }) {
  const dtClamped = Math.min(0.05, dt);
  acc += dtClamped * 1000;
  reseedAcc += dtClamped;
  if (reseedAcc >= RESEED_INTERVAL_S) {
    reseed();
    reseedAcc = 0;
  }
  let n = 0;
  while (acc >= stepMs && n < 3) { step(); acc -= stepMs; n++; }

  for (let i = 0; i < N; i++) buf32[i] = palette[a[i]];
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, width, height);

  // HUD: corner label so people know what to read into the colors.
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(6, 6, 168, 32);
  ctx.fillStyle = "#fff";
  ctx.font = "12px system-ui, sans-serif";
  ctx.textBaseline = "top";
  ctx.fillText(`hodgepodge  N=${NSTATES}`, 12, 10);
  ctx.fillText(`k1=${K1}  k2=${K2}  g=${G}`, 12, 24);
}