Fluid simulation · ling-3.1-flash

I need build interactive 2D fluid dye simulation full screen canvas. Need write index.html, run browser verify. Need design robust stable fluid solver bounded resolution. We have 15 minutes. Need produce code. Need think method.

Use semi-Lagrangian stable fluid (Stam) on grid perhaps 180x120 or dynamic based viewport capped. Fields velocity u,v, dye maybe RGB. Diffusion maybe 0, viscosity low, vorticity confinement for persistent swirl. Advect dye. Add dye/momentum on drag. Canvas 2D render by creating ImageData at sim resolution and drawImage scaled. Could use offscreen canvas. Need external no assets.

Requirements:
- Maintain velocity and colored dye field.
- advect dye through moving fluid persistent swirling, not particles.
- Drag inject dye and momentum direction; remains after release and dissipates.
- initial scene with small amount colored dye and motion.
- color selector, Pause/Resume, Clear. Clear removes dye resets velocity; next drag works.
- Bound resolution/work frame. 1200x800 viewport.
- UI accessible.

Could implement grid resolution based on canvas CSS maybe 192x128 or 240x160. At 1200x800, aspect ratio 3:2. Choose sim width around 200 maybe height round(200*800/1200)=133. Bounded max 240 width, max 160 height. Stable fluid operations each frame ~ 8 passes over 32k cells, fine.

