Fluid simulation · glm-5.3-flash

Write a stable-fluids solver on Canvas 2D with small grid (e.g., 128x86 velocity, dye at 256x172), semi-Lagrangian advection, Jacobi diffusion, projection. Use ImageData rendering with bilinear sample. Include UI: color selector, pause/resume, clear.

There's a bug in advect: for velocity advection I pass uu=u0, vv=v0 which is the velocity grid matching Nn,M — fine. For dye, uu=u (velocity grid), length check: uu.length === (Nn+2)*(Mn+2)? For dye call, uu=u has length (N+2)*(M+2) != (DN+2)*(DM+2), so goes to else branch: sampleVel with fx=i*0.5-0.25... but in sampleVel I do another scale x*=0.5-0.25/N — that's wrong double scaling. Fix: in advect dye branch pass fx=i*0.5, fy=j*0.5 and sampleVel does conversion. Let me fix: in else branch use x=i*0.5, y=j*0.5 (dye cell center i corresponds to velocity coord i*0.5 roughly). sampleVel already scales by 0.5? It does x*=0.5-0.25/N which for N=144 is ~0.498 — ok fine but combined with fx=i*0.5-0.25 gives i*0.25 — wrong. Simplify: pass fx=i*0.5, fy=j*0.5 and remove scaling in sampleVel.

Also advect has unused b00 and q uses t0*1 — remove b00 harmless. Also applyForce dye adds 0.35*color*ff per frame per substep — fine. Run browser to check.

Canvas is black — seed dye may exist but render: canvas context '2d' with alpha:false — I created ctx twice; the first `canvas.getContext('2d',{alpha:false}).createImageData` and later `canvas.getContext('2d')` — same context returned, fine. But rendering: I call putImageData then drawImage of off canvas scaled. putImageData(img,0,0,0,0,DN,DM) draws at native size, then drawImage over full canvas — that should show something. Black suggests dye is 0. Check advect/dye path or seed. Also possible exception in render breaking frame? Console had no error. Possibly dye values got advected away quickly or dissipated. Or my advect for dye uses u/v with sampling — check sampleVel: x*=0.5 gives dye coords doubled? sampleVel expects coordinates in velocity-grid units? In advect else branch: fx=i*0.5 (velocity coords for dye index i). sampleVel then does x*=0.5 again → wrong, halves again. Fix: sampleVel should not scale; remove x*=0.5 line.

Still black. Debug: maybe exception in render or step stops frame. Console shows no error though — maybe frame errors silent? Let's test by adding console log via evaluating? Browser tool only gives console on load. Maybe the seed dye IS there but render draws black because img canvas drawImage of `off` — I draw putImageData to ctx first at native size (288x192) then drawImage off scaled. Should show. Unless render throws before first putImageData... Actually render(): uses `canvas.getContext('2d', {alpha:false}).createImageData` created before? img is created at top-level after canvas; ok.

Possibly an exception thrown each frame at some point before render — e.g. in advect: `uu.length === (Nn+2)*(Mn+2)` for velocity advection call: advect(N,M,u,null,null,u0,v0,u0,v0,...). dst=u, sR=u0,sG=v0,sB=u0?? I passed (u,null,null,u0,v0,u0,v0) → dst=u, dstG=null, dstB=null, sR=u0,sG=v0,sB=u0. OK. But then in loop `if(dstG)` falsy. Fine.

Hmm, maybe exception: in advect I reference IXn defined after advect — const arrow defined later in same script but called at runtime after definitions, fine.

Check errors by loading with a console error capture — the browser tool reports console on reload only. Maybe write a quick test in page? Simpler: check if requestAnimationFrame runs and canvas painted via screenshot after motion. Try screenshot action now (time passes).

Still black even after time — the sim isn't rendering. Add a debug: catch exceptions and print to console, or simpler — test logic in node with a small harness. Actually likely a runtime exception halts frame loop after first frame (console would show error though). The console shows only the iframe warning — maybe errors suppressed. Let me add window.onerror to console.log, and also check advect bug: for velocity advection, sG=v0 but dstG null so unused — but I compute dst[k] using sR only — fine.

