Aquarium breach · qwen3.8-max-0902

Let me build this. Single index.html, canvas-based simulation.

Plan the physics:

- Canvas ~900x600. Room: floor at y=560, walls at x=0..900.
- Tank: rectangle, e.g., x=250..650, top y=120, bottom y=520 (sitting on floor? tank bottom near floor). Actually tank should sit on floor: floor y=560, tank bottom = 560. Tank height 380, top = 180.
- Water level: starts at y=230 (waterline). Water surface drawn inside tank.
- Crack: draggable vertical segment on the right wall of tank, y range limited to below waterline (i.e., > 230) and above tank bottom. User drags a handle to set crack center. Crack height ~70px, width ~10.
- Breach button: glass panel around crack breaks — spawn glass shards (triangles) from the region, opening appears.
- Outflow: jet from opening. Speed ~ sqrt(2*g*(waterY - holeCenterY)) via Torricelli. Emit particles with horizontal velocity outward (to the right), gravity applied → curves down. Outflow reduces water volume: dV/dt proportional to speed*area. Waterline falls. When waterY > holeBottom (water below hole), stop outflow.
- Puddle: escaped water collects on floor; represent puddle as a height-field across x bins from tank right edge to right wall, spreading. Water particles that hit floor/puddle convert to puddle volume. Puddle level rises, spreads left/right constrained by walls and tank exterior.

Simplify puddle: array of columns spanning room floor, heights. When particle lands, add volume to nearest column. Then diffusion each step to level out. Constrained by walls (x<10 and x>890 → block flow). Also tank exterior occupies some columns; treat tank as obstacle — water can't flow into tank footprint region... Actually water particles only exit to the right of tank, so puddle columns from tankRight to right wall.

Objects:
- Rocks: heavy, sink to bottom, slight drag from current but negligible.
- Toy: floating, bobs on waterline, gets carried by current toward breach (drifts toward hole), can exit through opening if it fits (toy radius < hole height/2 → carried out).
- Plants: rooted at bottom, bend with current (lean toward hole), sway.
- Fish: swim; initially swim against current (move left, away from hole), but as flow strengthens near hole some get swept in. Model: fish have swim force; when within suction radius of hole and flow speed exceeds swim capability, they get pulled in and exit → become airborne, fall, flop on floor.
- Glass shards: spawn on breach, rotate, fall with gravity, drag in water, settle on tank bottom or floor outside.

Object states: inWater (tank), exiting, airborne, landed.

Implementation details:

Water rendering: draw tank water rect from waterY to tank bottom, with wavy surface line. Also draw water outside (puddle) as filled polygon from column heights.

Jet particles: array of droplets {x,y,vx,vy,r}. Emit from hole each frame with rate ∝ speed. Gravity 900 px/s². Apply slight drag. When particle y > floorY - puddleHeightAt(x) → deposit volume, remove. Also collide with tank exterior wall? They exit rightward, fine.

Volume bookkeeping: tank water cross-section area = width*(bottomY - waterY). Outflow rate: A_hole * v. So waterY += (A_hole*v)/tankWidth * dt.

Hole: opening from crackTop to crackBottom on right wall (x = tankRight). Actually the panel breaks around the crack — make a hole of some size, maybe slightly bigger than crack.

Toy fits opening: toy radius 14, hole half-height ~35 → fits, carried out.

Fish: 5 fish. Each has pos, vel, dir, state. In-tank behavior: wander with swim speed ~50-70 px/s. When breached, add current field: flow velocity toward hole increasing near hole, magnitude scaled by outflow speed. Fish swim against current: target velocity = -currentDir*swimStrength + wander. If |current| > swimStrength near hole, fish is advected. Add suction zone: within radius R of hole, current = toward hole with magnitude v*(R/d)^1.5 capped. Fish caught within hole x and y range → state 'swept', moves through hole with jet velocity, then airborne, then landed on floor (flop animation).

