Reaction-diffusion · particle-1

Let's write the app. Design:

Grid 256x256 (square). Fields U, V Float32Array. Parameters Du=0.16, Dv=0.08, feed=0.035, kill=0.062. Standard Gray-Scott with dt convention where Du typically 0.16, Dv=0.08, dt=1.0 uses 9-point or 5-point Laplacian. With these coefficients, using the classic Karl Sims formulation: dU = Du*∇²U - U*V² + F*(1-U); dV = Dv*∇²V + U*V² - (F+k)*V. With dt = 1 and 5-point Laplacian normalized /dx², Du=0.16 is stable since 4*0.16+4*0.08=0.96 <1... Actually stability requires dt*(Du+Dv)*4/dx² ≤ 1. With dx=1, dt=1: 4*(0.16+0.08)=0.96 < 1, stable. Good. Use 9-point Laplacian? The classic uses weights 0.05 orthogonal, 0.2 diagonal? Let's just use 5-point; it works but pattern shapes differ (worms/spots). With F=0.035, k=0.062 you get "coral/mitosis" patterns. Fine.

Rendering: ImageData with palette. Use a gradient map: U high/V low -> dark blue/black, V high -> bright cyan/orange. Map v = clamp(V*?,0,1). Compute color as gradient with several stops.

Performance: 256x256 = 65536 cells, ~4-6 iterations per frame. Render via ImageData at grid resolution then drawImage scaled to canvas with imageSmoothingEnabled maybe true for smoother. Actually put ImageData into offscreen canvas of grid size, then drawImage scaled. Use CSS canvas size responsive; internal canvas 512-ish? Simpler: canvas width = grid size * 2? Let's use renderCanvas offscreen at N x N, then main canvas displayed at CSS size; set main canvas width/height to N*2 and drawImage with smoothing for nice look. Or draw directly to main canvas of size N and let CSS scale it up (image-rendering auto gives smooth). That is simplest and fast: main canvas width=N height=N, CSS width 100% square.

Pointer: seed radius ~ 6 cells, set V = 1, U = 0.5 (or 0.2). Handle pointerdown/drag with pointer events, map coords by bounding rect.

Controls: Pause/Resume button, Reset button, plus maybe brush size slider and params? Keep required: pause, reset. Maybe add iteration speed slider. Keep it modest.

Add pattern type selector? Not required. Maybe presets for feed/kill for fun — but requirement specifies fixed params. Could add sliders but reset defaults. Keep simple: show F/k values, maybe allow adjusting? Risk of confusion; I'll keep fixed but display them.

HUD showing stats: "V mass" maybe useful. Also an FPS. Let's include a small readout of initial seed state.

Reset: restore U=1, V=0, and central seed.

Let's also ensure deterministic initial seed: same each reset.

Iteration loop with fixed steps per frame (e.g., 8) at 60fps → 480 steps/sec. Pattern evolves quickly. Let's use 6 iterations per frame at 256 grid: 65536*6 = 393k cells/frame → fine (few ms in JS with typed arrays).

Use wrapped indexing: precompute x-1, x+1 arrays for speed.

Kernel: 5-point Laplacian with wrap: (U left+right+up+down - 4*center). Also maybe include 9-point isotropic: weights center -1, orth 0.2, diag 0.05 (sum 0). Standard Gray-Scott 9-point: 
lap = 0.05*(diag sum) + 0.2*(orth sum) - 1*center. This is more isotropic. Stability: max eigen... coefficient sum abs = 4*0.2+4*0.05+1 = 2. For dt=1, Du=0.16: 0.16*2 + 0.08*2 = 0.48 dt=1 fine.

I'll use the 9-point for nicer patterns.
Maybe use 8-point for speed. Let's write optimized loop with row offsets, wrap via conditional indices. Precompute row offsets im1, ip1.

Code:

```js
const N = 256;
const U = new Float32Array(N*N).fill(1);
const V = new Float32Array(N*N);
const U2 = new Float32Array(N*N);
const V2 = new Float32Array(N*N);
```

