Aquarium breach · glm-4.7-flash

Let me build this in one file. I'll design the simulation carefully but efficiently.

Plan:
- Canvas ~1200x800 room: floor, walls, tank (glass tank with water), sand floor inside tank, rocks, plants, fish, floating toy.
- Crack: user drags a visible crack handle vertically on right side of tank below initial waterline.
- Breach button: panel breaks, hole appears, water jets out (parabolic stream particles), water level falls, outflow weakens near hole level.
- Puddle spreading on floor constrained by walls.
- Objects physics: buoyancy (rocks sink to bottom, toy floats, fish swim, plants bend), current near hole pushes objects, some fish get swept out, glass shards rotate and fall.
- Reset restores initial scene (deep copy initial state).

Implementation approach: particle-based water for the jet and puddle (simple ballistic particles that become puddle when hitting floor), plus a water level scalar for tank. Objects: circles with position/velocity; buoyancy force if submerged relative to tank water level; drag proportional to water velocity (current field ~ flow toward hole).

Fish: simple AI swim with velocity, pushed by current; if fish within hole region, swept out (remove from tank, becomes free body falling).

Glass shards: spawned on breach around hole, particles that rotate, gravity, buoyancy drag in water.

Let me write it. Keep code organized but concise. Time budget 15 min.

Key geometry: canvas 1200x800. Room floor at y=720, walls at x=60 and x=1140. Tank: x from 260 to 700, base y=720, top y=300 (tank height 420). Glass walls thickness 8. Initial waterline y=420 (water surface). Crack draggable vertically on right side wall between y=430 and y=690 (below initial waterline). Crack drawn as jagged line; hole rect ~60 wide (opening in right wall) height maybe 70.

Physics tick dt fixed.

Water: tank water level surfaceY (starts 420). On breach with hole at holeY (center), outflow rate proportional to sqrt(max(0, surfaceY... depth = waterLevel - holeTop)). Water level falls; flow stops when surface reaches hole top.

Jet: spawn particles at hole with velocity vx = outflow speed * dir (rightward), vy small; gravity curves them down. When particle hits floor y=720 or puddle surface, become puddle mass. Puddle: pool spread from tank base outward both directions? Tank is against nothing—room floor. Puddle spreads from impact x outward; track puddle as segments? Simpler: puddle as set of "puddleRect" from tank right side to walls? Let's model puddle as a list of columns (like 1D shallow water): array over x of height. Simple approach: puddle is height field h[i] on floor columns between walls; particles add volume at impact column; each frame diffuse: h equalizes toward neighbors with flow constraint. Height field with walls at ends keeps in. Draw as filled polygon on floor. Volume conservation.

Current in tank: near hole, water velocity toward hole; objects experience drag force F = k*(vWater - vObj). vWater field: radial toward hole within some radius, magnitude decreasing with distance. Fish swim against current (apply swimming force opposing current) but capped; if current exceeds threshold, fish swept (no longer swim, just drift), can be carried out through hole if fits: fish size < hole size → pass through when near hole and moving toward it; then free body outside, gravity, falls into puddle, flops.

Toy floats: buoyancy keeps it at surface; bobbing. Rocks: density > water, sink, rest on floor; current drags them slowly along floor? They can be pushed a bit.

Plants: anchored at base; bend by current — draw with bend angle proportional to current; on strong current drift a bit (uproot and become free body drifting out through hole if fits?). Spec says "plants bend or drift". Bend is enough; maybe uproot if very strong.

Movable objects that fit the opening carried out by flow: fish and toy and glass shards; rocks too heavy mostly stay (drag smaller). If rock small, could be pushed out. Keep toy: when water level falls below toy, toy falls to floor, then if current near hole... after water drains current stops; toy could be swept out while still in water with strong current — allow toy to be pushed toward hole and out.

Objects out of tank: gravity, collide floor with bounce, drag in puddle (dampen), buoyancy float in puddle if buoyant (toy floats on puddle!). Nice.

Glass shards: on breach, spawn ~14 shards around hole (both on inside and at panel). They rotate, gravity; inside water experience resistance (drag), outside fall and bounce on floor/puddle.

Breaching visual: panel around opening breaks — draw tank right wall with a gap (hole), plus initial shards burst.

Let me structure:

State:
- t, dt
- tank: {x0,x1,top,base,wallW, intact:true, breach:false, holeY, holeH}
- water: {surfaceY, initialSurfaceY}
- objects: array {type:'rock'|'toy'|'fish'|'plant'|'shard', x,y,vx,vy,r, angle, angVel, buoyDensity, anchored...}
- fish have swim state: 'calm'|'fight'|'swept'
- jet particles array, puddle height field.
- UI: crack handle drag (mouse), Breach, Reset buttons.

Waterline falls continuously: outflow rate = C * holeArea * sqrt(2*g*depth) → volume per sec; convert to surface drop: dSurface = Q / (tankWidth). Jet particle spawn rate proportional to Q. Jet speed at hole = sqrt(2 g depth) scaled.