Stable fluid:
- N grid? Use width,height and arrays. Boundary handling maybe all Neumann (free slip), no walls distinction. We can use index x+y*w.
- advect field: for each cell, backtrace x-dt*vel (cell coords), bilinear sample. Since velocity in cells per second perhaps dt. Use dt = min(1/30 real, maybe 0.016) times speedScale? Use velocity units maybe pixels? If use grid coordinates per second, drag add velocities around 10 cells/s; CFL manageable with semi-Lagrangian. Dye diffuse perhaps 0.02 or none. Vorticity:
compute curl = (v[i+1]-v[i-1] - (u[i+1]-u[i-1])) /2? Then force:
u += dt * epsilon * (dx? Standard:
curl = dvdx - dudy
vorticity x = abs(dv/dy?) Standard from GPU gems:
vorticity = (dv/dx - du/dy)
force x = epsilon * (d|curl|/dy) * dt
force y = -epsilon * (d|curl|/dx) * dt.
Need signs. Compute omega = dvdx - dudy; dωdx, dωdy; u += dt*eps*(dωdy); v -= dt*eps*(dωdx). Good.

Projection:
- compute divergence; solve Poisson via Gauss-Seidel 20-30 iterations; subtract gradient. Bound resolution. Boundary all zero gradient? We can use Neumann: when sampling neighbors out of bounds clamp. For pressure solve, interior only; edges copy neighbor pressure or keep. Need no flow through boundaries? Could treat out-of-bounds velocity zero in diffusion/projection. Simpler free/open: clamp neighbor, pressure boundary = interior neighbor, divergence includes. Might yield some edge artifacts. Better solid boundaries with u/v zero at boundaries? Grid includes cells and boundary velocities. Common Stam grid with N+2 and boundary. We can create width+2/height+2 arrays and boundary indices. Simpler maybe use w,h interior plus arrays padded. But rendering and indexing more code. We can use w,h and handle boundaries by clamping / zero. Stable.

Projection with Neumann:
div[i] = 0.5*((u[right]-u[left]) + (v[down]-v[up]))
At edges use available neighbor with zero outside: left/outside u=0, so div = 0.5*(u_right-u_i) etc.
Solve p:
p[i] = (div[i] + p_left+p_right+p_up+p_down)/4 with out-of-bounds p=0? This corresponds Dirichlet p=0 boundaries maybe no-through? Then subtract grad with outside p=p_i? Common. Let's reason.

For incompressible with no-through boundaries, normal velocity at boundary zero; pressure Neumann. Discrete:
div[i] = 0.5*(u[i+1]-u[i-1]+v[j+1]-v[j-1]), with outside u/v = 0.
Poisson solve with p outside = p inside (Neumann). For edge, equation p=(div + sum neighbors including duplicate inside)/4? If outside p=p_i, 4p=div+ p_i + ... => 3p=div+... maybe. Easier use padded arrays and boundary p? Could implement common with ghost velocities.

Alternative use Jos Stam code with grid size N+2 and boundary function. But adapt aspect rectangular. Padded arrays W=w+2,H=h+2. Sim cells include boundaries? Dye render interior only. Index IX(i,j)=(i)+(W)*(j), i=0..W-1. Interior i=1..w, j=1..h. Boundary around. Velocity arrays padded. Boundary conditions:
- u horizontal: left/right boundary (i=0 or i=w+1) = -u neighbor? For no-through. top/bottom boundary (j=0/h+1) = u neighbor (free slip)
- v vertical: top/bottom = -v neighbor; left/right = v neighbor.
Dye boundary: copy neighbor (Neumann), though dye at boundary.
Pressure/velocity solve includes interior; set boundaries each iteration maybe.

Projection:
for interior:
div = -0.5*(u[i+1]-u[i-1]+v[j+1]-v[j-1]) perhaps sign depending.
p=0.
iterate 30:
for interior:
p[i] = (div[i] + p[left]+p[right]+p[up]+p[down])/4
set boundary p (copy).
then:
u[i] -= 0.5*(p[right]-p[left])
v[i] -= 0.5*(p[down]-p[up])
set velocity boundaries.
This standard.

Diffusion:
Could implement viscosity via implicit Gauss-Seidel:
for interior x[i] = (x0[i]+a*sum neighbors)/(1+4a), boundaries set. For velocity, viscosity maybe 0.000? To maintain swirl, viscosity low 0.000001 or 0.0. Dye diffusion maybe 0.000? Could skip velocity diffusion for performance and less blur; use vorticity. Requirements approximate. Need dissipate gradually. Dye decay each frame e.g. dye *= 0.995 (per frame) or 0.996; velocity *= 0.995? If both fade. Momentum gradually dissipate. Could use velocity decay 0.996 and dye 0.994. At 60fps, ~0.78 after 10 sec for velocity? 0.996^600=0.09, good. Dye 0.994^600=0.026. Maybe dye stays ~15 sec. Use dt-scaled damping: Math.exp(-dt*0.25) for velocity (0.96/sec), dye exp(-dt*0.18) (0.982/sec) maybe 27 sec half. Requirement gradually dissipate. Could use dye 0.25/sec, velocity 0.35/sec. Visible.

Advection:
Semi-Lagrangian with RK2? Simple. dt from rAF clamped to 0.033, maybe simulation speed. Position in cell coordinates. For interior, back = center - dt*vel (velocity cells/sec). Bilinear sample from padded arrays with clamp to interior boundaries. For dye RGB arrays. Could advect velocity and dye. We need preserve dye. Use arrays.

Rendering:
offscreen canvas width w, height h, ctx.createImageData(w,h), putImageData then main ctx.imageSmoothingEnabled = true, drawImage(off,0,0,canvas.width,canvas.height). Main canvas full viewport with devicePixelRatio maybe cap DPR at 1.5 or 1. To bound work, set canvas.width = innerWidth * dpr capped? Requirement 1200x800. Full screen. Could use CSS full and canvas actual min(innerWidth*dpr, 1600) etc. Rendering 1200*800 = 960k, fine. DPR maybe min(devicePixelRatio,1.5), at typical 1. 2400*1800 if DPR 2, still okay but bound to maybe 1.5. Use DPR min(1.5). UI overlay.

Dye colors: color selector with preset swatches (cyan, magenta, yellow, orange, green, white?) Use HTML input type=color plus maybe buttons. Required color selector; input type=color is enough. Add palette buttons for usability. When drag inject dye, use selected RGB. Add dye with radius around pointer, perhaps brush radius 8 cells. Need avoid hard edges; Gaussian/linear falloff. Add momentum in drag direction based on pointer delta. Add dye amount. Use pressure? On pointermove, dx=(x-lastX)/cssWidth * w, dy; velocity add = dx * forceScale maybe 3? If pointer moves 100 px/frame at 1200 width => 20 cells/frame ~ 1200 cells/sec, too high. Clamp delta to e.g. 6 cells/frame. Add velocity = delta * 8? Let's derive. If dx in cells per frame, velocity cells/sec = dx/dt. To inject momentum in drag direction, u += dx * 12 (cells/sec). For 10 cell movement/frame, 120 cells/sec, reasonable. Clamp dx to 8 cells. Add dye amount maybe 0.5 with radius.

Need line interpolation between last and current pointer so fast drag injects continuous. Steps based on distance in sim cells, max maybe 3-4 cells, add at each. For each event, compute sim coords. pointer events. Also pointerdown inject. Use pointer capture. Support touch. Prevent default. Cursor.

Initial scene: after init, spawn e.g. 3 blobs:
- central cyan/selected? Use multiple colors maybe requirements colored dye and motion. Could seed with 2-3 colored dye patches and swirl velocity. Use helper addDye at fractions with colors and add velocity circular. Could initialize random velocity? Better visible on load:
  - addDye(0.35,0.55, radius 12, color from palette [magenta/cyan])
  - addDye(0.65,0.45,...)
  - add circular velocity around center: for cells within radius 25, u = -(y-cy)*strength, v=(x-cx)*strength, strength ~ 1.5 cells/sec per cell? At radius 20, speed 30 cells/sec. Good.
  - maybe dye diffusion will swirl.
Need if user clears, seed not automatic until drag. "Clear removes dye and resets velocity; the next drag can start a new flow." Do not reseed after clear.

Pause/Resume: button toggles paused. On pause, still render maybe no sim update. Could show paused state. Keyboard space maybe. Clear button resets fields and render black. Color selector input. Also maybe brush size slider optional. Not required but can include. Keep UI simple and responsive. Could include speed slider? Not required. Avoid extra.

Numerical details:
Grid sizing:
function resize():
 cssW=innerWidth, cssH=innerHeight; dpr=Math.min(devicePixelRatio||1,1.5); canvas.width=round(cssW*dpr), etc; canvas.style width/height.
 simW = clamp(round(cssW/6), 96, 220?) At 1200 ->200, simH=round(cssH/6)=133. Max 220x? Need bound work ~ 29k. Could use scale 6. At small windows, min 80. If viewport 1200x800, 200x133. Good. On resize, need preserve fields? Could reallocate and lose. Better handle resize by reallocate and maybe resample? Not necessary but robust. Full-screen resizing rare. Could preserve via nearest sampling old fields. But code complexity manageable. On resize, create new arrays and copy sample. Need initial seed after first. Could implement resetFields then if not first resample. But no need maybe. Yet browser resize during verification maybe. Simpler reallocate and seed? That would unexpectedly seed. Better preserve.

Data arrays:
let W=w+2,H=h+2,size=W*H.
u,v,u0,v0, dyeR,dyeG,dyeB, dyeR0... pressure, div.
All Float32Array.
Could combine dye array length size*3 for easier advect? Use separate.
On resize preserve:
for interior new i,j, sample old sim coords scaled. Use bilinear maybe nearest. Simpler for each new interior, sx=(i-0.5)/w*oldW etc clamp and nearest. Then copy. Need old dimensions. Could implement.

Boundary functions:
function setVelocityBoundaries() {
 for j=0..H-1:
   u[IX(0,j)] = -u[IX(1,j)]; u[IX(w+1,j)] = -u[IX(w,j)];
   v[IX(0,j)] = v[IX(1,j)]; v[IX(w+1,j)] = v[IX(w,j)];
 for i:
   u[IX(i,0)] = u[IX(i,1)]; u[IX(i,h+1)] = u[IX(i,h)];
   v[IX(i,0)] = -v[IX(i,1)]; v[IX(i,h+1)] = -v[IX(i,h)];
}
Corners maybe set average or 0. Not critical.
Dye boundary copy:
for j all i? for i=0..W-1 dye[IX(i,0)] = dye[IX(i,1)], etc; for j... Could do.
But advect sampling clamps coordinates to [1,w] maybe avoids boundary. Dye boundary not really needed. Still set.

Advect:
function advectField(dst,src,velU,velV,dt,dissipation?) {
 for j=1..h:
  row...
  for i=1..w:
    let x=i - dt*u[idx]; let y=j - dt*v[idx];
    clamp x to [0.5? w+0.5?]. For padded grid, sample with clamp to [1, w] maybe. If x < 1 x=1; >w x=w. Bilinear:
    i0=floor(x), j0=floor(y), i1=i0+1, j1=j0+1 clamp to w? If x=w, i0=w, i1=w. Use clamp.
    s1=x-i0,t1=y-j0.
    dst[idx]= ((1-s)*(1-t)*src[a]+...).
 }
}
Need advect velocity using current u/v into u0 then copy. Could use separate u0/v0. For dye, three arrays. Could optimize combined. Fine.
Potential issue self-advection and boundary: semi-Lagrangian with no-through boundaries and clamping causes dye accumulate at walls; okay.
Could use RK2 for better swirl:
start at center; sample velocity at center; back1 = center - 0.5*dt*vel; sample at back1; back = center - dt*velAtBack. This doubles samples but still fine. Simple Euler enough.