Step:
```js
function step(){
  const du=0.16, dv=0.08, f=0.035, k=0.062, dt=1;
  for(let y=0;y<N;y++){
    const ym = ((y-1+N)%N)*N, yp=((y+1)%N)*N, yc=y*N;
    for(let x=0;x<N;x++){
      const xm=(x-1+N)%N, xp=(x+1)%N;
      const c=yc+x;
      const u=U[c], v=V[c];
      const lapU = 0.2*(U[yc+xm]+U[yc+xp]+U[ym+x]+U[yp+x]) + 0.05*(U[ym+xm]+U[ym+xp]+U[yp+xm]+U[yp+xp]) - u;
      const lapV = ...
      const uvv=u*v*v;
      let nu = u + (du*lapU - uvv + f*(1-u))*dt;
      let nv = v + (dv*lapV + uvv - (f+k)*v)*dt;
      U2[c] = nu<0?0:nu>1?1:nu? ... clamp
      V2[c] = clamp(nv,0,1)
    }
  }
  swap
}
```

Modulo in inner loop is ok but can be optimized with precomputed index maps. Precompute xm/xp arrays and ym/yp arrays once. Good.

Clamp to [0,1] for stability.

Rendering palette: v based color. Use a palette with stops:
t=0: [8,10,20] deep navy
0.18: [22,48,92]
0.35: [16,110,150]
0.5: [20,180,170]
0.68: [120,230,140]
0.85: [240,230,140]
1: [255,250,225]

Compute per-cell color via lookup table of 256 entries built from gradient stops. t = clamp( (v - 0.02)/0.6 ) maybe. Typical V ranges 0..0.4. Use t = Math.min(1, v*3.2) maybe with gamma. Let's map t = clamp(v/0.45) and apply sqrt-ish. Include small U-based shading maybe: brightness scaled by U? Keep simple: color from V, plus subtle background varying with U.

LUT of 512 entries to reduce banding. Interpolate stops.

Pointer draw: radius in cells r=7; for cells within radius, V += (1 - d²/r²)*0.9 clamp, U -= 0.5*amount clamp min 0.15? Requirement "adds V and reduces U near the pointer". Do U = Math.min(U, 0.35*?) Let's do: for each cell within r, falloff w = smoothstep; V = V + w*(0.9 - V)*? Simpler: V = Math.max(V, w*1.0); U = Math.min(U, 1 - 0.85*w). That's reducing U.

Need to render immediately after seeding so pointer effect visible before next frame.

Also on pointerdown we paint; dragging interpolate between last and current position to avoid gaps.

UI layout: header with title, canvas panel, controls footer with buttons and readouts. Responsive max-width. Dark theme, monospace-ish. Buttons accessible with aria-pressed for pause.

Show status: "Running" / "Paused", generation count, V mass, fps maybe. Update HUD every ~10 frames.

Also keyboard: space toggles pause, R resets. Careful not to interfere with buttons (preventDefault space when button focused). Handle keydown on window, ignore if target is button? Actually space on focused button triggers click; if I also handle keydown, double toggle. Use e.target check: if tag is BUTTON, skip.

Canvas coordinate mapping: canvas width=N; rect scaling handles DPR naturally by CSS size. Use (e.clientX - rect.left)/rect.width*N.

Add brush size slider maybe ("Brush"). Nice extra, easy. And speed control (steps/frame). Keep small.

Let's write the file.

Also add "wrap canvas shadows"? Keep style tasteful: dark background, glow.

Add initial seed: central region radius 6 for V=1 and U=0.3, maybe slightly off-center? Requirement: small central region. Radius ~5-6 cells at 256 grid. Use radius 7 with smooth falloff? For classic pattern, seed a square-ish region. Use radius 6, V=0.5, U=0.5. Hmm typical: U=0.5, V=0.25 inside small square. With F=.035 k=.062, patterns grow. Set V=0.9, U=0.2 inside radius 5 → strong. The pattern will spread and split resulting in mitosis-like structures filling the grid. Good.