Only "some" fish swept: give each fish swimStrength variation and initial positions; those near hole get swept.

Rocks: sit at bottom, on breach they get tiny nudge from current but essentially stay (sink, high density). Maybe slight shift.

Plants: segments drawn with bend angle driven by local current; plants near hole bend strongly toward hole, and drift (sway).

Glass shards: polygons with rotation, velocity; in water apply buoyancy/drag (slower fall), out of water gravity; collide with floor and settle, rotation friction. Also collide with tank bottom inside.

Crack dragging: mousedown near crack handle on tank right wall → drag vertically, clamp to [waterY+holeHalf+5, tankBottom-holeHalf-5]. Draw crack as jagged vertical line with small branches. Only allow drag before breach.

Reset: restore all initial state (store initial seed/config and rebuild).

UI: buttons Breach, Reset, maybe slider for gravity? Not required. Add HUD text.

Let me write the code. Use requestAnimationFrame with fixed dt clamp.

Coordinate layout:
- W=960, H=600 canvas.
- floorY = 555.
- Tank: left=180, right=560, top=150, bottom=floorY (555)? Tank sits on floor with base. Let's say tank bottom inside = 545, glass thickness 8. Water initial y=230.
- Hole on right wall x from 560 outward.
- Puddle columns from x=565 to 950, bin width 6.

Left side of tank: room wall at x=0; maybe a shelf. Keep simple: floor line and walls.

Fish swept out: they exit to right of tank, fly through air, land in puddle/floor, flop.

Objects carried out: toy floats on water surface; as water level drops, toy drops with it. Current pulls it to hole; when toy center near hole and toy radius < holeHalf → carried out with jet velocity, then floats on puddle? Simplify: after exiting, airborne with gravity, then lands in puddle and floats on puddle surface (bobbing).

Let's write.

Water in-tank surface wave: draw with sine offsets, plus a dip near the hole when flowing.

Puddle height field: array cols[i] of water depth. Diffusion: for each pair, flow = k*(h[i]-h[i+1]); clamp so no negative. Also add spread. Floor y=555; puddle surface y = 555 - h.

Particles deposit: find column index, add volume r^2*something / binWidth.

Puddle also should be constrained by room walls: bins limited range, so inherently.

Now glass shards collision with shards? Skip; shards collide with floor and tank bottom only. "rotate, collide" — collision with floor and tank bottom is enough, plus maybe simple shard-shard separation. Keep floor/tank.

Write the code carefully.

Structure:

```js
const G = 1400; // px/s^2
state = {...}
```

Let me code it.

Objects list: rocks (5), plants (3), fish (5), toy (1), shards (dynamic).

Fish AI:
```
fish.swim = 60 + rand*40;
update: if state==='tank':
  desired wander: change targetDir occasionally
  current at fish pos: cur = currentAt(x,y)
  if breached: fish try swim against: v = normalize(-cur)*swim + wander*30
  else v = wander
  advect: pos += (v + cur*dragFactor) * dt   where dragFactor depends: fish strong swimmers resist: if swim > |cur| they can hold; model v_total = v_swim_against + cur*0.9 — with swim against magnitude = min(swim, |cur|) so net = cur - min(swim,|cur|)*curDir → if |cur|>swim net flow carries them. Good.
  if fish within hole capture region and net velocity pushes to hole and |cur| > swim*0.8 → state 'swept': vy small, vx = jetSpeed.
```
Capture: x > tankRight-25 and y within hole range ± 20 and |cur|>swim → swept.

Swept fish: becomes projectile: vx = jetSpeed*(0.8..1), vy = jet vy; gravity; lands on floor/puddle → state 'landed', flop wiggle.

currentAt(x,y): only inside tank and breached: 
```
dx = holeX - x, dy = holeCY - y; d = hypot; R = 200;
if d<R: mag = jetSpeed * pow(1-d/R, 1.6) ; dir toward hole.
```
Also global drift: whole water slowly moves toward hole? add small mag = jetSpeed*0.08.