Projection:
function project() {
 for interior:
  div[idx] = -0.5*(u[right]-u[left]+v[down]-v[up]);
  p[idx]=0;
 setVelocityBoundaries before? Yes.
 for iter=0; iter<24; iter++:
   for interior p = (div + pL+pR+pU+pD)*0.25;
   setPressureBoundaries? p copy at boundaries each iteration.
 setVelocityBoundaries initially.
 for interior:
  u -= 0.5*(pR-pL); v -= ...
 setVelocityBoundaries.
}
Pressure boundaries copy:
for j p[0]=p[1], p[w+1]=p[w]; for i p top=...
Could set after each iteration. 24*32k=768k operations, fine. Work per frame maybe ~2M, okay.

Vorticity:
Need compute curl array perhaps reuse div? Use curl Float32Array.
for interior:
 curl[idx] = 0.5*(v[right]-v[left] - (u[down]-u[up])); Actually dvdx - dudy.
Then for interior:
 dwdx=0.5*(curl[right]-curl[left]); dwdy=0.5*(curl[down]-curl[up]);
 u += dt*vorticity*dwdy;
 v -= dt*vorticity*dwdx;
Set boundaries.
Vorticity coefficient maybe 2.5. With dt 0.016 and curl magnitude maybe speed/radius, force. Good.
Could skip velocity diffusion. Use viscosity slider? Not needed. "Approximate fluid behavior acceptable." Use viscosity maybe 0.00001 implicit would add cost; skip and call it inviscid-ish with numerical damping.

Dye dissipation and velocity damping:
const velocityDamping = Math.exp(-dt*0.45); // 0.55/sec? exp(-.45)=.64 per sec, too fast? after 3 sec .2. Fine. Use 0.35.
const dyeDamping = Math.exp(-dt*0.16); // half-life 4.3 sec? ln2/.16=4.3 sec, maybe dye fades too quickly but persistent enough. Use 0.08 half-life 8.6 sec. Requirement gradually dissipate. Maybe 0.12. At 10 sec 30%. Good.
Dye values can exceed 1 when injecting; render clamp. If decay multiplicative, high injection persists. Use dye *= exp(-dt*0.18).
Velocity *= exp(-dt*0.35).
Could also dye diffusion to spread: implement diffuse dye with a=dt*diffuseRate maybe 0.01 and few iterations? Not necessary; advection plus injection radius. Swirl visible.
Maybe use dye advection only; stable.

Injection:
Pointer coordinates to sim:
rect = canvas.getBoundingClientRect(); x=(clientX-rect.left)/rect.width; simX = x*w + 0.5? Grid cell centers. Interior cells i=1..w correspond to positions i maybe. Use continuous coordinate = x*w + 1? If x=0 ->1, x=1 ->w+1. Clamp [1,w]. Good.
lastX etc.
On move:
dx = simX-lastX (cells), dy.
distance = hypot.
If distance > 0:
 steps = ceil(distance/2) maybe max 40; for each interpolate.
 At point, addDye and momentum.
 momentumScale = 14? If dx per step 2 cells, u += dx*14 =28 cells/sec. For a 100 cell drag total, each step adds 28, advects. Good.
 clamp per-step dx to maybe 4 cells; steps ensures 2.
 Add velocity with radial falloff:
 for dy2=-r..r, dx2... if dist2<=r2:
   falloff=(1-d/r)^2
   idx
   u[idx] += vx*falloff*amount; v...
 where vx = stepDX * momentumScale. But if applying at multiple steps, cumulative can be high. steps distance/2, each adds 2*14=28; total along line overlapping, maybe 5x => 140 cells/sec. Good.
 Dye add:
 amount maybe 0.55*falloff; dye += color*amount. If rapid movement many steps, saturates.
 radius brush maybe 6 cells (slider 3-14). At sim 200, ~30 px brush. Good.
 Could add dye in elongated line via steps.
 Need avoid NaN.
Pointer down: addDye at point, momentum maybe small random or zero. Requirement dragging injects; down can seed dye.
Use active pointer only, pointerId.

