Reaction-diffusion · mimo-v2.6-flash

Let me build a single-file index.html with a Gray-Scott simulation.

Plan: Canvas 2D with ImageData, grid ~256x256, wrap boundaries, dt stable with Du=0.16, Dv=0.08, dx=1. For Gray-Scott with Du=0.16, dt=1.0 with 5-point Laplacian: stability requires Du*dt/dx² <= 0.25 for explicit... actually 2D condition is D*dt/dx² <= 0.25 for 5-point Laplacian. 0.16 < 0.25, so dt=1 is stable. Often used dt=1 with Du=0.16. Good.

Laplacian: use 9-point with weights: center -1, orthogonal 0.2, diagonal 0.05 (standard Gray-Scott). With that stencil, condition differs. Let's just use standard: lap = 0.2*(orth sum) + 0.05*(diag sum) - 1*center. Effective max eigenvalue... For stability with dt=1, Du=0.16: eigenvalue range of that stencil is [-2, 0]? For 9-point stencil with those weights, the symbol is -1 + 0.4*(cos kx + cos ky) + 0.2*cos kx cos ky... let's compute: 0.2*(4 neighbors orth) sum = 0.2*(2cos kx + 2 cos ky) = 0.4(cos kx + cos ky). 0.05*(4 diagonals) = 0.05*(2 cos kx cos ky *2)= 0.2 cos kx cos ky. Wait diagonal sum: e^{i(kx+ky)}+e^{i(kx-ky)}+e^{-i(kx+ky)}+e^{-i(kx-ky)} = 4 cos kx cos ky. So 0.05*4 = 0.2 cos kx cos ky. Symbol: -1 + 0.4(cx+cy) + 0.2 cx cy. Min at cx=cy=-1: -1 -0.8 + 0.2 = -1.6. Max at cx=cy=1: -1+0.8+0.2 = 0. So max magnitude 1.6. Stability for explicit Euler: |1 + D dt λ| <= 1 → D dt * 1.6 <= 2 → dt <= 2/(0.16*1.6) = 7.8. So dt=1 fine.