Wait — in render, `img` created via context with alpha:false... putImageData into `offCtx` then drawImage off scaled onto canvas — fine.

Hmm, maybe exception: in applyForce or seed — seed uses `u[IX(ii,jj)]` fine.

Possible real bug: `advect` uses variable `q = s0*t0` but also `const b00=t0*1` unused; fine.

Add error reporting. Also test the math standalone in node quickly.

eval scope — use indirect via global eval? eval inside function creates own scope... top-level eval in node module: declarations go to eval scope, not accessible after? They should be accessible in same scope after eval... "step is not defined" — because script has "use strict" so eval declarations stay in eval scope. Capture functions via returning. Alternative: append test code to the script string.

NaN! Something explodes — probably projection or advection NaN due to sampleVel index out of bounds producing undefined→NaN. In advect dye branch: x = i - dtx*uu_. dtx = dt*DN. If velocity large (seeded ~±125 each component after random*250), x can go far negative but clamped... clamped to [0.5, Nn+0.5] then i0 = x|0 fine. Hmm but uu_ = sampleVel(uu,fx,fy) — for fx=i*0.5 where i up to DN+1=289 → fx up to 144.5, sampleVel clamps to N+0.5=144.5, i0=144, IXn(145,...) index valid (N+2 cols) fine.

Velocity advection: dtx=dt*N ~ 0.008*144≈1.15, vel 125 → x moves 144 cells → clamped. fine.

NaN maybe from project: h=1/N; division fine. diffuse: c=1/(1+4a) fine. vorticityConfine: div reused, fine.

Check where NaN appears: after 1 step? Also dye seeded values... seed: dR[k]+=... fine.

Wait: advect velocity call: advect(N,M,u,null,null,u0,v0,u0,v0,dt,1.0). Inside, `if(uu.length === (Nn+2)*(Mn+2))` — uu=u0 length matches → uses IXn(i,j,w). ok.

Hmm, `applyForce` called in step with mouseDown false → returns. ok.

Let me bisect: run 1 step and print NaN locations.