jetSpeed = sqrt(2*g*(waterY... )) with clamp: h = (waterSurfY? ) head = holeCY - waterY... use head = max(0, holeTop? ) Let holeCenter; head = waterY? Water surface y is smaller number above. head = (waterY... ) Actually head in px = waterSurfaceY is above hole: head = holeCenterY - waterSurfY. v = sqrt(2*G*head*0.5) scaled. Clamp v to 0 if waterSurfY > holeBottomY (water below hole bottom).

Outflow rate: Q = v * holeHeight * coeff. waterSurfY += Q/tankWidth*dt (since level drops, y increases).

Wait: volume per second = v*holeHeight (2D). tankWidth = 380. dLevel/dt = v*holeH/380. With v~600, holeH~70: 110 px/s. That's fast but fine — tank drains in a few seconds. Maybe reduce coefficient 0.5.

Jet particles: emit rate proportional to v; each particle at hole with vx=v*(0.9+0.2rand), vy = small random + slight up for higher parts of the hole. Actually water at top of hole has more head → faster. Emit at y random within hole; vx = sqrt(2*G*(y - waterSurfY)*0.4).

Particles also should collide with the tank outer wall? They start at x=tankRight, going right, fine.

Toy: radius 16 (a rubber duck-ish circle with details). Floats: y = waterSurfY - 4 (bobbing with sin). Current pushes it toward hole: x += cur.x*dt*floatFactor. When toy reaches hole region: if waterSurfY < holeTop (water above hole top) and toy near x> tankRight-30 → exit as projectile. But as water drops below hole, outflow stops and toy stays. Hmm requirement: "Movable objects that fit the opening can be carried out by the flow." Toy should get carried out early while flow strong. Make suction pull it fast enough that it exits before level drops below hole. Hole center at, say, waterY+? Crack placed by user below initial waterline. If user puts crack near bottom, water must fall to that level. Toy gets pulled quickly with strong current near hole. Give buoyant floating objects strong response: velocity = current*1.2. Should exit within a second. Also allow: if toy is at hole x and waterSurfY is above hole bottom → carried out. If the water drops below hole and toy hasn't exited, toy rests at the tank bottom (stranded) — that's fine and consistent.

Better: allow the toy to be sucked out even if slightly below water level as long as water reaches hole.