Puddle height field: columns width 8px from wall to wall. When particle lands, add volume/h depth to nearest column. Diffusion each frame: for each column, flow to lower neighbors limited by available height; simple: newH = average with neighbors weighted; but keep conservation. Simple relax: for i, d = (h[i-1]+h[i+1])/2 - h[i]; h[i] += 0.3*d... plus clamp min 0. Conservation approximate; fine.

Also puddle shouldn't flow into the tank? Tank bottom sits on floor; puddle spreads around it — treat tank footprint columns as blocked (height excluded, but water accumulates against left wall of tank). If tank is breached from right side, puddle spreads right until room wall, then left past tank... The tank base occupies columns tankX0..tankX1; mark blocked, puddle can't occupy. Water arriving left side? Jet goes right so puddle mostly right. Fine.

Drawing: room background, floor, tank glass (semi-transparent), water fill with wavy surface, sand, rocks, plants (quadratic curve bent), fish (ellipse + tail, angle), toy (beach ball with stripes), shards (polygon), jet (circles with trail), crack (jagged polyline) pre-breach, hole post-breach.

Crack drag: pre-breach, draw crack on right wall at crackY with handle; mousedown near handle → drag vertical clamped between waterInitial+10 and base-40. Spec: "drag a visible crack vertically on one side below the initial waterline". Default crack at some position.

Fish details: fish r ~10 (fits hole 70 height easily). Fish swim: wander with target direction changes, speed ~40px/s; buoyancy neutral (density ~ water, slight). When breached: current pulls; fish tries to swim against (force opposite current up to maxFishForce); if current > threshold, fish 'swept' flag: stops fighting. When fish near hole and pushed outward, becomes escaped (outside tank), then gravity.

Current field: vW(p) = dir toward hole, magnitude = Q/(area at distance?) — simple: mag = k * flowStrength / (dist^1.2), capped, only within tank water and dist < some range; direction toward hole center.

Toy: buoyant density 0.4; buoy force proportional to submerged fraction → floats at surface with bobbing; wave bob: add small sinusoidal. When current strong, drag moves it toward hole; when reaches hole and pushed out → outside.

Rocks: density 2.5, rest on floor; drag force smaller (mass ∝ r^3) — they may slide slightly. That's fine: "rocks sink" — they're already sunk at bottom; give initial state rocks resting on floor.