Color:
selected color input value #22d3ee. Palette buttons with data-color. Update input and CSS. Use hexToRgb.
Maybe color selector includes input and swatches. UI at top-left. Buttons. On mobile, touch-action none on canvas.
UI CSS:
html,body margin 0 overflow hidden background #020617; canvas position fixed inset 0 display block.
.panel position fixed top 16 left 16 z-index 10 display flex gap 10px align-items center padding 10px 12px background rgba(2,6,23,.62); border:1px solid rgba(148,163,184,.25); border-radius 14px; backdrop-filter blur(8px); color #e2e8f0; font... user-select none.
button ... input color width 34 height 34 border none background none padding 0; swatch buttons 24px circles.
Maybe panel responsive.
Status text "Drag to stir" and paused indicator.
No external resources.

Pause:
let paused=false; function togglePause() { paused=!paused; pauseBtn.textContent=paused?'Resume':'Pause'; status...}
rAF loop:
let last=performance.now();
function frame(now){
 requestAnimationFrame(frame);
 let dt=(now-last)/1000; last=now;
 dt=Math.min(dt,1/30); // If tab slow, max 33ms. At 120Hz, dt ~0.0083. Physics stable but damping per frame lower; okay.
 if (!paused) step(dt);
 render();
}
At 120Hz, fluid moves half per frame but same per time. Good.
Maybe use fixed timestep accumulation to keep consistent and bound work per frame. Requirement bound work per frame. Variable dt with clamp is okay. At 120Hz more render but sim less. Could use fixed dt=1/60 and accumulate, max 2 steps per frame. This bounds work. Better:
let acc=0; last=now;
frame: dtReal=min((now-last)/1000,0.1); acc += dtReal; let steps=0; while(acc>=DT && steps<2){ if !paused step(DT); acc-=DT; steps++; }
if steps==2 acc=0 (drop).
DT=1/60. At 120Hz, one step every other frame. At 60Hz one. At 30Hz two. Work bounded. Render every frame. Pause: should we still update last and not accumulate? If paused, acc=0. Good.
Could maybe simulation at 60Hz fixed. Fine.
If high refresh 120, controls responsive.
Step:
advect velocity, project, vorticity, advect dye, damp. Order:
1. add forces already before step.
2. vorticity maybe before advection.
3. advect velocity using current velocity, project.
4. advect dye using new velocity.
5. damp.
Common:
vorticityConfinement(dt)
advectVelocity(dt)
project()
advectDye(dt)
damp.
Maybe project after advection. Good.
Velocity boundary after advect? advect interior only, boundaries remain old; set boundaries after copy.
Dye boundary after advect.
Need ensure dye at boundaries maybe.
Render:
imageData data. For interior j=1..h,i=1..w, output index ((j-1)*w+(i-1))*4. dye values maybe >1. Use Math.min(255, d*255). Background near black. Could add slight velocity visualization? Not required; dye only. Maybe render dark blue background and dye. Use black.
Potential issue dye color values and additive. Dye field stores RGB; render. Good.
Could use ImageData on offscreen and putImageData each frame. Main canvas drawImage. Need offscreen created on resize.
Canvas context alpha false? `getContext('2d', {alpha:false})`. ImageData with opaque.
DPR scaling: main canvas width = cssW*dpr; drawImage offscreen to canvas.width,canvas.height. Good.
CSS width 100vw/height 100vh.

Initial seeding:
function seedScene() {
 clearFields(false?) no;
 addDyeBlob(0.32*w+1? use continuous coords, ...)
}
Use addDyeAt(simX,simY,radius, rgb, strength=0.8).
Colors: use [{255,80,160},{60,200,255},{255,210,80}] maybe.
Swirl:
cx=w*0.5+1? continuous. cy.
R=Math.min(w,h)*0.28.
for j interior, i interior:
 dx=i-cx, dy=j-cy; d=hypot; if d<R:
   f=(1-d/R); f*=f;
   u[idx] += (-dy/R)*38*f; v += (dx/R)*38*f;
This creates rotational flow speed up to 38 cells/sec. Dye blobs near center. Good.
Maybe add second opposite swirl? One is enough. Initial dye small amount: 3 blobs radius 8-12. "small amount". Good.
Need initial render before first frame? rAF will.

Resize preservation:
Implement `allocate(w,h)` creates arrays. On resize:
if simW same maybe just canvas.
else:
 const old = {u,...}; But copying all arrays references and then allocate. Could sample dye and velocity.
Simpler:
function resizeCanvas() {
 const oldW=simW, oldH=simH, old=...;
 compute new; allocate;
 if (old) { for new interior: sample old fields at continuous positions using nearest; }
 else seedScene();
 create offscreen.
}
Need if old arrays exist. Use function sampleField(old, ow,oh, x01,y01) where old W=ow+2. For new i,j, oldX=(i-0.5)/w*ow+1? Let's derive continuous coordinate in old. New interior center i corresponds to sim fraction (i-0.5)/w? If i=1 center at 0.5/w? Actually continuous coordinate i, interior range 1..w. Fraction (i-1)/(w-1) maybe. Use fx=(i-1)/(w-1), oldX=1+fx*(ow-1). Nearest clamp. Good.
Copy pressure not needed, zero.
After allocate, set boundaries.
Canvas resize on window resize with debounce? Could immediate. Offscreen recreated.
Initial `resizeCanvas()` then seedScene if first. Need UI loaded.

Potential issue `input[type=color]` styling. Fine.
Accessibility: buttons labels.
Could add keyboard: Space toggles, c clear. Not required but nice. Ensure not when typing (color input? keydown space might trigger). Could add.

Testing with browser tools. Need write file then browser open? The browser tool likely automatically loads current index? We need use browser action maybe screenshot. The instructions say run application in browser and inspect. Tool action likely opens file? We can call browser screenshot after write. Need maybe no URL parameter; harness knows. We'll see.