Rocks: at bottom, when breached apply tiny push, but friction keeps them; maybe slide slightly if on slope. Keep them static with tiny jitter to show response ("rocks sink" — they're already at bottom).

Plants: base at bottom, height 60-90, drawn as bezier with bend = clamp(current mag)*dir + sway sin. Also detached leaf particles drifting? Keep bend.

Glass: tank right wall drawn; on breach, hole region drawn as broken jagged edges; shards spawn: 14 triangles with pos around hole, velocities outward/downward, angular vel. Physics: gravity, if y<tankBottom && inside tank x range → in water: apply drag (v *= damp) and buoyancy (reduce gravity by 40%), settle on tank bottom (y=tankBottom - r). Outside: fall to floor y=555 - puddle? Land on floor: settle, stop rotation. Also shard-shard collision: simple pairwise push apart if dist < r sum (cheap, n small).

Rendering order: background room, puddle behind? Puddle is outside tank on floor. Tank glass back, water, objects, glass front highlights, wall with hole, jet particles, shards, puddle, fish landed, etc.

Crack UI: before breach, draw jagged crack line on right wall at [cy-35, cy+35], with handle (circle) at center; instruction text "Drag the crack on the right glass". Highlight on hover.

Also need the crack below the initial waterline: clamp cy so crackTop > waterSurfY + 20, crackBottom < tankBottom - 15.

Let me now write full code.

Also HUD: status text, buttons Breach / Reset, maybe "Slow motion" toggle? Add speed toggle optional. Keep Breach, Reset, and a hint line.

Reset: re-init everything from a seed function with fixed RNG (use seeded random for identical scene). Implement mulberry32 seeded with fixed seed so "same initial scene".

Let me write.

```html
<!doctype html><html><head><meta charset="utf-8"><title>Aquarium Breach</title><style>...</style></head>
<body>
<div id="wrap">
 <div id="ui">...buttons... status ...</div>
 <canvas id="c" width="960" height="600"></canvas>
</div>
<script>...</script>
```

Canvas scaling: keep 960x600 with CSS max-width 100%.

Mouse coords: use getBoundingClientRect and scale.

Now write the JS in detail.

```js
const cvs=document.getElementById('c'), ctx=cvs.getContext('2d');
const W=960,H=600;
const FLOOR=556, TANK={l:170,r:560,t:150,b:548,glass:8};
const WATER0=232;
const HOLE_H=72;
```
Tank interior: x from l+glass to r-glass; bottom interior b-glass.

Water inside occupies x in [l+g, r-g], y in [surf, b-g].

Hole at x = r (right wall), y in [cy-HOLE_H/2, cy+HOLE_H/2].

Puddle bins: from x0=TANK.r+2 to W-4, bin w=8. Also water can flow to left of tank? Jet goes right only, so no. But let's include bins for whole room and let tank footprint be a wall (obstacle) so flow stops. Simpler: bins from tank right to right wall.

Hmm, puddle spreading constrained by floor and room walls — right wall at W. Fine.

State object:

```js
let S;
function makeState(){ const rnd = mulberry32(1234); ... return {...} }
```

Store rocks, plants, fish, toy, water level, breached, crack cy, particles, shards, puddle cols.

Physics step dt (fixed 1/120 substeps? just use dt clamped to 0.033).

Let me write functions:

- `jetSpeed()` returns v based on head.
- `currentAt(x,y)` returns {x,y} vector.
- update water level, emit droplets, update droplets, update puddle diffusion, toy, fish, plants, rocks, shards.

Drawing.

Time to write it all out concretely.

Droplets: {x,y,vx,vy,r}. Update: vy += G*dt*0.55 (lighter for spray? keep G). vx *= (1-0.2*dt). If y+r >= FLOOR - puddleDepthAt(x) → deposit: cols[i] += r*r*0.9 / BINW... need volume consistency-ish; just tune: add r*0.55 per droplet spread over bin? Let's do vol = r*r*0.35; cols[i] += vol/BINW. With r~3, vol=3.15, /8 = 0.4px per droplet. Emitting ~200 droplets/s → 80 px/s rise in one bin, then diffuses. Reasonable, tune down: factor 0.15.

Also droplets that hit the outside of the tank wall (x < TANK.r) shouldn't happen.

Droplet lifetime cap and remove if x>W.

Puddle diffusion: for i in 0..n-2: dh = h[i]-h[i+1]; flow = dh*0.25; clamp to not overshoot; h[i]-=flow*0.5... Standard: transfer = clamp(dh*0.5*dt*rate). Use rate=8: transfer = dh*min(0.5, 8*dt). Apply. Also enforce max height? no.

Additionally puddle water can flow back? no.

Fish landed in puddle: they lie on floor and flop; if puddle depth > 6 maybe they swim slightly in puddle (fun). Keep flop.

Toy after landing: floats on puddle surface if depth>3: y = FLOOR - depth + 4, bob; else rests on floor.

Now write drawing of room: wall gradient, floor, baseboard, maybe a picture frame. Tank: glass panels, water with gradient + surface wave, sand bottom inside, rocks, plants, fish, toy, glass highlights, rim/frame.

Crack drawing: jagged polyline along wall with branches; handle circle; label.

Breached: draw hole as dark gap with jagged glass teeth on the wall, plus broken spider cracks radiating.

OK let me write the file. I'll be thorough but concise-ish.

Let me write the code now.

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

makeState:

```js
function makeState(){
 const R=mulberry32(20240611);
 const rocks=[];
 for(let i=0;i<7;i++){rocks.push({x:TANK.l+30+R()*(TANK.r-TANK.l-60), r:6+R()*11, shade:R(), rot:R()*6.28, nudge:0});}
 // ensure rocks sit on bottom: y = TANK.b-TANK.g - r*0.7
 const plants=[];
 for(let i=0;i<4;i++){plants.push({x:TANK.l+55+ i*95 + R()*20, h:55+R()*45, seg:5, phase:R()*6.28, hue:100+R()*40});}
 const fish=[];
 for(let i=0;i<6;i++){fish.push({x:TANK.l+60+R()*(TANK.r-TANK.l-120), y:WATER0+40+R()*(TANK.b-WATER0-140), vx:0,vy:0, dir:R()<.5?-1:1, size:9+R()*5, speed:55+R()*45, hue:[18,200,45,330,190,30][i], phase:R()*6.28, state:'tank', wig:0, landT:0, rot:0});}
 toy: {x:TANK.l+120, r:15, bob:0}
 water: WATER0, level of puddle cols zeros.
 crack:{cy: (WATER0 + (TANK.b-TANK.g) )/2 ... default}
```
Default crack cy: midway between WATER0+50 and bottom-40.

Clamp crack.

Now physics update.

jetSpeed():
```js
function head(){ return Math.max(0, S.holeCy - S.water); } // px of water above hole center
```
But should stop when water below hole top? "stops when water no longer reaches it" → when S.water > holeBottom (holeTopY = cy-H/2, bottom = cy+H/2). Water reaches the opening while S.water < holeBottom. So active if S.water < S.holeCy + HOLE_H/2.

v = sqrt(2*G*0.55*head) but when water between holeTop and holeBottom, head small → v small. Use effective head = max(0, S.water? ) Let head = (S.holeCy - S.water) but if water is inside hole range, use head=small positive? Use head = max(2, holeCy - water) while active. Fine: v = clamp(sqrt(2*G*0.5*head),0,900).

With G=1400, head=150 → v=sqrt(210000)=458. Good.

Outflow: Q = v * HOLE_H * 0.55 (effective area). dLevel = Q/ tankInteriorWidth * dt. tankW = TANK.r-TANK.l-2g = 374. v=458*72*0.55=18140 /374 = 48px/s. Drains 200px in ~5s. Good.

Droplet emission: rate = v*0.09 per second → ~40/s at v=458. Emit from random y in hole with vx = sqrt(2*G*0.5*(y - S.water)) clamp min 40.

Current field inside tank:
```js
function currentAt(x,y){
 if(!S.breached||!flowActive()) return {x:0,y:0};
 const hx=TANK.r-TANK.g, hy=S.holeCy;
 const dx=hx-x, dy=hy-y, d=Math.hypot(dx,dy)||1;
 const Rr=260;
 let m=0;
 if(d<Rr) m = vJet*(Math.pow(1-d/Rr,1.5))*0.9;
 m += vJet*0.05*(y>S.water?1:0);
 return {x:dx/d*m, y:dy/d*m*0.5};
}
```
Global drain also creates downward-ish flow near surface. OK.

Fish update (state 'tank'):
```
const cur=currentAt(f.x,f.y);
const cm=Math.hypot(cur.x,cur.y);
// wander
f.phase+=dt*3; 
if(Math.random()<dt*0.6) f.dir*=-1  -- better: wander target changes
target vx = f.dir*f.speed*0.7 ; vy = sin(phase)*12
// swim against current
if(cm>1){ const k=Math.min(f.speed, cm)/cm; targetvx -= cur.x*k*1.0; targetvy -= cur.y*k*0.6; }
f.vx += (targetvx-f.vx)*min(1,dt*4); ...
f.x += (f.vx + cur.x*0.85)*dt; f.y += (f.vy+cur.y*0.85)*dt;
```
Hmm, adding cur*0.85 plus swimming against by min(speed,cm) means when cm>speed they get carried. Good.

Boundaries: keep inside water region x in [l+g+size, r-g-size], y in [water+size, b-g-size]. If breached and near hole and cm > f.speed*0.75 and f.x > hx-30 → swept.

Swept state: f.state='swept'; f.vx = vJet*0.9; f.vy = cur.y; then projectile physics: gravity, when y > FLOOR - puddle → land: state 'landed'.

Actually swept fish should exit through the hole at x=TANK.r then be in air. Just treat as projectile immediately.

Landed: flop: wiggle rot, decay; y rests at FLOOR-2 or on puddle surface.

Toy: state 'float' in tank: 
```
const cur=currentAt(toy.x, surfY)
toy.x += (cur.x*1.3 + drift)*dt ; toy.y = water + 2 + sin(t*2)*3 (partially submerged: y = water + r*0.3)
if toy.x > hx - toy.r*0.6 && flowActive() && toy.y within hole range? 
```
Toy floats at surface; hole center is below surface typically. Water carries floating object toward the wall; near the hole, suction pulls it down and out. Condition to exit: toy.x > hx - 6 and flowActive() and (toy.y > holeTop - 10) → exit. Since toy at surface, surface above holeTop initially → the toy would be at wall but above the hole. As water level falls to near holeTop, the toy descends into hole range and exits. That's physically sensible but might be slow. Alternatively allow the toy to be drawn toward hole by current which includes downward component near hole, so toy submerges and exits. Let's implement: toy.y follows water surface, but when within 40px of hole x, toy.y is pulled toward hole center: toy.y += (holeCy - toy.y)*min(1,dt*2) when close. And exit when toy.x>hx-4 and |toy.y-holeCy| < HOLE_H/2 - toy.r*0.5 and toy.r < HOLE_H/2 (fits). Then projectile with vx=vJet*0.8.

Also add: as water falls, if toy.y > hole bottom and no flow → toy rests on tank bottom (stranded).

Rocks: apply tiny push: rock.x += cur.x*dt*0.02 (negligible) — they sink. Show a little jitter when hit by shards? Skip.

Plants: bend = clamp(cur mag/300,0,1) toward hole direction + sway. Plant draw as quadratic segments with lean.

Shards: spawn on breach:
```
for(i<16){ shard at hole area with random offsets, vx = 60+R()*250 (outward), vy=-100+R()*200, rot, vr, r=4+R()*7, pts = triangle }
```
Update: 
```
inWater = (s.x<TANK.r && s.x>TANK.l && s.y>S.water && s.y<TANK.b)
g = inWater? G*0.28 : G; drag: s.vx*= (1-(inWater?3:0.15)*dt); vy similarly; also buoyancy up force if inWater.
floorY = (s.x<TANK.r-TANK.g&& s.x>TANK.l)? TANK.b-TANK.g : FLOOR - puddleDepth(s.x)*0? shards landing in puddle sink to floor.
if s.y+s.r> floorY: s.y=floorY-s.r; s.vy*=-0.25; s.vx*=0.6; s.vr*=0.5; if |vy|<20 → resting, vr decays.
```
Also collide with tank right wall exterior? Shards thrown right pass through hole region; those moving left inside tank stay. Fine. Also clamp x within [4, W-4].

Shard-shard collision: simple loop pairs, if dist<r1+r2 push apart & damp. n=16 → cheap.

Now, water rendering with falling level and the hole: draw water rect clipped inside tank; the hole in the wall — draw water bulging out? The jet particles handle it.

Also draw streams inside tank near hole converging (streak lines) for visual clarity.

Puddle drawing: path along columns' top surface from tank right to right wall down to floor. Fill with translucent blue; add highlight.

Also droplets in air drawn as small ellipses.

UI status: show water level %, jet speed, escaped volume, fish swept count.

Now write it. Also handle pointer events: pointerdown near crack handle (dist<20 to (TANK.r, crackCy)) or along crack line → dragging=true. pointermove updates cy clamped. pointerup ends.

Disable dragging after breach (but Reset re-enables).

Breach button: if !breached → doBreach(): breached=true, t=0, spawn shards, spawn initial burst droplets, set status.

Reset: S = makeState().

Also allow keyboard? no.

Let me write the HTML/CSS with a nice dark room aesthetic.

Write the file now.

One more thing: "Let the user drag a visible crack vertically on one side below the initial waterline" — clamp: cy - HOLE_H/2 > WATER0 + 8; cy + HOLE_H/2 < TANK.b - TANK.g - 8.

Also the crack is visible as a jagged line on the glass before the breach.

Now code.

For plant drawing: draw stem from base upward with segments offset by lean that increases with height.

Fish drawing: body ellipse, tail triangle wagging, eye. Rotate to velocity direction when swept/landed.

Let me write it.

I'll write the whole file then test in browser.

Careful with water surface drawing: 
```
ctx.beginPath();
ctx.moveTo(il, surf);
for x from il to ir step 8: y = surf + sin(x*0.05 + t*3)*2 (bigger amplitude near hole when flowing, and dip near hole)
```
Add dip: near hole, lower surface slightly: if flowing, y += 6*pow(max(0,1-|x-hx|/120),2).

Let's code.

Also the initial water should have subtle caustics; skip.

Time to write.

I'm starting to write the index.html file.

There's a bug: `t.y_target()` in updateToy — leftover. Let me remove that line. Also check other issues.

Let me fix and then test in browser.

Also doBreach sets S.holeCy via S.clampCrack (undefined) — fix that line: it falls to S.crackCy anyway, then clamps. Remove the weird line.

Now test in browser.

I don't have a browser tool in this environment (tools: read, bash, edit, write). The system prompt mentions browser tools but they aren't in my function list. So I can only verify via node-based checks: syntax check the JS by extracting it and running with a stub DOM/canvas? That's heavy but feasible: use node to parse the script (syntax check) and maybe run a headless simulation with a fake canvas context.

Let me check if node is available and whether any headless browser exists.

Playwright is available. Check if browsers are installed.

Chromium launches. Let's write a test script using playwright: load file, screenshot initial, drag crack, breach, sample outflow, screenshots, reset.

Time is short. Run the test quickly (it takes ~25s). Then fix essential issues and finish.

Mostly working. Issues:

1. Water drains but never stops? At "DRAINED" water=481, flow=69. Hole at 456 ± 37 = [419,493]. So water reaches 493 then stops. Fine — it stops when water no longer reaches opening. Water 481 < 493 still flowing slowly. OK.

2. Reset: fish positions differ from initial because I compare after ~1s of sim (fish swim). The initial st0 was sampled after 1.2s of swimming too. So positions naturally differ — that's expected since fish swim continuously. But "Reset restores the same initial scene" — the state variables are re-created from the seed; the difference is just elapsed animation time. Ideally Reset also resets T=0 (it does) — but fish positions diverge because the sim ran before capturing st0. Actually reset sets T=0 and identical seeded positions, then they swim. So scene is identical at t=0. To make it verifiable, fish wander uses Math.random() in turnT — fine. It's acceptable; but to strengthen "same initial scene", positions at reset time are the seeded ones. Good.

Hmm, but st0 fish were sampled at 1.2s and after reset sampled at 0.9s — different. Not a bug. I could verify by evaluating immediately after reset. Minor.

3. Toy got carried out — yes "puddle". Good.
4. Fish: 2 landed (swept out), others swam against current (they moved left toward IL). Good.
5. Jet curves: vy grows from 348 to 480 while vx decreases → parabola. Good.
6. Waterline falls continuously: 232→249→262→... yes.
7. Puddle max only 6.1 px — quite shallow. Escaped volume is huge though. The deposit factor r²*0.30/BIN is too small. Let's increase deposit so puddle visibly spreads: factor 0.30 → 1.6, and check puddle stays within walls. Also spread rate fine.

Actually the visible puddle depth of 5 px is barely visible. Let me boost: S.cols[c] += (p.r*p.r*1.5)/BIN. With r~2.7 → 7.3/8 ≈ 0.9 px per drop, ~100 drops/s → 90px/s locally, diffusing. Over ~8s → large. Might overflow the floor? Total volume: escaped ~ IW*(IB-...) let's compute: level falls 232→493 = 261 px * 374 width = ~97,600 px² of water. Puddle area from 562 to 946 = 384 px wide; if all water went there, depth = 254 px! That would flood the room. So we need to cap: droplet deposit volume must be much less than the jet's actual volume (most spray "evaporates"/leaves). Currently deposit ≈ 6 px deep, meaning ~95% loss. That's physically inconsistent but visually sane.

Compromise: deposit factor that gives a decent puddle (say 20-40px deep) while remaining plausible. Use factor 0.30 → 1.2, giving ~24px. And optionally let excess spill... Keep simple: bump to 1.2 and cap column height at 90 to avoid absurd flooding, with excess discarded.

Also visual: puddle should spread leftwards too, but tank blocks. Fine.

8. Shards: 20 shards present; check they settled. Let's look at screenshots quickly.

Time is short (~4 min). Let me make the deposit change plus cap, then quickly view one screenshot to confirm rendering, then finish.

Also add: crack clamp min uses WATER0 fixed — good.

Let me edit and run a fast screenshot check.

I'm checking the screenshots from the previous run to see the current rendering state, then I'll do a quick test with the new settings to verify the puddle looks right. I also need to confirm that the reset function properly clears everything back to the seeded initial state, so I'm writing a fast test script to validate both.

Reset restores the same seeded scene; tiny differences are only from a few ms of fish swimming between snapshots (T=0.04 vs 0.13). Water level, crack, toy, puddle, shards, drops identical. Good enough.

Everything works: waterline falls 232→487 and flow stops (hole bottom 507), puddle 29.6px deep and spread, 2 fish swept out and landed, toy carried out into the puddle, 20 shards.

Let me quickly view screenshots n1/n2 to check visuals.

I can't view images (read tool supports images — yes it does: "Supports text files and images"). Let me read n1.png and s1_initial.png quickly. Time is very short (~2 min). Do it in one call each — parallel.

The rendering looks good: the jet curves downward, water droplets, the spreading puddle, the swept-away fish, glass shards on the floor, plants, fish, floating toys. One issue: the jet's core polygon extends below the floor (a gray band beneath the floor line, around x~740-830, y~690-730). The jet core path is drawn beyond the floor — it should be clipped at the floor/puddle surface. Also, the jet core appears to punch through the floor. Fix: clip the jet drawing to the region above the floor (ctx.save; clip rect 0,0,W,FLOOR+2).

Also, the puddle on the right side is visible. The fish is on the floor. Good.

Quick fix: wrap drawJet's core and water droplets in a clip? The water droplets are removed upon collision so no problem; the core needs clipping. Add clipping to the top of drawJet: ctx.save(); ctx.beginPath(); ctx.rect(0,0,W,FLOOR); ctx.clip(); ... restore at the end.

After that, done — final save. Time is nearly up; make the edit and finish without re-running the full test (low risk). Maybe I should do a simple syntax check with node --check on the extracted script? The edit is small; execute it and finish.

Quickly verify with a fast headless run that there are no errors and that the clip is working (screenshot at around the 1.5-second mark). Only about 1 minute left. Run the minimal check.