Actually classic Gray-Scott with feed=0.035, kill=0.062 gives nice patterns (that's "coral growth" / solitons-ish? 0.037/0.06 is coral). Good.

Iterations per frame: multiple steps per frame for visible evolution, e.g., 8-12 steps per frame. Grid 200x200 or 256x256. 256² * 12 steps = 786k cell updates per frame — fine in JS.

Wrapping boundaries: use index arithmetic with modulo or handle edges separately.

Seed: central radius ~ 8 cells, V=1 (or 0.5), U=0.

Colors: map V to palette — e.g., dark blue background (U=1), V high → bright. Use gradient: hue based on V, maybe multi-stop color map. Also could blend U.

Controls: Pause/Resume button, Reset button, maybe steps-per-frame slider and brush size. Keep required controls.

Pointer: mousedown/mousemove painting. Click/drag adds V=0.9, U=0.1 in radius ~3.

Verification: I should run the app in browser, check console, sample early evolution (e.g., expose window.__sim with fields for checking), seed region via pointer simulation, pause/resume, reset comparison.

I can expose a debug API: window.__gs = { u: Float32Array, v: Float32Array, step, paused, ... } for verification.

Reset compare: capture initial seed snapshot after reset vs initial scene — they should be identical (deterministic seeding). I can compute a checksum via debug API.

Let me write the file.

Layout: canvas square, controls panel above. Use device pixel scaling? Canvas at grid resolution, scaled via CSS with image-rendering: pixelated? Or draw offscreen at grid size then scale to display canvas. Simpler: create offscreen canvas at N×N, putImageData, then drawImage scaled to display canvas sized e.g. 600×600 with imageSmoothingEnabled=false... Actually smoothing enabled gives nicer look; patterns are organic so smoothing looks fine. I'll enable smoothing for upscale.

Let's write code.

```js
const N = 200; // grid
const DU=0.16, DV=0.08, F=0.035, K=0.062, DT=1.0;
let u = new Float32Array(N*N), v = ..., u2, v2;
```

Laplacian with wrap: precompute row offsets: up = (i-1+N)%N etc.

Steps per frame default 10, slider 1..30.

Color mapping: 
- t = clamp(v / 0.4 maybe). Use combination: base dark navy for U-only, gradient through teal to white/yellow for high V.

Let's do palette via 3-stop interpolation:
c0 = [10,12,30] (u=1,v=0 dark)
c1 = [20,120,140] teal at v≈0.2
c2 = [240,230,180] bright at v high (~0.45)

Actually value of V in patterns peaks around 0.3-0.4. Map t = min(v/0.4,1).

Maybe also include a subtle gradient based on U for depth. Keep simple.

Also add stats display: frame, mean V, min/max.

Now verify with browser tools: reload, screenshot, inspect console, check window.__gs fields for early evolution (mean V changes over frames), simulate pointer drag at a location (use browser click), check V increased there in following frames, pause/resume, reset and compare checksums.

Browser tool: click at coordinates. Canvas position must be known. Let's design layout: control bar top, canvas below centered. I'll compute canvas rect via inspect.

Let's write index.html.

Debug API:
```js
window.__gs = {
  N, get u(){return u}, get v(){return v},
  stepFrames(k), stats(), seedAt(x,y), checksum(), paused getter/setter, reset()
};
```
Getters in object literal work.

checksum: sum over cells of (i+1)*(u+1)*(i+3)... better: FNV-like over quantized values. Let's compute hash = Math.imul... Keep simple: sum of v[i]*100000 rounded with index weighting.

Let's write it.

Frame loop: use requestAnimationFrame; each frame run S steps (unless paused). Also measure performance.

Handle pointer: pointerdown → painting true; pointermove → if painting, paint; pointerup on window. Also touch via pointer events with preventDefault (touch-action: none).

Paint function: for cells within radius, blend: v = max(v, 0.9 * falloff)? Requirement: adds V and reduces U near pointer. I'll set v = v + (0.9 - v)*f, u = u - (0.6*u)*f where f = falloff (1 at center → 0 at edge). Simple.

Seed: central circle radius = N*0.045 ≈ 9, set v=1 (or 0.9), u=0. Actually "seed a small central region with V and reduced U": set u=0.5? Standard: u=0.5, v=0.25 inside. Common: u=1→ set u=0, v=1 within radius. With feed 0.035/kill 0.062, seed u=1... let's set inside: u = 0.2? Hmm. Typical working seed: u=0.5,v=0.25 in small square. I'll use u=0.0, v=1.0 in core — that grows into coral patterns. Actually with F=0.035,K=0.062, that's "coral growth" parameter regime? F=0.055,K=0.062 is coral/mitosis... The known map: F=0.035,K=0.065 gives "solitons"? Anyway u=0,v=1 seed works fine; it will evolve. Let's use u=0, v=1 with slight smoothing (falloff) at edges.

Hmm, potential concern: with u=0 at seed, u gets fed back from surrounding U=1 so fine.

Let me also add FPS/step stats.

I'll write the file now.

Also stats display of mean V to help verify evolution.

Write code carefully.

Performance: N=200, S=10 default → 400k cell-steps/frame. JS fine.

Let me write:

```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>
<div class="app">
  <header>...</header>
  <div class="controls">
    <button id="toggle">Pause</button>
    <button id="reset">Reset</button>
    <label>Speed <input type="range" id="speed" min="1" max="30" value="12"><span id="speedVal"></span></label>
    <label>Brush <input ... id="brush" min="1" max="12" value="4"></label>
    <div class="stats"><span id="statFrame"></span>...</div>
  </div>
  <div class="stage"><canvas id="view" width="600" height="600"></canvas></div>
  <footer hint>Click/drag on the canvas to inject V...</footer>
</div>
<script>...</script>
</body>
</html>
```

Now JS core.

```js
const N = 200;
const DU=0.16, DV=0.08, F=0.035, K=0.062, DT=1.0;
const size = N*N;
let u=new Float32Array(size), v=new Float32Array(size), uN=new Float32Array(size), vN=new Float32Array(size);

// laplacian weights: orth 0.2 diag 0.05 center -1
function step(){
  for(let y=0;y<N;y++){
    const ym=((y-1+N)%N)*N, yp=((y+1)%N)*N, y0=y*N;
    for(let x=0;x<N;x++){
      const xm=(x-1+N)%N, xp=(x+1)%N;
      const c=y0+x;
      const iu=u[c], iv=v[c];
      // laplacian u
      const lu = 0.2*(u[y0+xm]+u[y0+xp]+u[ym+x]+u[yp+x])
               + 0.05*(u[ym+xm]+u[ym+xp]+u[yp+xm]+u[yp+xp]) - iu;
      const lv = 0.2*(v[y0+xm]+v[y0+xp]+v[ym+x]+v[yp+x])
               + 0.05*(v[ym+xm]+v[ym+xp]+v[yp+xm]+v[yp+xp]) - iv;
      const uvv = iu*iv*iv;
      const fu = F*(1-iu);
      const rv = (K+F)*iv;
      uN[c] = iu + (DU*lu + uvv - fu)*DT;  // wait: du = Du*lapU - u*v^2 + F*(1-u)
      vN[c] = iv + (DV*lv - uvv + rv)*DT;
    }
  }
  swap arrays
}
```

Modulo per inner loop: x wraps — precompute xm/xp arrays for x. Let's precompute left[], right[], up offset, down offset arrays to avoid modulo in hot loop.

left[x] = (x-1+N)%N etc. And row offsets: for y: ym = ((y-1+N)%N)*N.

That's fine.

Clamp outputs to [0,1]? Values could slightly exceed; clamp to avoid palette issues: if(x<0) 0 etc. I'll clamp uN to [0,1.2]... just clamp 0..1 for display safety.

Color: build ImageData once, fill each frame.

Palette: precompute a 256-entry LUT from t = v mapping (and maybe combine u). Let's do:

t = clamp(v / 0.42, 0, 1)
Then color stops:
0.0 → rgb(8,10,26)
0.35 → rgb(16,80,110)
0.65 → rgb(50,180,170)
0.85 → rgb(235,210,120)
1.0 → rgb(255,250,240)

LUT of 256 entries: index = t*255.

Also add subtle shading using u? Not necessary.

Interaction: pointer coordinates → canvas rect → grid coords: gx = floor((e.clientX-rect.left)/rect.width*N).

Paint brush radius in grid cells (brush slider, default 4).

Pause toggling: button text Pause/Resume.

Reset: reinit fields to u=1,v=0, seed center, frame=0, and if paused remain paused? Spec: "Reset restores the initial fields and seed." Keep pause state as is (fine either way). I'll keep state.

Also "compare the restored central seed with the initial scene" — reset should be deterministic, identical to initial. My seed function is deterministic (no randomness). Good. Optionally add tiny random noise? No — keep deterministic so reset matches initial exactly. Maybe add tiny noise elsewhere? Not needed.

Actually with perfectly uniform U=1,V=0 field except seed, evolution is deterministic and symmetric — patterns will be symmetric-ish which might look artificial. Coral growth usually seeds with noise. But requirement says initial U=1, V=0, then seed central region. Could add tiny noise in the seed region only? Keep deterministic; patterns still become organic after some time due to... hmm, perfectly symmetric initial conditions with symmetric dynamics remain symmetric (with 4-fold symmetry), which still looks organic-ish (like a growing coral with 4-fold symmetry). It's acceptable but adding tiny deterministic noise would look better. I could add small pseudo-random noise across the whole field (deterministic via seeded PRNG) — that keeps reset reproducible while breaking symmetry. But requirement says "Initially fill the field with U = 1 and V = 0" — adding noise deviates slightly. I'll add tiny noise only inside the seed region (V and reduced U region), keeping the rest exactly 1/0. Hmm, spec: "then seed a small central region with V and reduced U." Noise within seed is fine and deterministic.

Actually simpler: keep exact fill; add small deterministic noise in seed: v = 1 + 0.05*noise clamped... Let's do: inside radius, u = 0.02*rand? I'll do v = clamp(1 + 0.1*(rand-0.5)), u = clamp(0.15*(rand-0.5))... Meh. Let's just make seed: u = 0.0 + 0.08*r1, v = 1.0 - 0.08*r1 roughly. Simple enough with seeded PRNG (mulberry32 with fixed seed) so reset reproduces.

Hmm, but the strict reading: "compare the restored central seed with the initial scene" — must match. Deterministic PRNG reset ensures that.

Let's write checksum function for verification.

Now write file.

Debug API:

```js
window.__gs = {
  N, DU, DV, F, K,
  get u(){return u}, get v(){return v},
  get frame(){return frame},
  get paused(){return paused},
  set paused(p){setPaused(p)},
  step(k){ for(...) runStep(); },
  meanV(){...},
  vAt(x,y){...},
  maxVIn(x0,y0,x1,y1){...},
  paint(x,y,r,strength){...},
  reset(){...},
  checksum(){...}
};
```

Verification plan in browser:
1. reload, inspect console errors, screenshot initial.
2. evaluate meanV at frame 0, run some frames (wait), check meanV changed / maxV grew — "sample early field evolution".
3. Simulate pointer click: use browser click at canvas coords over an off-center region; then evaluate maxV in that region before and after frames — should increase.
4. Pause (click button), evaluate frame stops advancing; resume, frame advances.
5. Reset, compute checksum after reset vs checksum of initial (need initial checksum captured — I can capture via evaluate right after load before stepping... but reload resets; I can evaluate checksum right after load → then do stuff → reset → checksum again and compare). Since both are deterministic, equal.

Note: browser tool "evaluate"? The browser tool actions: reload, inspect, screenshot, motion, click, drag, key, scroll, type. No arbitrary evaluate! Hmm. "inspect" likely returns DOM/console info. How do I evaluate JS? Maybe "inspect" with text param containing JS? Let's check what inspect does — probably dumps DOM and console. There might be a way: action "type"? Not eval.

I'll try action "inspect" with text as a JS expression and see. Let's first write the file, then explore.

Alternatively, I can verify logic headlessly with node: extract the JS and run simulation steps in node to check field evolution, checksums etc. That's a good approach for the numeric verification, plus browser for visual/DOM/console checks.

Let's write the file first.

Also to help verification via browser, I can have the page display stats (frame, meanV, checksum short) in DOM — then "inspect" can read them. That's a neat trick: show stats in the DOM so I can verify via inspect/textContent. I'll show frame number, mean V, and a seed checksum after reset maybe. Let's display: frame, meanV, maxV, and last pointer paint info. Then verify via screenshot/inspect.

Design UI nicely: dark theme.

Let's write it.

Also performance guard: cap steps per frame and clamp delta; using rAF fixed steps (no dt-based), good.

Grid resolution bound: N=200 fixed but allow selector? "bound grid resolution" — just choose reasonable fixed N (200). Maybe offer 128/200/256 select. Keep it simple: fixed 200 plus speed slider. I'll add a resolution select (128/192/256) maybe — adds complexity to reset/verify (buffers realloc). Could do but keep it: it's optional. I'll include it? "bound grid resolution and work per frame to keep interaction responsive" — means choose bounded values, not necessarily expose a control. I'll keep fixed N=200 and steps slider capped at 30.

Writing now.

ImageData: view canvas 600x600 CSS? Let's set view canvas width/height = 600 attribute, offscreen N×N, upscale via drawImage with smoothing.

Actually to get crisp-ish: smoothing enabled gives blur at 3x upscale for 200 grid. Fine, organic.

Layout responsive: canvas max-width 90vw etc.

Let me write the full file.

```js
// --- simulation ---
const N = 200;
const DU=0.16, DV=0.08, F=0.035, K=0.062, DT=1;
const SIZE=N*N;
let u=new Float32Array(SIZE), v=new Float32Array(SIZE);
let u2=new Float32Array(SIZE), v2=new Float32Array(SIZE);
const L=new Int32Array(N), R=new Int32Array(N), Urow=new Int32Array(N), Drow=new Int32Array(N);
for(let x=0;x<N;x++){L[x]=(x-1+N)%N;R[x]=(x+1)%N;}
for(let y=0;y<N;y++){Urow[y]=((y-1+N)%N)*N;Drow[y]=((y+1)%N)*N;}

function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return ((t^t>>>14)>>>0)/4294967296;}}

function seedField(){
  u.fill(1); v.fill(0);
  const rnd=mulberry32(1337);
  const cx=(N-1)/2, cy=(N-1)/2, rad=Math.max(6, Math.round(N*0.045));
  for(let y=0;y<N;y++)for(let x=0;x<N;x++){
    const dx=x-cx, dy=y-cy;
    if(dx*dx+dy*dy<=rad*rad){
      const i=y*N+x;
      const n=rnd();
      v[i]=1; u[i]=0;
      // slight deterministic perturbation to break symmetry
      v[i]=Math.min(1, Math.max(0, 1 - 0.15*n));
      u[i]=Math.min(1, Math.max(0, 0.12*rnd()));
    }
  }
}
```

Hmm careful: seed loop consumes rnd only inside region — deterministic order, fine.

Step function as above with clamping.

Paint function:

```js
function paint(gx,gy,rad,strength){
  const r2=rad*rad;
  for(let y=gy-rad;y<=gy+rad;y++){
    const yy=((y%N)+N)%N;
    for(let x=gx-rad;x<=gx+rad;x++){
      const xx=((x%N)+N)%N;
      const dx=x-gx, dy=y-gy, d2=dx*dx+dy*dy;
      if(d2>r2) continue;
      const f=strength*(1-Math.sqrt(d2)/rad);
      const i=yy*N+xx;
      v[i]=v[i]+(1-v[i])*f;
      u[i]=u[i]*(1-0.85*f);
    }
  }
}
```

Wrap for pointer near edges — fine.

Render: LUT.

```js
const lut=new Uint8Array(256*3);
build from stops.
```

Render loop:

```js
function render(){
  const d=img.data;
  for(let i=0,p=0;i<SIZE;i++){
    let t=v[i]*255/0.42 ... 
  }
}
```
t = clamp(v[i]/0.42,0,1); idx=(t*255)|0.

Stats: compute meanV while rendering.

Stats update: frame, meanV %, maxV, fps maybe.

Controls events.

Pointer events with pointerdown on canvas, setPointerCapture.

Now DOM stats display: `<span id="sFrame">0</span>` etc. And maybe a `#sSeed` showing checksum after reset for verification. I'll display "seed sig" — hmm, might be clutter. I'll include a small "sig" in stats which updates each render: short hash of field. That lets me verify reset equality visually: initial sig vs after reset sig. Nice.

hash function: FNV-1a over quantized v values:

```js
function sig(){
  let h=2166136261;
  for(let i=0;i<SIZE;i++){
    const q=(v[i]*4096)|0;
    h^=q&255; h=Math.imul(h,16777619);
    h^=(q>>8)&255; h=Math.imul(h,16777619);
  }
  return (h>>>0).toString(16).padStart(8,'0');
}
```

Computing per frame over 40k cells: fine but do every ~10 frames or when paused. Do it in render? 40k iterations extra per frame, cheap. OK do it every frame? It's ~40k*2 imuls — negligible.

Actually meanV & maxV computed in render loop anyway.

Write it all now.

Let me write the file.

Let me build the app. Single file index.html. Use Canvas 2D with ImageData for rendering, grid e.g. 256x256, multiple steps per frame (e.g. 8-12). Wrapping boundaries via modular indexing.

Let me write it.