Also FPS limiting? Use requestAnimationFrame; steps per frame fixed default 8.

Now write HTML.

For rendering performance, use ImageData of size N*N and ctx.putImageData. Then CSS scale canvas. With canvas CSS size ~560px and width 256, smoothing on by default → smooth look.

HUD: "t = steps count", "V max"? Use V mass.

Let's code carefully.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gray-Scott Reaction–Diffusion</title>
<style>...</style>
</head>
<body>
<main class="app">
  <header>...</header>
  <div class="stage">
    <canvas id="sim" width="256" height="256" aria-label="Gray-Scott reaction-diffusion simulation"></canvas>
    <div class="badge" id="status">Running</div>
  </div>
  <div class="controls">...
</main>
<script>...</script>
</body>
```

Layout: flex column; canvas max size based on viewport height: width:min(88vw, 62vh, 600px); aspect-ratio 1.

Let's write out with a monitor readout row: Step, Pattern? Add feed/kill chips.

Write JS:

```js
(() => {
  'use strict';
  const N = 256;
  const COUNT = N*N;
  const Du = 0.16, Dv = 0.08, FEED = 0.035, KILL = 0.062;
  const DT = 1.0;

  const u = new Float32Array(COUNT);
  const v = new Float32Array(COUNT);
  const uNext = new Float32Array(COUNT);
  const vNext = new Float32Array(COUNT);

  const xm = new Uint16Array(N), xp = new Uint16Array(N), ym = new Uint16Array(N), yp = new Uint16Array(N);
  for (let i=0;i<N;i++){ xm[i]=(i-1+N)%N; xp[i]=(i+1)%N; ym[i]=((i-1+N)%N)*N; yp[i]=((i+1)%N)*N; }

  // LUT
  const LUT_N = 512;
  const lut = new Uint8ClampedArray(LUT_N*3);
  const stops = [...];
  function buildLUT() { ... }
```

Gradient stops interpolation:

```js
const STOPS = [
  [0.00, 8, 12, 26],
  [0.12, 12, 26, 60],
  [0.28, 18, 76, 120],
  [0.45, 14, 140, 150],
  [0.62, 46, 196, 132],
  [0.78, 168, 226, 90],
  [0.90, 246, 214, 92],
  [1.00, 255, 250, 232],
];
```

For each i in LUT_N: t=i/(LUT_N-1); find segment; lerp.

Mapping V→t: t = Math.pow(Math.min(1, v/0.42), 0.85)? Let's check typical V: in mitosis patterns, V peaks ~0.3-0.4. So dividing by 0.42 gives good contrast.

Actually keep brighter: t = clamp(v*2.6, 0,1); apply Math.sqrt maybe to boost mid. Let's compute index = (v * 2.6 * 511) | 0 clamped. Add U shading: subtract a bit where U low? Not needed.

Maybe include slight variation using U: color darker where U~1? Base (V=0) is near-black navy; fine.

Render:

```js
const img = ctx.createImageData(N,N);
const data = img.data;
function render(){
  for (let i=0;i<COUNT;i++){
    let t = v[i]*2.4;
    if (t>1) t=1;
    let idx = (t*511)|0;
    idx*=3;
    const o=i*4;
    data[o]=lut[idx]; data[o+1]=lut[idx+1]; data[o+2]=lut[idx+2]; data[o+3]=255;
  }
  ctx.putImageData(img,0,0);
}
```

Add subtle U modulation: brightness factor = 0.55 + 0.45*(1-u)? For V=0, U=1 → background dim. Multiply color by (0.7 + 0.3*(1-u)). Requires multiply per channel — extra cost but fine. Keep simple: skip; the LUT handles it.

Hmm, but interior of blobs where U is depleted will be bright and surrounding dark. Fine.

Gradient direction: our lut is bright for high V. Good.

Step function as above. Also add mass readout.

Sim loop:

```js
let steps = 0, running = true, stepsPerFrame = 7, acc = 0;
let lastT = performance.now(), fps=60;
function frame(now){
  requestAnimationFrame(frame);
  ...
  if (running) { for (let s=0;s<stepsPerFrame;s++){ evolve(); } steps += stepsPerFrame; render(); updateHUD(); }
}
```

Need to measure fps with smoothing.

Paint function:
```js
function paint(cx, cy, radius, strength=1){
  const r2 = radius*radius;
  const x0 = Math.floor(cx-radius), x1=Math.ceil(cx+radius), etc, wrapped
  for (let oy=-ceil; oy<=ceil; oy++) { const y = ((cy+oy)%N+N)%N; ... 
    const d2 = ox*ox+oy*oy;
    if (d2>r2) continue;
    const w = 1 - d2/r2; // quadratic falloff
    const ww = w*w? 
    const i = y*N+x;
    // reduce U, add V
    const uTarget = 1 - 0.9*ww;
    if (u[i] > uTarget) u[i] = uTarget;
    const vTarget = 1.0*ww;
    if (v[i] < vTarget) v[i] = vTarget;
  }
}
```

Brush radius default 6 cells, slider 3..20.

Pointer handling with line interpolation:

```js
let painting=false, last=null;
canvas.addEventListener('pointerdown', e=>{ canvas.setPointerCapture(e.pointerId); painting=true; const p=pos(e); last=p; paint(p.x,p.y,brush); render(); e.preventDefault(); });
canvas.addEventListener('pointermove', e=>{ if(!painting) return; const p=pos(e); ... interpolate steps based on distance/ (brush*0.35) });
window pointerup...
```

Use `touch-action: none` on canvas CSS.

For pointer positions compute in cell units possibly fractional. paint uses fractional cx/cy.

Interpolation: linear between last and p, step of brush*0.4.

After painting, if paused, render so user sees it. If running, next frame renders.

Reset:

```js
function reset(){
  u.fill(1); v.fill(0);
  seedCenter();
  steps = 0; lastPos=null;
  render(); updateHUD();
}
function seedCenter(){
  const c = N/2;
  paint(c, c, 6, ... ) // careful paint uses min/max so from fresh field works
}
```

But paint with default radius brush maybe. Write seed with radius 7 using same paint; but requirement central seed — set brush-independent radius 7.

Ensure that reset while paused still renders.

Also add "Restart paused state"? Reset keeps pause state.

Buttons: Pause/Resume (#toggle), Reset (#reset). Update button label & status badge.

Keyboard handlers.

HUD update: set text every frame could be costly; do every 6 frames. Use `steps` readout and V coverage percent.

Let's compute coverage maybe every render? Could just display steps and FPS. Coverage computation each HUD update (65536 loop) fine every 10 frames.

Add note about parameters in footer chips.

Also add subtle canvas inner border/glow.

Style design: dark background with radial gradient, monospace labels, accent color teal. Button styling with hover/active. Controls row with brush slider.

Let's write it.

One concern: performance of 256² × 8 steps/frame with 9-point stencil and clamp: 524k cell updates/frame. Each ~20 ops → ~10M ops/frame, probably 5-8ms. OK. Maybe default 6 steps/frame.

Let's write the code now.

Also make sure DPR: putImageData at 256 buffer scaled by CSS. Good.

Potential issue: `data[o+3]` set once — ImageData alpha initialized 0, need set 255 each render. Fine.

Now write file.

Now run in browser and inspect.

Initial seed visible, small. Let's let it evolve and screenshot after some seconds.

Note the readouts show Steps 0 / coverage 0.2% in DOM snapshot but steps 72 in prior — timing. Fine.

Let's wait and screenshot.

Evolution happening, but pattern is small (coverage 0.6% after 2400 steps). This might be because pattern at f=0.035, k=0.062 forms small spots and grows slowly? Classic "mitosis" at F=0.0367, k=0.0649 grows. With seed radius 6.5, that's rather small; growth spreads slowly. Coverage 0.6% at 2400 steps. Maybe after 10000 steps coverage increases more. The pattern does evolve organic shapes. But visually, the pattern remains small for a while. Let's check after 10 more seconds.

Also consider whether V is spreading; at f=.035, k=.062, the "coral" growth regime tends to spread and fill. 9-point Laplacian with dt=1 gives effective diffusion differing from classic but should still work.

Let's wait 10s and screenshot.

Growing nicely (organic coral pattern). But at 6.7k steps after 16s, spread is modest. Fine—user can seed more. The seed grows slowly but steadily. Might want faster evolution: increase steps per frame to 8. FPS ~57 at 6 steps. Increase to 8 maybe. Also could increase seed radius to 8 for faster start. Still requirement is "small central region". Radius 6.5 of 256 ~ 5% width. Fine.

Now verify pointer seeding: click at a separate region, e.g., at canvas center-left. Canvas rect in viewport: stage spans x 369..829, y 146..604? From screenshot canvas region ~ 370..828 in x, 147..603 in y. Click at (430, 300).

Let's click and take screenshot sequence, checking paused state too. First pause to make check deterministic? Better: first click while running, wait, screenshot to see growth at new location.

Let's click at (450, 300).

New blob at (450,300). Wait 3 sec, screenshot to verify it evolves.

New region evolved into a symmetric four-lobe pattern → pointer seeding affects subsequent frames. Good.

Test pause: click Pause button at (322, 646), screenshot twice with delay to verify identical, then resume.

Let's click Pause.

Paused: status badge orange "PAUSED", button "RESUME". Wait 2s and inspect steps unchanged (should remain 10,794).

Paused holds. Now test painting while paused renders immediately (already pointerdown renders). Not necessary but quick. Then resume and verify steps increase and pattern evolves.

Click Resume.

Now test reset while running: click Reset, then pause quickly and compare central seed with initial scene. Better: pause first then reset → reset renders immediately; take screenshot to compare central seed with initial frame.

Click Pause then Reset.

Interesting: the screenshot still shows old pattern while the readouts show Steps 11,580 and coverage 0.1%, meaning reset happened but the render shown is stale? Wait — the screenshot is taken at a moment; DOM readouts show reset values, but canvas appears unchanged. The canvas rendered by reset should show only the central seed. Maybe the screenshot image is stale from before (browser screenshot attached might be captured before click?). The image shows PAUSED status, but reset readout has happened. Hmm, screenshot might be a cached frame from the click pre-action. Let's take a fresh screenshot.

Two issues surfaced:

1. The screenshot image is stale relative to DOM (probably tooling quirk; images may be delayed). But more importantly the readouts reverted: steps 11,610, coverage 6.2% — after reset it was 11,580 / 0.1%, and now back to 11,610. That means reset did not persist? Paused, steps should stop changing. Wait, after clicking Reset at paused state, steps=0. Then next screenshot shows steps 11,610 again?! Significant bug perhaps.

Hypothesis: my click at (322,646) toggled pause; then the reset click happened? I only clicked once at pause coordinates. Actually sequence: click Pause → paused (steps 11,610 shown in DOM). Then screenshot stale old image. Previous screenshot DOM showed steps 11,580. Hmm.

Wait, maybe the canvas isn't updating visually because when paused, rendering only happens on interaction; reset calls render. Screenshot should show central seed. Yet stale image persists. Also steps inconsistencies suggest HUD update race? Let's reason.

Actually the first "Pause" click DOM showed steps 10,794, coverage 5.4%. Then after 2s inspect: 10,794, 5.4% — paused correctly. Then click Resume: DOM 10,794. Then click Pause: DOM 11,610, 6.2%. Then click Reset? I clicked only one location (322,646) which is Pause button. I did NOT click reset. The attached image after that shows 11,580 / 0.1% — that's odd since DOM after shows 11,610 / 6.2%. That image was possibly from the previous run? Hmm, the image shows RESUME and coverage 0.1% — inconsistent with current DOM.

Wait, was that image perhaps rendered between the pre-click pause and reset? I didn't click reset. Very strange.

Could the tool's image be a stale cached image from the "initial" state? Initial had steps 72, coverage 0.1%, PAUSE (running). Not matching.

Maybe the coordinate (322,646) maps differently, and I clicked Reset? Button positions: Pause at x~322, Reset at x~435. So no.

Hmm, possibly the screenshot pipeline gives image from a prior evaluation frame of the page? The steps 11,580 / coverage 0.1% doesn't correspond to any state I observed.

Also worry: canvas not visually updating in screenshots after reset. Maybe the image attached is old because screenshot captured before pause processing. Let's take further action to diagnose: use JS evaluation? Browser tool only supports inspect/screenshot/click. inspect returns DOM only.

Let me click Pause again (to resume? currently paused → button Resume). Actually current DOM says PAUSED with Resume. Steps 11,610 static across two screenshots, so paused. The canvas still shows the developed pattern, meaning reset was never triggered. Steps 11,610 not 0. So the weird image with 0.1% is inexplicable but probably a glitch of the screenshot sampling. Wait—could reset have been triggered by the click then undone? No.

Let me click Reset deliberately at (435, 646), then screenshot and inspect.

Reset works: central seed restored, steps 0, coverage 0.2%. Later frames will evolve. The earlier stale image was likely a screenshot timing artifact.

Now resume and ensure evolution from reset progresses (central seed grows). Click Resume, wait 3s, screenshot.

Also consider improving initial seed visibility: currently a bright white small dot. It grows slowly. Could increase seed radius to 8 so the initial pattern is a bit more prominent. At reset with radius 6.5, diameter 13 cells of 256 → 5%. That's small but acceptable. I'd bump to 8 for visibility. Also STEPS_PER_FRAME 6 gives ~60fps.

Let me resume and check evolution from reset.

Running, steps 0, seed central. Wait a few seconds and verify growth. Then tweak seed radius maybe 8 and steps per frame? Let's evaluate speed after 5s.

Pattern evolved after reset, matching initial evolution path (symmetrical coral). Good.

Remaining concerns:
- Evolution is slowish; the symmetry from the circular seed produces a symmetric four-lobe pattern. That's fine, organic over time.
- Test drag to draw a line (need for drag behavior).
- Test keyboard? optional.

Improvements to consider:
1. Increase seed radius slightly (8) so the pattern is more visible initially and grows faster. Also maybe set STEPS_PER_FRAME to 8 for faster drama while maintaining ~60fps. FPS was 58 at 6 steps; CPU headroom maybe. Keep 6 for headroom on slower machines; but growth slow. I could bump seed radius to 8 and steps to 8. Let's check performance: fps ~53-58, per-frame compute ~? Steps 6 in 16ms → fine. At 8 steps may drop to ~45fps but simulation speed increases. Responsiveness requirement—keep FPS high. I'll keep 6 steps and radius 8.

2. The symmetry: could add tiny noise to seed for organic asymmetry? Gray-Scott seed circular produces beautiful symmetric pattern, but after growth becomes organic. Adding slight randomness to initial V could help organic. Requirement says seed central region; small noise fine. Let's add deterministic pseudo-random jitter to U/V within seed? Simpler: add tiny random perturbation over seeded region using seeded PRNG. Might improve organic looks. But symmetric patterns are visually pleasing. Keep as-is; patterns do become organic (as seen earlier).

3. Coverage readout: v > 0.12 percent at 0.6% early. Fine.

4. The screenshot timing artifact: no real bug.

Let me implement radius 8 and maybe display "6 steps/frame". Also add a small dither/perturbation so patterns break symmetry organically? I'll test quickly with radius 8.

Also test dragging. After edit, reload and drag across the canvas, and verify path pattern visible.

One more: brush slider changes painting radius, works likely. Test quickly maybe.

Edit seedCenter radius to 8 and strengthen center? With radius 8, seed coverage ~0.3%. Fine.

Actually with radius 8, target V 0.95 and U 0.08 at center. The transition region where V partial and U partial could produce noisy start. Fine.

Let me also change initial display: bright white dot at t=1 (v=0.4+) near white. Fine.

Make edit.

Seed visible. Now test drag: drag from (430,220) to (650,220) then screenshot after 2s. Use drag action.

Drag works: a continuous line injected; it's evolving with beads. Central seed ring shape evolving.

Now, check wrapping boundary. Pattern will eventually reach boundary; hard to test quickly. Implementation uses wrapped indices; fine.

One aesthetic thing: coverage 1.2% but the readouts update later. Fine.

Potential issue: painting while paused: pointerdown renders, ok.

Check brush slider interaction? Not essential but quick: set to 20 and click. Slider click coordinates: slider spans 805..895 at y=643. Click near right end (880,643) sets ~15? Then drag? The requirement just says clicking/dragging adds V; brush is extra.

Let me test keyboard Space maybe on body: click canvas? Clicking adds V. Use key action with space. The browser key action types a key. Let's test "Space" to pause. Actually key tool text expects key name like "Space" or " ". Try key " " with text? Use action key with text "Space". Might work. Not required; skip? Keyboard is bonus, but need ensure it doesn't break. I can test quickly.

Also verify reset after painting while paused shows initial seed again (already validated reset earlier with radius 6.5; radius change fine).

Potential performance issue on high-DPI: canvas CSS scales, fine.

One issue: during pointer drag when frame loop running, our paint render() occurs but the field also evolves; fine.

Another: `paintBlob` uses `((ox % N)+N)%N` with fractional cx/cy. Fine.

Check accessibility: canvas label, buttons.

Now check the readout updates while paused after painting: coverage updates every 12 frames only when running? In frame(), HUD update runs regardless of running, so while paused the requestAnimationFrame loop still runs and updates readouts. Fine.

Potential bug: FPS readout shows 60 when paused; fine.

Let's test keyboard pause/resume quickly, then final reset.

Keyboard pause works. Paused pattern holds. Now pause state; test reset while paused and compare central seed. Press R.

Reset while paused restores central seed, steps 0, coverage 0.2%. Matches initial scene. 

Now check wrap boundary quickly? Could seed near right edge via drag and watch it wrap. Not necessary; code uses modulo indexing. But a quick check for partitioning: grid wraps in both axes by construction.

One remaining concern: painter seeding while running uses render() each pointer event; fine.

Performance: 60fps.

Test brush slider max maybe? Not needed.

Should I resume at the end so the user lands on a running sim? On load, it runs. Final state currently paused with seed. Doesn't matter for artifact; but reload will be running. End with a reload to ensure final file loads with no errors and confirm console clean. Then maybe leave it running.

Also final check console errors via inspect after reload.

One more consideration: the "Coverage" metric counts v>0.12; after reset 0.2%. Fine.

Do a final reload and screenshot after ~4s to show final artifact state.

Final reload clean, central seed visible, console empty. Wait a few seconds for running evolution to confirm.

FPS dropped to 31 in this capture (sandbox load variability; earlier 53-60). Simulation still responsive. The pattern evolved from seed. 

Maybe reduce work slightly to ensure responsiveness on weaker machines: N=256, 6 steps. FPS 31 in headless environment could be due to screenshots overhead. Earlier running 58-60. Keep.

But note after reset at step 0, at 4s steps 1,728 → 6 steps × ~48fps. Fine.

Final file is done. Report checks:
- initial central seed visible, fields evolve (steps increasing, pattern grows symmetric coral)
- click seeding at separate region grows independently; drag draws line
- pause freezes steps/pattern; resume continues
- reset restores central seed (steps 0, coverage 0.2%) both paused and running
- keyboard space/r worked
- console clean

Unverified: wrap-around boundary crossing visually (implemented modulo but no explicit visual test), long-run equilibrium, brush slider extremes, mobile/touch input.