Need code quality. Let's draft index.html.

Detailed code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Fluid & Dye Playground</title>
<style>...
</style>
</head>
<body>
<canvas id="fluid"></canvas>
<div class="panel" role="region" aria-label="Simulation controls">
 <div class="control-group">
  <label for="color">Dye</label>
  <input id="color" type="color" value="#38e1ff" aria-label="Dye color">
  <div class="swatches" aria-label="Color presets">
   buttons...
  </div>
 </div>
 <button id="pauseBtn">Pause</button>
 <button id="clearBtn">Clear</button>
 <div id="status" class="status">Drag to stir</div>
</div>
<script>
(() => {
'use strict';
const canvas=...
const ctx=...
const off=document.createElement('canvas'); const offCtx=...
let simW=0,... arrays...
const DT=1/60;
let acc=0,last=performance.now(),paused=false;
let selectedColor=[56,225,255];
...
function IX(i,j){return i+W*j;}
function allocate...
Arrays: u,v,u0,v0,dye, dye0? Could use dye as Float32Array(size*3), dye0. Easier injection and advect combined.
let dye = new Float32Array(size*3), dye0...
render imageData.
`allocate`:
u=new Float32Array(size); ... p, div, curl.
dye=new Float32Array(size*3); dye0=...
imageData = offCtx.createImageData? after off dimensions.
Need off.width=simW etc before createImageData. In resize:
off.width=simW; off.height=simH; imageData=offCtx.createImageData(simW,simH);
But allocate before off. Fine.

`clearFields`:
u.fill(0); v.fill(0); dye.fill(0); maybe p/div/curl fill.
`copyBoundaries` not needed for clear.

`setVelocityBoundaries`:
for (let j=0;j<H;j++) { ... }
for (let i=0;i<W;i++) { ... }
Corners: u[IX(0,0)] etc maybe set 0? Could set:
u[0]=0; u[W-1]=0; u[IX(0,H-1)]=0; ... v similarly. But boundary functions enough.
For no-through: left/right u = -u neighbor; top/bottom v = -v neighbor; tangential copy.
Corners not critical.

`setDyeBoundaries`:
for (let i=0;i<W;i++) { copy top/bottom for c=0..2}
for (let j=0;j<H;j++) { copy left/right}
Corners duplicated okay.

`advect(dst,src,dt)` uses global u,v. For dye and velocity separate.
```
function advect(dst, src, dt) {
 for (let j=1;j<=h;j++) {
  const yBase=...
  for (let i=1;i<=w;i++) {
   const idx=IX(i,j);
   let x=i - dt*u[idx];
   let y=j - dt*v[idx];
   if (x<1) x=1; else if (x>w) x=w;
   ...
   const i0=Math.floor(x), j0=...
   const i1=i0>=w?w:i0+1; ...
   const sx=x-i0, sy=y-j0;
   for c? If velocity separate c 1, dye c 3. Use generic with components parameter.
```
Could write `advectField(dst,src,components,dt)` with inner c loop. For velocity components=1, dye=3. But src/dst layouts differ. For velocity src=u and dst=u0; okay.
```
for (let c=0;c<components;c++) {
 const a=src[idx-c? no]
}
```
For velocity, idx same and c=0 only. For dye, idx*3+c. Need compute base.
```
const s0=idx*components;
...
dst[s0+c] = ...
```
Samples src[a0+c] where a0=IX(i0,j0)*components. Good.
Then after advect velocity, copy u0 to u for interior and boundaries. Could `copyInterior(u,u0)`.
Dye similarly.
Need boundary values after copy: setVelocityBoundaries/setDyeBoundaries.

Potential issue advecting velocity with u/v current, then copy. Good.

`vorticityConfinement(dt)`:
compute curl interior.
Then update u/v. Need use old curl all computed first. Fine.
Coefficient maybe 3.0.
```
const eps=3.0;
for ... {
 const dwdx=0.5*(curl[right]-curl[left]);
 ...
 u[idx] += dt*eps*dwdy;
 v[idx] -= dt*eps*dwdx;
}
```
Check sign for swirl persistence. Standard GPU Gems:
vorticity = dv/dx - du/dy
force.x = epsilon * (d|vorticity|/dy)
force.y = -epsilon * (d|vorticity|/dx)
Yes.

`project`:
First setVelocityBoundaries? Before divergence yes.
```
for interior {
 div[idx] = -0.5*(u[R]-u[L]+v[D]-v[U]);
 p[idx]=0;
}
setPressureBoundaries();
for iter...
 for interior p=(div+...)*.25;
 setPressureBoundaries();
for interior {
 u -= .5*(pR-pL); v -= .5*(pD-pU);
}
setVelocityBoundaries();
```
Pressure boundaries copy. Need pressure boundary at corners maybe.
This is standard. Note sign of divergence and subtract gradient. If div defined negative, okay.

`step(dt)`:
```
vorticityConfinement(dt);
advectField(u0,u,1,dt); copy; setVel;
project();
advectField(dye0,dye,3,dt); copy; setDye;
const vd=Math.exp(-dt*0.42), dd=Math.exp(-dt*0.14);
for interior maybe all size:
 u[idx]*=vd; v[idx]*=vd;
 for c dye[idx*3+c]*=dd;
setVelocityBoundaries(); setDyeBoundaries();
```
Damping all including boundaries then reset.
Could damp before projection? after fine.
Velocity damping 0.42/s means after 5 sec 12%. Dye 0.14/s after 10 sec 25%. Good.
Maybe dye advection after projection uses projected velocity. Good.

Injection functions:
```
function hexToRgb(hex) {...}
function addDye(x,y,radius,rgb,amount) {
 const x0=Math.max(1,Math.floor(x-radius)), x1=Math.min(w,Math.ceil(x+radius));
 ...
 const dx=i-x, dy=j-y; const d=Math.hypot;
 if(d<radius) {
  const fall=Math.pow(1-d/radius,2);
  const idx=IX(i,j)*3;
  dye[idx]+=rgb[0]*amount*fall; ...
 }
}
function addMomentum(x,y,radius,vx,vy,amount) { ... u[idx]+=vx*fall*amount; }
```
Maybe velocity injection should be normalized direction * speed rather than dx*scale. If user drags slowly, dx small but momentum small. That's natural. Use `vx = stepDX * 16`; with step distance <=2. If pointer stationary but pressed, no momentum. Good.
`injectAt(x,y,dx,dy)`:
```
const radius=brushSize;
const dist=Math.hypot(dx,dy);
const steps=Math.max(1,Math.ceil(dist/2));
for s=1..steps:
 t=s/steps; px=lastX+(x-lastX)*t...
 sdx=(dx/steps)*16; // velocity cells/sec
 addDye(px,py,radius,selectedColor,0.38);
 addMomentum(..., sdx,sdy,1);
```
If dist=10, steps=5, each sdx=2*16=32. Overlap. Good.
But total dye amount 5*0.38=1.9 at center, bright. Fine.
Clamp dx per event? Steps handle. If pointer teleport huge (e.g. 500 cells), steps 250, work per frame maybe high. Bound work: max steps 40. If distance > 80 cells, only inject first 80 cells? Could still. `const steps=Math.min(40,Math.max(1,Math.ceil(dist/2)))`; then per-step dx=dist/steps could be large if distance>80, velocity huge. Better clamp segment length:
```
const maxSteps=40;
const steps=Math.min(maxSteps, Math.ceil(dist/2));
const segX=dist>maxSteps*2 ? dx/maxSteps : dx/steps;
```
Actually if dist>80, steps=40, seg=dist/40 >2, clamp velocity `clamp(segX,-5,5)` and maybe radius. Work bounded. Dye along full line still. Good.
```
let segX=dx/steps, segY=dy/steps;
const segLen=hypot; if(segLen>5){scale}
const vx=segX*16...
```
If dist 200, steps 40, seg 5, vx80, okay.
Dye amount maybe 0.32.
`pointerdown`: set last coords, dragging=true, canvas.setPointerCapture, inject with dx=dy=0 (dye only), maybe add small momentum from slight movement? no.
`pointermove`: if not dragging return; compute; if dist>0.05 inject; update last after.
`pointerup/cancel`: dragging=false.
Need prevent context menu maybe.
`canvas.style.touchAction='none'` in CSS.

Color presets:
HTML:
```
<button class="swatch" data-color="#38e1ff" style="--c:#38e1ff" aria-label="Cyan dye"></button>
...
```
CSS `.swatch{width:22px;height:22px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.35);}`
JS querySelectorAll('.swatch').forEach(btn=>btn.addEventListener('click',()=>setColor(btn.dataset.color)));
`setColor(hex)`: colorInput.value=hex; selectedColor=hexToRgb; update aria-pressed maybe.
Color input event.
Status update:
`function setStatus(text){statusEl.textContent=text;}`
On pause: "Paused — drag won't stir until Resume" but dragging while paused? Should injection still work? Pause should stop simulation; pointer events could inject but not step. Maybe disallow or allow queued? Better when paused, don't inject? Requirement Pause/Resume. Could still allow drag but no motion until resume. Simpler if paused, pointermove returns? Then user can't pre-inject. Fine. Status "Paused".
On clear: clearFields, setStatus("Cleared — drag to start a new flow"), paused remains.
On drag: status maybe "Stirring…"; after release "Flow continues — drag again to stir". But status update on release. Could use timeout? Simple.
Need not overcomplicate.

Clear:
```
function clearAll(){ clearFields(); setStatus('Cleared — drag to start a new flow'); }
```
`clearFields` also p/div/curl. Render black.
Pause button text.

Keyboard:
```
window.addEventListener('keydown', e=>{
 if (e.target.tagName==='INPUT' && e.target.type==='color') return;
 if (e.code==='Space'){e.preventDefault();togglePause();}
 else if (e.key==='c'||e.key==='C') clearAll();
});
```

Resize:
```
function resizeCanvas() {
 const oldW=simW,... old arrays maybe;
 const cssW=window.innerWidth,...;
 const dpr=Math.min(window.devicePixelRatio||1,1.5);
 canvas.width=Math.max(1,Math.round(cssW*dpr)); ...
 const targetW=Math.round(cssW/6);
 const newW=Math.min(220,Math.max(96,targetW));
 const newH=Math.min(150,Math.max(72,Math.round(newW*cssH/cssW)));
```
Need preserve aspect. At 1200x800 newW=200,newH=133. Max 220; if cssW 3000 target500 ->220, height maybe round(220*800/3000)=59 -> min72, aspect distorted. Better compute scale = Math.min(cssW/220, cssH/150?) Let's derive cell size ~6 px. Want w=cssW/6 capped 220, h=cssH/6 capped 150. At ultrawide, caps independently could distort. Better:
```
let newW=cssW/6, newH=cssH/6;
const scale=Math.min(1,220/newW,150/newH);
newW=Math.max(96,Math.floor(newW*scale)); newH=Math.max(72,Math.floor(newH*scale));
```
At 1200x800 scale1, 200x133. At 3000x800: newW500,newH133; scale min(1,.44,1)=.44 =>220x58 then max72 => distortion. Could instead cap work with max area and aspect. Simpler for typical. Requirement 1200x800. Fine. Maybe max width 240, max height 160. Work 38k. Good.
Use `const targetCell=6; newW=round(cssW/targetCell); newH=round(cssH/targetCell); const maxW=220,maxH=150; if newW>maxW or newH>maxH { const scale=Math.min(maxW/newW,maxH/newH); ... }` then min. At 3000x800 scale .44 => h58 max72, still. Could set maxH=150 and min 56. Distortion at extreme. Not important.
At 1200x800 exact.
If old arrays, resample. Need store old arrays before allocate. Since `allocate` overwrites globals, save refs:
```
const old={W,H,u:u,...};
```
But if first, null.
Then allocate new. If old, loop.
Sampling:
```
function sample(oldArr, components, ox,oy,c) {
 const fx=...; let x=1+fx*(old.W-2?)...
}
```
Let's define continuous interior coordinate range 1..oldW (since i=1..oldW). `fx=(i-1)/(newW-1)` if newW>1; oldX=1+fx*(oldW-1). Round and clamp 1..oldW. Then copy.
For dye, idx=IX(x,y)*3+c.
Pressure zero.
After copy set boundaries.
If no old, seedScene().
But on first resize, `off.width` set and imageData. Need `allocate` uses simW. Then `seedScene`.
On subsequent, no seed.
Window resize event call resizeCanvas. Could use `visualViewport`? innerWidth fine.

Offscreen:
```
off.width=simW; off.height=simH;
imageData=offCtx.createImageData(simW,simH);
```
`offCtx` will be reset when width set, fine.

Render:
```
function render() {
 const data=imageData.data;
 let p=0;
 for (let j=1;j<=simH;j++) {
  for (let i=1;i<=simW;i++) {
   const idx=IX(i,j)*3;
   data[p++]=dye[idx]>255?255:dye[idx]*255? 
```
Dye stores 0.. maybe >1. So `const r=dye[idx]*255; data[p++]=r>255?255:r;`
Background maybe dark. If dye=0, black. Could add background color 4,6,12? Requirement full screen. We can render dark navy by adding base:
```
data[p++]=4 + r...
```
But dye black on dark. Use background #030712: base 5,7,18. However if dye decays to zero, dark. Good.
`data[p+3]=255`.
Then `offCtx.putImageData(imageData,0,0);`
`ctx.imageSmoothingEnabled=true; ctx.imageSmoothingQuality='high'; ctx.drawImage(off,0,0,canvas.width,canvas.height);`
Could use `ctx.drawImage(off,0,0,off.width,off.height,0,0,canvas.width,canvas.height);` same.
At 1200x800, smoothing.

Potential issue imageData not initialized if resize. Fine.

Testing:
Need use browser tool. After writing, call browser screenshot. Then maybe use drag action coordinates. Browser tool `drag` likely accepts x,y,toX,toY. Need test. We can use screenshot before and after. Need inspect console maybe browser action inspect. Tool schema actions include inspect, screenshot, click, drag, key, type, scroll, motion, reload. We can call `browser` with action screenshot. Then drag from (300,400) to (700,500), screenshot. Maybe inspect DOM/console. Then drag another direction. Clear click, drag. Need verify visually. We have time.

Need ensure no external network. No links.

Let's write file.

Now need run browser inspect. Use browser screenshot.

Screenshot tool says model does not support images, but console warning only. Need inspect maybe DOM/console. Browser action inspect.

No image support, but can still drag and maybe inspect DOM. Need verify behavior perhaps use browser drag and then inspect? We can't see image. Could use JS? Browser tool only actions, no eval. Could maybe use screenshot not supported. Need rely code. But we should test drag. Use browser drag from (300,400) to (800,500).

Status updated. Need wait/simulate after release? Browser tool doesn't wait? Could screenshot after maybe. Use screenshot.

Need test second drag another direction.

Test Clear click. Need click coordinates maybe button location unknown. Could use DOM inspect no coordinates. Browser click action x,y. Panel top-left, buttons approximate. Panel layout: group with label/input/swatches width maybe 260, then Pause at x~? y~? Panel top 14, height 54, pause x maybe 300, y 31. Clear x 370. Could click (310,31). But click action might click. Let's estimate. At 1200x800, panel: group label 33 + input34 + gap + swatches 5*22+4*6=134 => group width 33+8+34+8+134=217. Panel padding 12 => pause starts 12+217+10=239, width maybe 65 => center 271. Clear starts 239+65+10=314, width 65 center 346. y center ~ 14+10+17=41. Click clear (346,41).

Now drag after clear.

Need perhaps test Pause. Click pause at (271,41).

Then resume.

Need maybe inspect code for bugs. Let's carefully review. Potential bug in beginDrag: `pointerId = event.pointerId;` references global `event` inside function, but called from event listener where `event` is parameter of listener not accessible inside beginDrag. In JS, `event` may refer to window.event in browser (non-standard but supported) or undefined. In Chrome, window.event is current event, so works, but not robust. Should fix by pass event.pointerId. This is a clear bug. Need edit. Also `hasInitialized` unused. Fine.

Potential bug: `copyInteriorFields(u,u0,1)` loops base=(i+row)*components, correct. `advectField` for velocity uses u/v current. Good.

Potential bug: `resizeCanvas` on window resize: `oldGridH` unused. Fine.

Potential bug: `setDyeBoundaries` loops all i including corners and then all j including corners, okay.

Potential bug: `project` pressure boundary after divergence; pressure boundaries copy. Good.

Potential bug: `vorticityConfinement` sign maybe okay.

Potential bug: `beginDrag` when paused returns before pointerId set, but pointer capture still set. Fine.

Potential bug: pointermove after pointerup with pointerId null. Fine.

Potential bug: `event.preventDefault()` on pointermove may prevent scrolling but touch-action none. Fine.

Potential bug: color input event `setColor(colorInput.value)` works.

Potential bug: initial seed uses `simW * 0.32` continuous coordinate, okay.

Potential bug: rendering base color added to dye, so dye colors slightly washed. Fine.

Potential bug: no dye diffusion, but advection and injection radius. Persistent swirl due vorticity. Good.

Need fix beginDrag signature. Also maybe pointer capture if paused? Not issue. Use edit.

Need reload browser after edit.

Need maybe test drag again after reload.

Need maybe use browser motion? Not needed. But requirement says run and inspect initial output and console. We did, though images unsupported. Could maybe use bash to run static checks? We can use node? Check file syntax by extracting script? Could use `node --check` not directly because HTML. Could use grep. But browser no console errors besides warning. Good.

Need perhaps verify dye field actually nonzero after drag. We can't inspect JS variables. Could maybe use canvas pixel sampling via browser? No eval tool. Could use screenshot unsupported. Could maybe use `browser` action inspect DOM only. Not enough. But code logically. Could perhaps add a temporary debug? No need. Could use bash with headless? No browser CLI maybe. We can inspect file. Need ensure no external resources. `grep` for http etc.

No external. Need maybe final report. But before final, perhaps think if any hidden issue with simulation method and requirements. Let's deeply verify numerical correctness.

Grid and boundaries:
- `gridW = simW+2`, `gridH=simH+2`.
- Interior i=1..simW, j=1..simH.
- Velocity boundary no-through: u left = -u(1), right=-u(simW); top/bottom u copy. v top/bottom=-v, left/right copy. Good.
- Advect samples clamped to interior [1,simW], so no boundary dye. Fine.
- Project divergence uses interior neighbors. Pressure boundary copy. Standard.
- After projection, velocity boundaries set.
- Vorticity computed interior and applied, then boundaries.
- Dye advected with velocity.
- Damping.

Initial swirl:
`u += (-dy/radius)*strength*falloff`, `v += (dx/radius)*strength*falloff`. At dx positive, v positive (downward in screen), dx negative v negative; at dy positive, u negative. This is clockwise? Fine.
Dye blobs within radius. Good.

Drag injection:
`pointerToFluid`: x = 1 + fx*(simW-1). At left edge x=1, right x=simW. Good.
`injectAlongDrag`: steps = ceil(distance/2), max 40. If distance small <0.03, only dye no momentum. For normal, segment length maybe <=2 unless huge. momentum = segment*16. For a 100-cell drag in one event, steps 40, segment 2.5, clamped to 5? Actually segment length 2.5 <5, momentum 40 cells/sec. Each step adds velocity 40 in overlapping radius 6. Total could be high but damping/projection. Good.
Dye amount 0.3 per step, 12 total for 40 steps, bright. Fine.
After release, status.
Second drag works.
Clear resets arrays.
Color selector works.
Pause stops stepping but still renders; dragging while paused does nothing because beginDrag returns and moveDrag checks. Good.
Resolution: at 1200x800 sim 200x133 = 26,600 cells. Pressure 24 iterations ~638k updates, advect ~5 passes ~133k, fine. Canvas render 960k pixels. DPR capped 1.5. Work bounded.
Fixed timestep max 2 steps per frame. At 120Hz, one step every other frame. At 60Hz, one. At 30Hz, two. Good.
Potential issue at 120Hz, `accumulator` starts 0, realDt ~0.0083, so no step every other? Actually at 60Hz realDt .0167 => one step. At 120Hz .0083 => after two frames accumulator .0166 => one step. Good.
Potential issue at 144Hz, sometimes 1 step every 2 frames, sometimes? Fine.
Potential issue if rAF called first with now maybe same, no step initial but seed already.
Potential issue `lastFrameTime` set before first frame; okay.
Potential issue `realDt` max 0.1 but while max 2 steps only processes 1/30 sec, drops rest. Good.
Potential issue `MAX_STEPS_PER_FRAME` 2 means at 20Hz realDt .05, only 2/60=.033 processed, slow motion. But controls responsive. Acceptable. Could set 3 but work bound. Fine.
Potential issue no velocity diffusion, but damping and vorticity. Approximate acceptable.
Potential issue dye doesn't diffuse, but advects. Requirement only advect dye.
Potential issue "collection of independent fading particles is not sufficient" we use field. Good.
Potential issue "Momentum and dye remain visible after pointer release and gradually dissipate." Yes.
Potential issue "Seed initial scene with a small amount of colored dye and motion" yes.
Potential issue "Provide a color selector, Pause/Resume, and Clear." yes.
Potential issue "Bound simulation resolution and work per frame so controls remain responsive at a 1200 by 800 viewport." yes.

Could maybe improve UI status after pause drag. Fine.

Need maybe check HTML validity: `input[type=color i]` selector unusual but valid CSS? `input[type="color" i]` is valid case-insensitive attribute selector. Fine.
`hasInitialized` unused, no issue.
`oldGridH` unused, no issue.
`event` in `beginDrag` fixed.
`canvas.setPointerCapture(event.pointerId)` before `beginDrag`; if paused, capture still active but no drag. Fine.
`endDrag` uses event.pointerId. Good.
`pointerToFluid` uses canvas rect; CSS full screen. Good.
`resizeCanvas` uses window.innerWidth; canvas CSS 100vw. Good.
`offscreen` context alpha false; createImageData. Good.
`ctx` alpha false; drawImage opaque. Good.
No external assets.

Could maybe use `Math.hypot` instead of sqrt, no issue.

Need final concise report: what checked and remaining unverified. Mention browser screenshot/image rendering unavailable in environment, so visual pixel verification not possible; DOM/status and console checked, drag/clear/pause interactions exercised. But user asked verify; we should be transparent. We did not visually confirm dye because model doesn't support images. Could say no console errors; status transitions confirm event flow. Remaining unverified: actual pixel colors/swirl visually. But perhaps we can infer. Need maybe mention file path. Final with no excessive detail.

However, before final, maybe we should use browser `motion` action? It might capture motion frames but images unsupported. Not needed.

Could maybe use `browser` action `type`? no.

Need perhaps check console after reload and drag: only warning about iframe sandbox, no JS errors. Good.

Let's final.