The earlier test appended worked because s+=';...chk(...)' uses chk defined inside? In previous run I defined chk in appended string before use — yes I defined it there. Here I appended chk def after the first s+=';vorticity...' — order: s+=';chk=...' comes before the vorticity line? No, I appended chk def first then vorticity lines — order in file: chk def, then vorticity. But error "chk is not defined" — because chk assigned without var inside strict-mode eval → assignment to undeclared in strict throws? Actually error says chk is not defined at call... assignment `chk=(n,a)=>...` in strict eval creates binding in eval scope; maybe fine. But error occurred — maybe at `chk("seed u"...)`? No that's the old append. Hmm the error could be thrown earlier: the first s+=';chk=(...' — that's fine. Wait order of my concatenation: first s+=';chk=...;' then s+=';vorticityConfine...'. So chk defined before. But error... unless strict eval: function assignment `chk=` inside eval with strict — creates global? In strict mode eval, declarations don't leak but assignments to undeclared variables throw ReferenceError at assignment time. So chk= itself throws? Error message says "chk is not defined" which is what assignment-to-undeclared in strict throws. But previous run it worked (chk defined with same pattern and calls worked). In previous run the pattern was the same... and it printed values. Odd. Maybe in previous run, chk assignment succeeded since... whatever. Use var chk or use console directly. Simpler: define chk before, and wrap via non-strict: remove "use strict" line.

u0[IX(i,j)]=0 but dst is NaN → the interpolation weights? A=IXn(i0,j0,w) etc. If u0[A] is 0 fine. dst[k] = diss*(q*sR[A]+r*sR[B]+s*sR[C]+t*sR[D]) — if any of q,r,s,t NaN → x or y NaN. x = i - dtx*uu_. u0 values near 0... at i=1, uu_ = u0 at index i+(N+2)j = 0. So x=1. Weights fine. Unless sR[A]... A computed with w=N+2. Hmm all zero → dst 0.

Wait, dst = u but src u0 — but I call advect(N,M,u,null,null,u0,v0,u0,v0...) directly here without u0.set(u)! u0 is zeros except... seeded u was never copied. So src zeros → dst should be 0, not NaN. Unless u[k] itself was NaN before? chk("u adv") earlier: u adv had NaN, but that came after previous ops... Here fresh load: seeded u has values (nonzero!). Weights: x=i-dtx*uu_, uu_=u0[i...] which is 0 here. But wait for velocity advect branch condition: uu.length === (N+2)*(M+2) → u0 length = size = 146*98 = 14308. Yes. So x=i. Then i0=i... all fine.

Hmm but bad at (1,1) with u0 all zero around — yet dst NaN means t etc NaN? s1=x-i0 where x=i (integer) fine.

Unless uu.length !== size → else branch! u0.length = (N+2)*(M+2) = size — equal. But wait, in my test I passed uu=u0: yes.

Let me print more: dump q weights. Actually maybe NaN comes from v: dst is u but I read sR=u0... could NaN be pre-existing in u at k=IX(1,1)? Seeded u — chk not run in this snippet. Seed adds only within bounds. Let me print u[k] before advect.

So with zero source, dst becomes NaN. Weights: q=s0*t0 etc. x=i-dtx*uu_. But uu_=u0 length branch... wait for velocity branch I access uu_[IXn(i,j,w)] where w=Nn+2. OK.

Hmm — `const b00=t0*1, q = s0*t0, ...` fine.

Oh! sB=u0 too but dstB null. Fine.

dtx = dt*Nn = 0.004*144. Fine.

Unless... `advect` first checks `if(uu.length === (Nn+2)*(Mn+2))`. true. Then `uu_ = uu[IXn(i,j,w)]`. i=1,j=1 → u0[1+146]=0. x=1. i0=1,i1=2,j0=1,j1=2. s1=0,s0=1,t1=0,t0=1. q=1, r=s1*t0=0, s=s1*t1=0, t=s0*t1=0. dst = 1*u0[IXn(1,1,146)] = 0. Not NaN!

So my reasoning wrong somewhere — maybe IXn vs IX mismatch: IX(i,j)=i+(N+2)j = same as IXn with w=N+2. Same.

Test manually tiny: maybe dt passed as dt param... advect signature (Nn,Mn,dst,dstG,dstB,sR,sG,sB,uu,vv,dt,diss). I call advect(N,M,u,null,null,u0,v0,u0,v0,0.004,1.0) → dt=0.004, diss=1.0. fine.

Hmm, maybe the issue: in the loop, for dye branch sampleVel uses N and M globals fine. Let me just directly instrument advect by redefining? Easier: check whether the loaded advect in this eval is my current version — maybe file has stale code with the double-scaling sampleVel for velocity?? No, velocity branch is the length check.

Actually wait: the length check happens per cell — u0.length === (Nn+2)*(Mn+2). For velocity advect: Nn=N,Mn=M → true. OK.

Let me add console.log inside a copy of advect in the eval.

Found it: `const IXn=(i,j,w)=>i+w*j;` is declared AFTER advect with const — but advect is called at runtime after full script eval, so fine... BUT in my node test, I call advect via appended code — still after. Hmm.

Wait — actually the real issue: `const IXn` is in TDZ only before its line; calls happen after. OK.

So why NaN with zero source? Let me trace manually in node replicating exact code... I'll just add console.log inside advect via string replace.

y = j - dty*vv_ is NaN → vv_ NaN. vv = v0 which is zeros... unless IXn is undefined at that point? No, it's TDZ issue! IXn is `const` declared after advect's definition but before call — fine. But vv[IXn(i,j,w)] — w=146, index 1+146=147 < 14308 fine.

Hmm wait: maybe IXn TDZ — in my eval, advect is called via appended code, which is after IXn line. Not TDZ.

Unless the length check fails: uu.length=14308 === (144+2)*(96+2)=14308 true. So velocity branch. uu_=u0[147]=0. Then x = 1 - dtx*0 = 1. y = 1 - dty*vv_. vv_=v0[147]=0 → y=1. But y is NaN! So vv_ is NaN. v0[147] must be NaN?? v0 is Float32Array zeros... unless seed or something wrote NaN. Earlier check "seed u NaN count 0" but didn't check v0. v0 is never touched before. Hmm but dbg shows t1 NaN (since y NaN) and r,s NaN.

Actually wait — q NaN too! q=s0*t0, s0=1-s1, s1=x-i0=0 → s0=1. t0=1-t1=NaN. So only y NaN.

Let me check v0[147]... Or maybe vv param isn't v0: I passed (...,u0,v0,u0,v0,...) mapping sR=u0,sG=v0,sB=u0,uu=u0,vv=v0. Yes vv=v0.

Print v0[147] directly. Also possible: in strict-ish eval, `s` variable name collision! Inside advect I declare `const s=s1*t1` — and outer there's no s. But in my node harness `s` is the script string... that's outer scope, fine.

Hmm, another collision: advect has parameter `dt` shadow... fine.

OH WAIT. I see it: `sampleVel(f, x, y)` — but that's dye branch. Not used here.

Actually maybe IXn TDZ IS the issue in a subtle way: `const IXn` appears after `function advect` but advect executes after — fine. But `setBounds` uses IX... all after.

Just print v0[147] and vv_ inside.

So source is 0 but result NaN. Inside advect: y = j - dty*vv_. Let me print y and vv_ directly via replace of the y line.

dt=1 and dtx=dt*Nn=144?! And vv_ undefined. That means arguments shifted: dt=0.004 became diss... I passed advect(N,M,u,null,null,u0,v0,u0,v0,0.004,1.0) — 11 args, signature has 12 (Nn,Mn,dst,dstG,dstB,sR,sG,sB,uu,vv,dt,diss). Count mine: Nn=N, Mn=M, dst=u, dstG=null, dstB=null, sR=u0, sG=v0, sB=u0, uu=v0! vv=0.004, dt=1, diss=undefined. I passed one extra null! Signature: (Nn, Mn, dst, dstG, dstB, sR, sG, sB, uu, vv, dt, diss) — that's dst + dstG + dstB + sR + sG + sB = 6, plus Nn,Mn,uu,vv,dt,diss = 12 total. My call: N,M,u,null,null,u0,v0,u0,v0,dt,1.0 = 11 — missing one slot. Fix call sites: velocity advect should be advect(N,M,u,null,null,u0,v0,u0,v0,dt,1.0) → that's Nn,Mn,dst,dstG,dstB,sR,sG,sB,uu,vv?? No: positions: 1 Nn=N,2 Mn=M,3 dst=u,4 dstG=null,5 dstB=null,6 sR=u0,7 sG=v0,8 sB=u0,9 uu=v0 — wrong! Need sB before uu: advect(N,M,u,null,null,u0,v0,u0, u0,v0, dt,1.0)? sB unused anyway; correct: dstG=null,dstB=null,sR=u0,sG=v0,sB=u0,uu=u0,vv=v0.

Similarly dye call: advect(DN,DM,dR,dG,dB,d0R,d0G,d0B,u,v,dt,0.9985) — count: DN,DM,dR,dG,dB,d0R,d0G,d0B,u,v,dt,0.9985 = 12 ✓ correct.

Fix velocity call: add extra u0.

Now stable, dye persists. maxpx 17 seems dim — seed adds 0.9*f*color... at center f=1 → dR≈0.15*0.9=0.135 → px≈34. After 30 steps spread. Dye should be more visible; maybe boost seed and drag intensity later. Check in browser visually first.

It works — swirling dye visible. A bit dim; boost brightness: multiply render by ~1.6 or add contrast. Increase drag dye amount and seed amount. Also note dye got advected quite fast (already swirled by screenshot time). Increase render brightness factor 2.0 and clamp.

Good. Now test drag interaction, then clear + redrag.

Drag works — dye follows and swirls, but oversaturates to white (clipping). Reduce injection intensity: 0.5→0.18 and min cap 1.2. Also velocity maybe too strong but fine.

Still saturating — because the browser drag injects over many pointermove events and dye accumulates; also cap 1.2 * 420 = way over 255. Reduce further: cap 0.5, rate 0.1, and rendering 420→ but seeded dye is dim... Actually seeded looks fine at 420. Drag accumulation over repeated frames builds to cap. Lower cap to 0.45 (→ ~190 display) and rate 0.1.

Still bright — the browser's synthetic drag probably fires pointermove only once but dye amount ff*0.1 each substep *2, plus momentum concentrated. It's a bit hot but shows shape and swirl; brightness within cap ~0.55*420=231 near white when overlapping. It looks acceptable — bright plume with structure. Maybe lower display gain to 300 and cap 0.55 → 165. But then seed becomes dimmer too... seed peaks at 0.9*0.15=0.135*300=40. Hmm seed is fine dim-ish. I'll lower rate to 0.06 and keep cap; good enough. Also check after release persistence — screenshot after a pause, and test clear + redrag, and second drag in another direction.

The synthetic drag seems to fire the move once but inject over many frames? No — mouseDown stays true? pointerup isn't fired by the tool maybe! The drag tool drags but pointerup may not occur, so mouseDown stays true and dye keeps injecting at mx — the blob keeps growing. That would explain saturation. For real users pointerup fires. But also with mouseDown stuck, pmx=mx updated each frame so velocity injection stops (dx=0), only dye keeps adding. Real behavior: dye only while moving. Let me dispatch pointerup via key? Can't. Use drag then click elsewhere to trigger pointerdown/up? click = down+up, would set mouseDown true then false. Actually after drag, a click elsewhere would release. But verify persistence: take another screenshot after a click to release.

Confirmed: mouseDown stayed true during frames, injecting continuously, spreading into a big dim blob (dye dissipated over the whole canvas). This is an artifact of the harness not sending pointerup. But to be safe, also make injection depend on pointer movement (dye only injected while dragging with movement) — it already applies per frame while mouseDown; real users holding still would also accumulate dye. Better: only inject when pointer moved since last frame (len threshold), which applyForce already requires (len<0.0005 return) — but pmx=mx updated at end so holding still gives dx=0 → return. Yet blob kept growing... because with no pointerup, mx stays and pmx==mx so no injection. The spread happened from advection over time with huge injected dye from the single drag move? The dye injected once per moved frame; but the blob grew massively — because mouseDown true with pmx=mx each frame no injection; the growth is advection+dye already injected (0.06 each of ~few frames)... The blob is enormous though. Hmm — the drag tool maybe interpolates multiple move events across frames. Fine.

Actually the blob spread wide and dim — dissipation 0.9985 per substep over ~seconds is slow. The look is acceptable for real usage since dye stops on release.

Test: click elsewhere gave pointerdown at (50,750) then pointerup → mouseDown false. Now test clear, then drag fresh, then a second drag in another direction, and screenshots over time to verify swirling after release.

Clear works. Now drag (magenta color first) then a second drag in another direction, then release via click, screenshot after delay to see swirl persist.

New color + fresh flow after Clear works, and dye swirls. Now a second drag in another direction (e.g., from (800,500) upward-left), then release with a click and check post-release persistence with a delayed screenshot (motion frames?). Use motion action to capture frames over time after release.

Second drag in a different direction bends the flow — nice. Now release the pointer (click) and check persistence/swirl after release with a motion capture.

Hmm — the dye spread to fill most of the canvas and faded. The velocity is diffusing too strongly? Diffusion a=1.2 with dt-N scaling? My diffuse uses a as-is (not scaled by dt), 8 Jacobi iterations each substep — that's very heavy smoothing (viscosity high), causing the dye smear into a big blob. Also vorticity confinement then re-concentrates. The flow spreads too fast because velocity advection dt uses full grid: dtx=dt*N meaning velocity in cells/sec... u values ~ hundreds → moves hundreds of cells/sec — everything blasts and smears.

Improve: reduce diffusion a to 0.06 (scaled), and lower dissipation a bit. Actually dissipation 0.9985^2 per frame ≈ visible fade over ~10s — fine. The rapid smearing is mostly high viscosity. Set diffuse coefficient to dt-based: a = dt*visc with visc small, e.g. a=0.0008*dt*N? Standard Jos Stam: a = dt*diff*N*N. Let me just reduce to a=0.15 with 6 iterations, and also reduce force velocity multiplier so motion is calmer? Motion looked good actually (swirls formed). Problem is post-release it diffuses into a uniform blob rather than persisting swirl. Vorticity confinement keeps swirl but dye spreads.

Lower viscosity to a=0.08, and keep dissipation. Also reduce seed random velocities slightly? Fine.

Also check pause button works. Let me tweak viscosity and retest quickly.

Now low viscosity produces filaments (good structure) but dye looks dimmer — dissipation? Actually dye looks darker because it's stretched into filaments (conserved total). Visible structure is nice. Seed amounts maybe increase a bit for load visibility. Also velocities now persist longer → chaotic. Looks fine.

Boost seed dye ×1.6. And do a final drag test: drag, click to release, then motion frames to verify post-release swirl.

Still dimmer than I'd like at load, but acceptable; the earlier color mix happens because dye colors shift as filaments stretch (total conserved). Boost display gain from 420 to 600? Screenshot at ~1s after load. Maybe also slow dissipation less. It's fine — structure visible. One more functional test: drag, release, verify post-release motion via motion capture. Then pause test. Let me do drag then click to release then motion.

Beautiful Kelvin-Helmholtz style curl formation. Now release (click), then motion to verify continuing swirl after release, then pause button test.

After release, the flow continued and filled the screen — velocity persists and dye got advected everywhere. The problem: with low viscosity, momentum dissipates only via projection/advection, and it keeps swirling fast for long. That's actually the desired "momentum remains visible and gradually dissipates" — but the whole canvas becoming a dim teal wash is ugly; dye dissipation 0.9985^2 per frame (~0.997/frame) is too slow to fade, and stretched dye covers everything. Increase dye dissipation to 0.995 per substep (~0.99/frame) so it fades in ~10-20s, and add velocity dissipation (e.g., multiply velocity by 0.999 per substep? that dampens swirl persistence). Better: velocity dissipation ~0.9985 per substep so motion calms in ~10s. Add velocity damping in step: multiply u,v by 0.998 after advection? Do it via advect diss param — currently 1.0 for velocity; set 0.998. And dye 0.995.

Also, the click at (50,750) injected a tiny drag? pointerdown sets pmx=mx, pointerup — no move, fine.

Too dim now (0.996^2 per frame over a second before screenshot = fading fast + stretched). Raise seed dye and display gain, and lighten dye dissipation to 0.9985 (keep velocity 0.9985). Quick final tweaks and one screenshot, then done.

Still dim on initial load view — but the seed disperses quickly and stretched filaments dim per-pixel. One quick improvement: raise display gain to 900 for dim values? That saturates drags. Alternative: add slight bloom-free contrast via gamma: display = 255*(1-exp(-3*x)). Cheap and keeps highlights. Implement in render loop.

Colors look muddy/dark — the tonemap isn't the issue; the dye itself looks desaturated (all three channels present?). Wait, green blob shows dark olive — dG high but dR/dB nonzero due to... seed colors are pure. Olive = some red. Hmm — could come from NaN-safe? No. Actually the drags don't matter here. The olive tone suggests cross-channel contamination: advect dye writes dstG/dstB only if dstG — fine. But render... maybe the tonemap uses r,g,b reassigned before clamp — px[o] uses r>255?255:r — now r already scaled 0..255. fine.

Muddy colors may come from vorticity/mixing of the three seeds colors blending — seeds are separate. At 1s the swirls already mixed a lot. Colors look dim because amount ~2.4*f only at center, and stretched.

Good enough given time. Final quick check: pause button. Then finish.

Pause works (button shows "Resume", frozen frame retained). The dye faded almost entirely by this point (dissipation over ~30s). All core behaviors verified. Done — report.