Glass shards in water: drag high, sink slowly, rotate with angVel from collisions. Collisions: simple pairwise circle collisions for shards maybe skip pairwise except floor; "Glass fragments rotate, collide" — implement simple shard-shard elastic-ish collision among shards (they're small circles). OK do circle-circle collision for all free bodies pairwise (n small ~ 25 objects). Fine.

Buoyancy in puddle: objects outside tank: if y in puddle, buoyancy based on puddle height. Toy floats on puddle, rocks sink, shards sink.

Plants: anchored base at sand; segments drawn as curve; bend angle = clamp(currentMag * factor). Draw 2-3 plants with leaves. If |current| > bigThreshold: uproot → free body with density ~0.9, drifts out hole possibly. Keep simple.

Breach animation: hole appears with shards burst; brief screen shake maybe. Also tank glass right wall drawn with gap.

Outflow weaken: depth = surfaceY - (holeY - holeH/2)?? Actually water above hole top. flowQ ∝ sqrt(max(0, surface - holeTop)). Stop when surface <= holeTop. Also draw remaining water below surface — hole below waterline will drain down to hole top. Good.

Reset: store initial objects via a function makeInitialObjects() returning fresh array; reset state to pre-breach with same crack position? Spec: "Provide Reset to restore the same initial scene." Ambiguous; I'll restore initial scene including crack at default? "same initial scene" — restore scene; keep crack where user placed or reset to default? I'll reset crack to default position too — safest: restore everything to initial including crack default. Hmm, but user might want to keep crack placement... "restore the same initial scene" → full reset. I'll reset crack to default.

Buttons as HTML DOM outside canvas? Task says single-page app on canvas; I'll put control bar as HTML buttons above canvas, styled. That's fine (still one file).

Let me write the code now. Careful with size but be thorough.

Coordinates: W=1200, H=800. floorY=730. wallL=50, wallR=1150.
Tank: TX0=280, TX1=660, wall thickness 10, glass top... tank top open (typical aquarium) — draw open top with rim. tankTop=290 (glass height), base=floorY. Water initial surface = 400. Sand at floorY up to 715 inside.

Crack: on right wall x≈TX1+5, crackY default 560, draggable y ∈ [420, 690].

Hole height 80, so hole spans crackY±40.

Fish initial: 4 fish at various positions in water. Rocks: 3 on floor. Plants: 3 anchored on sand. Toy: 1 beach ball floating at surface.

Jet particles: spawn at hole (x=TX1+10, y=holeY) with vx = 180+speed*, vy=~-20..20 random; gravity 900. Particle die when y >= floorY or hits puddle; add volume to puddle.

Puddle columns: from wallL to wallR, colW=6 → ~183 columns. Blocked columns where tank footprint (TX0-… TX1+10) → set blocked flag; also tank shards? fine.

Puddle render: fill path along top of columns, sand color blue translucent.

Water in tank render: from surfaceY to floorY within glass interior, with sine wobble on surface.

Current computation each frame for objects: function waterVel(x,y): if breached and inside water: to hole: dx = holeX - x... hole at right wall; current direction toward hole exit, magnitude = flowMag * exp(-dist/350)? Use dist scaled. flowMag ∝ current outflow rate.

Fish fight: fish.v += -waterVel * fightK (opposing), capped speed. If |waterVel| > 55 → swept=true (some fish). "some are swept": threshold varies per fish (tolerance random 40–90) → some fight, some get swept. 

Swept fish: just drag with water: v = lerp toward waterVel.

Escaping through hole: if object center within hole rect (x > TX1 and |y-holeY| < holeH/2 - r) and vx>0 → move outside, mark inTank=false. Then outside physics.

Also while water level above, hole flows out; objects near hole get pushed strongly (vW large near hole) → they exit.

Collision with floor for outside objects: bounce with restitution 0.3, friction.

Shard-shard collisions: pairwise for shards only, simple impulse. Also all objects collide with tank glass walls while inside (keep within interior). Rock vs floor inside tank rest.

Let me now write. I'll aim for ~600 lines. Then test in browser.

Buoyancy details: submerged fraction f = clamp((objBottom - surface)/(2r),0,1) for inside tank water. Force up = f * ρ_water_effective * g vs weight = density*r^3*g → net a = g*(f/density - 1)? Let's do: a_y = g - buoyUp, buoyUp = g * (f * (1/density)). Simulate per object type: rock density 2.6 → buoyancy insufficient, sinks. toy density 0.35 → floats strongly. fish density 1.0 → neutral, plus fish maintain depth with small control. shard density 2.4.

Drag in water: a += (vWater - v) * dragCoef(type). rock drag low (heavy), shard high in water (resistance), fish medium.

Toy bobbing: when floating at surface, add sinusoidal vy wiggle via buoyancy oscillation? Just set y target near surface + sin(t)*2; simplest: buoyancy naturally oscillates; add small wave force.

For plants: not physical objects; array plants {x, baseY, height, sway phase, uprooted?}. bend = sum of current at their mid points.

Time to write the file.

UI: header with title, buttons Breach, Reset, and hint text "Drag the crack".

Mouse handling on canvas: pointerdown/move/up. Crack handle hit radius 25 around (crackX, crackY).

Post-breach clicking does nothing except maybe stirring? Not needed.

Draw order: room bg, puddle, tank back (sand), objects inside water (clipped to water region? no), water overlay translucent, plants, tank glass front with hole/crack, jet particles, shards outside, escaped objects, floor.

Actually objects inside should be drawn under a slight water tint overlay; simpler: draw water translucent first then objects then glass. Water translucent blue, objects visible through. Fish under water look fine.

Sine surface: surfaceY + 3*sin(x*0.05 + t*2).

Breach visual: when breach triggered, also spawn burst shards and shockwave; screen shake 0.3s.

Let me write code.

Flow computation:
depth = surfaceY - holeTop (holeTop = holeY - holeH/2)
if depth>0: speed = sqrt(2*G*depth) * 0.5 (scaled, px/s). G=600 maybe. depth up to 400 → sqrt(2*600*400)=~693 *0.5 = 346 px/s. ok.
Q ∝ speed * holeH. surface drop rate dS = Q / tankInteriorWidth * scaleFactor → choose so tank drains in ~20-25s: interior width 360. If dS = 6 px/s initially at depth 160: speed ~ 257... let me directly set dropRate = 0.9 * speed * holeH / 900? Compute: speed at depth160 (sqrt(2*600*160)=438, *0.5=219) * holeH80 = 17520; /360 width = 48 px/s drop — too fast maybe. Scale factor 0.35 → 17 px/s. Tank from 400 to holeTop 520 = 120px → ~10-15s with decreasing rate. Fine, tune factor 0.3.

Jet particle spawn: rate ∝ speed; each frame spawn n = speed/40 particles. Particle initial vx = speed (to right), vy = -30..30, plus gravity. Particle volume each = dropRate-derived volume / spawn rate — just fixed small volume each; conservation approximate is fine.

Now water volume conservation between tank and puddle: tank volume V_t = (surfaceY - tankBottomWaterlineMin?)... water occupies from surfaceY to floorY-15(sand). When dropRate*frame removes volume, puddle gains via particles; particles carry volume pv; choose pv so total consistent: V_removed per frame = dropRate*interiorW*dt. Particles spawned = speed*k per frame... Set pv = dropRate*interiorW*dt / spawnCount. Fine, compute per frame.

Edge: also initial burst water when panel breaks.

Let me write.

Fish rendering: body ellipse rotated to velocity angle, tail triangle, eye.

Toy: circle with colored stripes (rotating slightly).

Rock: gray polygon blob (fixed vertices per rock).

Plant: stem from base with quadratic bend, leaves.

Shard: triangle polygon with random vertices, angle, angVel.

Collision handling for free bodies: floorY collision (y + r > floorY → bounce), walls. Inside tank: bounds TX0+wallW+r .. TX1-wallW-r horizontally... while inside and intact or breached (left wall intact; right wall breached above/below hole? hole lets through). Simplify: while inTank, if x + r > TX1-10: if breached and |y-holeY| < holeH/2 - 4 → pass to outside; else clamp & bounce. Similarly left wall clamp always. Top: if y - r < tankTop → clamp (glass above? open top: water surface near top; objects could jump out over rim? just clamp below rim).

Fish escape check: fish passes when overlapping hole → set inTank=false, x continues.

Now objects that fit opening: holeH 80 → fish r10, toy r14 fit; big rock r 22: 44 < 80 fits, but heavy → maybe rarely. ok.

Puddle buoyancy for outside: local puddle height h at x; if y + r > floorY - h: submerged fraction; buoy/drag same functions with "water" = puddle.

Toy floats on puddle → nice.

Fish outside: flops on floor (random small jumps), lives in puddle (swims slowly toward deeper?). Simple: outside fish have flop behavior: if in puddle, wiggle/swim slowly; else hop occasionally.

OK write code now. Also crack drawn pre-breach: jagged line with glowing handle; cursor grab.

Additional: before breach, crack is "visible crack" — user drags it. On Breach, panel around opening breaks: animate right wall panel piece falling? Spawn 2-3 big panel fragments that fall. Nice touch: panel fragment = bigger shard rectangles falling with rotation. Include as shards with bigger size.

Write file.

Screen shake: offset canvas translate during 0.4s after breach.

Code sketch:

const cvs, ctx; W,H.
state = { phase:'intact'|'breached', crackY, ... }

makeInitialScene(): returns objects array.

objects each: {kind, x,y, vx,vy, r, angle, angVel, density, drag, inTank:true, seeds for shape, fishTol, swept, color...}

Plants separate array with anchor.

Puddle: puddleH = new Float32Array(NCOLS); colX mapping; blocked array.

Main loop with rAF, dt clamp.

Physics step:
1. compute flow: if breached: depth..., outflowSpeed, dropRate; surfaceY += dropRate*dt (down = increasing y); clamp ≥ holeTop. When surface reaches holeTop → outflow 0 (trickle stops). Jet spawn while outflow>threshold.
2. spawn jet particles; update particles (gravity, move); land → puddle add.
3. puddle diffusion.
4. update objects: forces (gravity if not submerged-support...), buoyancy, drag with waterVel field (tank current if inTank & submerged; puddle if outside), fish AI, integrate, collisions (walls/floor/hole pass), pairwise shard collisions.
5. update plants bend.

waterVelTank(x,y): if phase breached and flow>0 and inside water: vector toward (holeExitX=TX1+20, holeY); d = dist; mag = flowSpeed * 2500/(d*d+3000)?? Let's use mag = flowSpeed * min(1.6, 160/ (d*0.35+30)). Hmm just: mag = flowSpeed * clamp(200/(d+60), 0, 1.2). At d=0 →1.2*flowSpeed; d=200 → 200/260=0.77. Wide influence; ok, current reaches across tank.

Fish AI: desired swim direction changes every 1-2s; fish v approach dir*swimSpeed(45). If current mag > tol → swept=true permanently. If swept: v approach waterVel. If fighting: v approach dir*swimSpeed but add current drag partial (they get pushed some): v += (waterVel)*0.3*dt... combine: v = lerp(v, dir*sw, 2*dt) + waterVel*0.5*dt (pushed while fighting). When fighting fish near hole, waterVel huge → pushed out anyway eventually; good "initially swim against current before some swept".

Toy: buoyancy → floats; current drag moves it toward hole; once near hole pushed out. When water falls below hole, current stops; toy floats on remaining water; when water drains below toy... water stops at holeTop; toy floats on remaining water above holeTop. That's fine — tank keeps water down to hole top. Toy could be swept early while flow strong: current near hole strong, toy dragged to hole, exits. Good — "movable objects carried out by flow".

Rocks: drag small → barely move; small pebble maybe slides. fine.

Objects outside: gravity g=900; drag in puddle; floor bounce; wall bounce. Fish flop.

Plant uproot: if current mag > 130 and random → uproot: convert to object kind 'plant', density 0.85, drag high, free body drifts, can exit hole (fits). Draw plant body horizontally? Just draw as blob cluster. Keep simple: draw as tangle.

Alright, writing now.

Shard burst on breach: create ~16 shards around hole: positions along hole edges, random v outward (both into tank and out), angVel random. Plus 2 big panel fragments.

Also crack visible pre-breach: draw zigzag.

Buttons: breach disabled after breach; reset always.

Let me write the final file.

Also "sample the early outflow" — verification is for me via browser screenshots.

Draw glass: front pane translucent stroke; right wall post-breach: draw with gap (two segments) around hole.

Water inside tank: fill rect from surface to floorY-sandH with interior x range TX0+10..TX1-10. Sand: tan fill height 15 at bottom. Rocks sit on sand.

Clip objects drawing to tank interior? Objects inside tank bounded anyway. Skip clip.

Let me write it. I'll be careful with the puddle blocked columns: tank base from TX0-10 to TX1+10. Puddle columns inside blocked → h=0 always. Jet lands right of tank: impact x ~ TX1 + range; if impact x within blocked, shift to nearest free column.

Puddle spread: diffusion moves water left until tank wall (blocked columns have h=0 and can't receive) — water piles against tank right base. Good.

Also puddle drawn after tank? Puddle is on floor; draw puddle then tank (tank base occludes). Draw order: bg, puddle, tank interior (sand, water, objects), tank glass, jet, outside objects. Jet particles above all.

Volume check: tank initial water volume = (floorY-15 - surfaceY)*interiorW ≈ (715-400)*360=113k px². Puddle covering floor from TX1+10 to wallR: ~480 px wide, plus left area ~220 → total free floor ~700px; height avg 113k/700 ≈ 160px — too deep! Puddle would be huge. Hmm, physically water column of tank ~360 wide vs room floor ~1100 wide → depth ratio ~3. Puddle 160px tall looks like a flood — actually realistic-ish but visually absurd? It's a 1:1 conservation; real aquarium spilling would flood like that. But visually maybe reduce initial water: surface at 400, tank base at 730: 315px water * 360 = 113k. Room floor width 1100. Puddle avg height ~100+. That's a lot. Options: narrower tank (TX0=340, TX1=580: 240 wide → 75k → /700 ≈ 108px) still deep. Or shallower water: surface at 470 → 230*240=55k → 80px avg. Still big. Alternatively let puddle spread beyond room walls? No—constrained by walls.

Maybe raise room scale: canvas 1200 wide; tank narrower and shorter: tank from y 480 (top) base 730; water surface 520 → 195px * 240 = 47k → puddle avg 65px. Acceptable — a big flood is dramatic and consistent. Also puddle only spreads right initially then left around? It will spread both directions away from impact and also under? blocked under tank. Left region floor from wallL to TX0-10 ~ 280px also gets water only if diffusion pushes past... water can't get left of tank since tank blocks (water can't go around because floor continuous but blocked columns are tank footprint which sits on floor — water flows around edges? In 2D side view, no around). So puddle only right side: width ~ 1150-590=560 → 47k/560 ≈ 84px deep. OK dramatic but fine.

Alternatively allow some water loss (splash evaporation) — no, keep conservation.

Hmm, actually tank interior width 240 with height 250 — decent aquarium. Crack on right wall below waterline: crackY range [530, 690], default 600.

Waterline initial 520. holeTop min = crackY-40 ≥ 490 < 520 ok. "below the initial waterline" — crack must be below 520; clamp crackY ≥ 535.

Tank top at 470, water at 520, base 730. Fish swim between 530-700.

Jet from hole at (TX1+? , crackY): speed sqrt(2*600*depth)*0.5; depth ~ 520-560?? wait holeTop = crackY-40 = 560, depth = 520-560 <0 → no flow! Crack below waterline means crackY (center) > 520 → holeTop = crackY-40 could be < 520 if crackY < 560. Default crackY=570 → holeTop=530 < 520? No: 530 > 520 → no flow. Hmm.

Waterline y=520 means water fills 520..730. Hole at crackY with top edge crackY-40. Flow needs holeTop < surfaceY: crackY-40 < 520 → crackY < 560. So crack range [525, 555]?? That's tiny range. Better: hole smaller height 50 and crackY range [520+10, 690] with flow condition based on crackY (center) vs surface: allow crack center below surface but hole top slightly below? If crackY=600, holeTop=575 > 520 → no flow. But user expects crack below waterline to drain. Physically water drains until level = hole top. If hole top is below the tank bottom? can't.

Fix: make water deeper or hole positioned by its TOP at crackY. Let crackY denote the top of the crack. Range: surfaceY+5=525 to 680. holeTop = crackY, holeBottom = crackY+holeH. Flow while surfaceY > crackY. With crackY=540, drains 20px then stops — weak. With crackY=680: drains from 520 to 680: 160px of 210 → good drain.

Hmm but visually hole near bottom drains most. Fine — user choice matters. But the jet: at crackY=680 (near floor), depth 160, good jet. Default crackY=640.

Also drain leaves water below hole (from holeBottom to 715) → puddle keeps some. Total drained volume = (surfaceY_final... ) (520 - holeTop)*interiorW. With holeTop=600: 80px*240=19k → puddle avg 34px. Nice.

Also spawn rate etc. Good.

holeH=50. Fish r=11 → fits (50>22). Toy r=13 fits.

Tank: TX0=340, TX1=580, wall 10, top 470, base 730. Sand 15.

Now write.

For the fish being "swept through the breach": fish near hole when flow strong gets vx>0 through. Current mag near hole = flowSpeed*1.2; flowSpeed up to ~ sqrt(2*600*120)*0.5 = 380*0.5=190... wait sqrt(144000)=379, *0.5 = 190 px/s. Hmm jet speed 190 px/s modest; increase scale to 0.8 → 300. Jet gravity curves visibly. ok.

DropRate: speed*holeH*0.35/interiorW: 300*50*0.35/240 = 21.9 px/s at depth 160. Drains 80px in ~5s. Good pacing.

Puddle particle volume: per frame volume = dropRate*interiorW*dt; particles per frame = speed/45 (~7); pv = volume/nParticles.

Let me code it.

Also initial crack: default crackY=640, draggable [surfaceY+15, 680].

Post-breach hole: holeY center = crackY + holeH/2. For current field target point: (TX1, crackY+holeH/2).

Pass-through condition: x+r > TX1-8 and y within [crackY-6, crackY+holeH+6] and vx>some → outside. Objects smaller than hole pass; check r < holeH/2 - 4.

Now fish inside tank shouldn't pass through glass above hole: handled by clamp except hole region.

Write the code.

One more: fish drawn with heading = atan2(vy,vx); when calm swim horizontal-ish.

Let me finally write the file.

function step(dt):
 if phase==='breached': update flow, jet, puddle, objects, plants
 else: idle animations (fish swim, toy bob, plant sway gentle), toy bob.

I'll unify: always run object physics; current only when breached.

Fish calm: wander.

Toy pre-breach: floats at surface with bob.

Let me write everything now, then test.

Rendering the hole in the right glass: glass right wall drawn as rect from (TX1, 470) width 10 height 260 with gap [crackY-4, crackY+holeH+4] post breach; pre-breach full with crack zigzag drawn on it.

Panel break effect: shards spawn; also draw hole edges jagged (dark).

Okay code:

```js
const W=1200,H=800, FLOOR=730, WL=50, WR=1150;
const TX0=340,TX1=580,TTOP=470,TBASE=FLOOR,SANDH=16,IX0=TX0+10,IX1=TX1-10;
const HOLE_H=50;
const G=900;
```

Objects list & plants. Functions.

I'll write the whole thing in one go.

Also crack drag: pointer events; store crackY in state; during intact only.

Buttons: #breachBtn, #resetBtn.

Draw UI hints on canvas: "drag the crack" arrow near crack pre-breach.

Time to write.

For plants: plant = {x, h (60-90), phase, bend:0, uprooted:false, obj:null}. Bend target from current at (x, FLOOR-SANDH-h/2). Draw stem as quadratic from (x, baseY) control (x + bend*0.5, baseY - h*0.6) end (x + bend, baseY-h); leaves as small ellipses along.

Plant uproot → becomes object kind 'weed' drawn similar but free.

Fish object fields: kind:'fish', tol, swept, dir (angle target), timer, hue.

Write now. Also ensure fish stay in water: fish y clamp within [surfaceY+5, FLOOR-SANDH-r]; fish do swim control including depth preference.

Escaped fish: if puddle h at x > 6 → swim slowly in puddle toward deeper side; else flop: hop with random impulses occasionally.

Toy outside: floats on puddle.

Rock outside: sits.

Shard outside: rest, rotate to settle? just stop angVel on floor contact eventually.

Alright, writing the file for real.

Volume: track also initial burst spawn.

Edge case: after water stops (surface == holeTop), jet stops, current zero; remaining fish calm? They're in leftover water; keep them wandering (or swept stays). Fine.

Now write.

I'll write code with reasonable compactness but readable. Then browser test: reload, screenshot; click breach; screenshots at intervals to check jet curvature, waterline drop; reset check.

Pairwise collisions: only among shards + free objects outside; skip inside-tank pair collisions except shards. Actually implement pairwise for all movable objects when both outside OR both shards. Fine.

Let me write.

Test in browser.

Screenshots not supported ("model does not support images"). I need to verify via DOM/console inspection and programmatic state checks. I can use browser inspect + evaluate JS? The browser tool has inspect action which returns DOM/console. I can't run arbitrary JS... Maybe I can use click actions and check console output. Let me add console.log diagnostics temporarily? Better: use `inspect` to see DOM. But canvas state isn't in DOM.

Alternative: I can verify physics via console logging. Let me add a temporary debug hook: window exposing S and step, and log key values at intervals triggered by actions. Actually I can use the `type`/`key` actions... those target DOM. Console output only shows warnings/errors currently.

Plan: add a small debug snippet (via editing file temporarily or permanently harmless) that logs state on breach and at intervals. E.g., after breach, setInterval logs surface, flow, puddle total, object positions for a few seconds. Keep logs limited.

Also I can simulate crack dragging programmatically? The requirement says user drags; I can dispatch pointer events via script for testing — but I can't execute arbitrary JS via the browser tool. Hmm. The browser tool actions: click at coordinates — click dispatches pointerdown/up at position? Clicking at crack location could start drag but pointermove needed. I could support click-to-place crack: clicking near the wall moves the crack there (also satisfying "position the crack"). That helps testing: click at (585, 660) moves crack there. Then click Breach button (DOM click via browser click at its coordinates).

Add: on pointerdown near right wall below waterline, snap crack to click y (clamp). That's a nice feature anyway.

Add debug logging gated behind a flag (e.g., always log first 5 seconds after breach at ~1s intervals — a few logs, acceptable). Then use console output to verify jet curvature etc. Also verify no errors.

Let me edit.

Now click on the crack position: crack at x=585 (CRACK_X=TX1+5=585), default y=640. Click at (585, 660) to reposition crack, then click Breach button. Breach button is in header around x≈?? Header buttons: title at left, then Breach button, Reset, hint. Positions unknown exactly; click by coordinates 1200 viewport... the canvas is 1200 wide; buttons: h1 at left ~ x 60-230; breach button maybe x≈300-390, y≈25. Let me click at (345, 25). If wrong, nothing happens. I could inspect DOM to get layout? inspect returns DOM text. Let me just click Breach at a guessed position and check console for '[breach]' log.

The crack repositioned to 605 (clicked 660 → clamped? clamp max = FLOOR-HOLE_H-6 = 730-50-6=674; but crack snapped to 605? Hmm, click y=660 should set 660. Got 605? Maybe pointerdown fired at scaled coordinates... canvas may be displayed at some scale; the wrap is centered; header padding... Actually canvasPos accounts for rect scaling. 660 → maybe the click landed at different y due to the header height (~45px) offset: canvas top at y≈45+ in page; viewport y=660 → canvas y ≈ 615. Yes, header ~45px. So crack at 605-615. Fine — crack placed below waterline (520), good.

Breach triggered. Now check logs over time.

Bug: flow=0 because S.surface=520 but holeTop=605 → depth = 520-605 <0 → no flow! I set holeTop() = crackY, and flow requires surface > crackY. Surface at 520, crack at 605 → depth negative → no outflow. Wait — water fills from surface 520 down to 715. The crack at 605 IS underwater (water spans 520..715). But my flow condition compares surface level y (520) with crackY (605): surface y < holeTop y numerically means water level is ABOVE the hole on screen, but depth should be measured as holeTop - surface in y coordinates: depth = 605-520 = 85 px of water above the hole. I got the sign backwards!

Depth = holeTop - surface (since y increases downward). Flow while surface < holeTop. Water drains until surface reaches holeTop (i.e., level drops TO the hole top). Let me fix: depth = holeTop() - S.surface; flow while depth>0; S.surface increases toward holeTop.

Earlier in code: `const depth=S.surface-holeTop(); if(depth>0)` — wrong direction. Fix everywhere: jetSpeed uses depth; drop: S.surface += flow*dt (moves down toward hole top) — clamp S.surface ≤ holeTop. When surface reaches holeTop, stop.

Also check hole position: crack at 605 → drains 85px then stops. Fine for test but default drain maybe better lower. The clamp min is INIT_SURF+12=532. That's fine — user choice.

Also fix the drain-stop condition: `if(S.surface<=holeTop()+.5){S.surface=holeTop();...}` → now surface grows to holeTop: stop when S.surface>=holeTop()-0.5.

Also the water render: while draining, surface y increases — water remains above hole. Good.

Jet spawn y at crackY+random*HOLE_H; jet exits rightward from hole; that's under waterline? hole at 605-655, under water — jet goes out. Good.

Also `waterVelTank` condition: `y>S.surface` (submerged) fine.

Fix the flow code.

Flow now works: surf falling, jet vx=270 (rightward). But error "wx is not defined" — in stepObj, fishAI is called with wx... wait, in stepObj I declared `let wx=0,wy=0` — yes. fishAI references wx — it's a parameter of stepObj scope, fishAI defined outside but closure? fishAI is a top-level function, `wx` there refers to... fishAI(o,dt,cur) body references wx,wy which are not in its scope — they're locals of stepObj! So fishAI can't see them. Error thrown inside rAF loop. Need to pass wx,wy to fishAI.

Fix: fishAI(o,dt,wx,wy). Update calls and signature.

Now: surf falls 520→539 (dropping), jet particles exist (114 — growing too fast! jet particles spawn faster than they land, jetN accumulating). jetV = 262,401: vx rightward 262, vy 401 downward — gravity-curving jet ✓. But jetN=114 after 1s means particles aren't dying quickly — they should die on hitting floor. Jet starts at y≈605, floor at 730, vx=262: time to fall ~0.6s, travels 160px right — lands within tank-to-wall? Tank right wall at 580; jet lands ~740 x, before right wall (1150) → should land on floor. But wait — landing condition: `p.y>FLOOR-Math.min(gh,30)` — puddle grows, gh up to 30... but puddleVol=2672 total, spread → small heights. Should land at y=730. Hmm jetN=114: spawn rate ~6/frame*60 = 360/s... at steady state ~ 200 alive if they live 0.6s. Actually plausible-ish but high. Also all 4 fish out already at t+1s — a bit fast but "some are swept" — all four swept out is too many maybe. Fish tol random 42-97, current near hole huge. Fish near hole get swept fast. Acceptable but maybe tune so not all escape instantly: fish far from hole get less current; but current magnitude at d=200: 210/(270)=0.78*jetSpeed(262)=204 > all tol → all swept. Spec says "initially swim against the current before some are swept" — some should survive fighting. Reduce current falloff so distant fish experience less: mag = jetSpeed * min(1.3, 210/(d+70)) → at d=300 (far left), 210/370=0.57 → 149, still > tol. Make falloff sharper: mag=jetSpeed*min(1.3, 150/(d+50)) → d=100:1.0*262; d=300: 0.43→112 still high. Tol max ~97. Use tol up to 140 and falloff: 260/(d+140): d=100→1.08; d=300→0.58→152. Hmm.

Actually, current only applies while flow>0 and water above hole; fish far away also shouldn't get huge current. Let me use quadratic-ish falloff: mag = jetSpeed * clamp( (250-d)/250 ,0,1.2 )² maybe with exponent. d=0→1.2*jet; d=250→0. Fish start x 390-555; hole at 582; d from 30 to 200. With (1-d/250)^1.5: d=200→(0.2)^1.5=0.09→24 < tol → fights. d=30→0.95→249 swept. Good — fish near hole swept, distant fight. Also give sweep delay: fish swept when cur>tol sustained... simple is fine.

Also fish escaping too fast: all 4 out at 1s. With falloff, fish at x=390 (d~190) mostly fight and get pushed slowly; likely 2 escape, 2 survive. Good enough.

Also jet particle count high → spawn fewer: n = round(jetSpeed/70), and cap 8. And particle vy initial -25..50 fine. Landing: also give jet particles slight spread and check landing against puddle height properly (FLOOR - gh). Currently `FLOOR-Math.min(gh,30)` ok.

Also puddleVol=2672 after 1s vs tank water lost: flow 17.9 px/s * 230 width * 1s ≈ 4100 px². Particles spawned 1s: ~360 particles * vol; vol = flow*width*dt/n per frame... let me recompute: per frame, vol per particle = S.flow*(IX1-IX0)*dt/n. Sum over n particles = flow*width*dt → total volume = flow*width = 4117/s. puddleVol after 1s = 2672 — deficit because particles still in flight. OK consistent.

But wait: puddleVol 2672 px² spread over ~560 free width → 5px deep. Drain of 85px level → 85*230=19550 px² total → final puddle ~35px deep average. Good.

Fix waterVelTank falloff, fishAI tolerance spread, jet spawn count. Also check reset log after. Also the drag: pointermove handler for crack uses dragging flag; fine.

One more: fish `dirX` when calm... fine.

Also "Outflow weakens as the water level approaches the opening and stops when water no longer reaches it" — with depth-based sqrt it weakens. ✓

Edit now.

Better: 3 fish out, 1 fighting. Water falling 520→556 (approaching hole top 605), flow weakening 17.9→15.5. Jet curve good. Let it continue to confirm outflow stops when surface reaches holeTop, then test Reset.

Excellent behavior: flow weakens 17.9→5.8 as level approaches hole top (605), jet speed weakens too. Let me check t+7/8 for stop, then Reset.

Drain stops at surface=605=holeTop with flow=0. PuddleVol 18538 ≈ drained volume (605-520)*230 ≈ 19550 (slight loss in-flight/edge) — conservation good.

Now test Reset: click reset button. Reset button position: after Breach button. Breach at ~345; Reset maybe ~470? Header: h1 width ~230 + gap 14 → breach at ~250-340, reset ~355-440. Click (400,25) and check log.

Reset works: phase intact, surf 520, 8 objects (4 fish + toy + 3 rocks), 3 plants, no shards/jet/puddle. Breach button re-enabled (resetAll sets disabled=false).

One more check: after reset, re-breach with the same crack default to make sure a second run works, and check that escaped objects include the toy eventually and the last fish behavior, plus no console errors over a longer run. Let me do a quick second run with crack lower (click lower, e.g., y=690 → canvas y≈645) to check deeper drain and toy escape.

Also verify no errors after long run. Click crack near bottom, breach, inspect after a few seconds.

Good — this run: a plant got uprooted ("weed" escaped), fish swept over time, deeper drain in progress. No errors. Let it finish and check long-run stability + toy. The toy hasn't escaped yet (out list has fish,weed). Toy floats on remaining water above hole. Fine.

Let me wait a bit more and check for console errors, then check long-run (20s) stability quickly with another motion call. Then done. Also final state: keep debug logs? They're harmless and useful. I'll keep them but reduce? They're fine.

Actually one concern: the drain leaves water between hole bottom (695) and sand — puddle keeps. Rocks: none escaped (heavy). Good.

Final motion check for errors.

All good, no errors across two full runs. The logging interval ended at t+8s; simulation continues fine (rAF). I could check long-run stability by another motion later, but console would be quiet. One more inspect after a pause to catch any runtime errors post-drain:

No new errors — simulation stable post-drain. All done. The file is saved. Summarize what was verified and what remains unverified (visual rendering quality, pointer drag gesture itself — I verified click-to-place which shares the same pointerdown path; actual drag via pointermove not tested; visual appearance of jet curvature verified numerically not visually since screenshots unsupported).