I'm building a canvas-based physics simulation for an aquarium with a draggable crack that triggers water escape using Torricelli's law to calculate jet velocity, then simulating the water spreading across the floor as it falls.

Now I'm planning the object interactions—fish, rocks, plants, and toys that respond to buoyancy, drag, and water currents, transitioning between underwater and air states as the water level drops. When the glass bursts, fragments will scatter with angular velocity while the fish get swept out by the escaping jet.

For the water simulation itself, I'm tracking the total volume and lowering the waterline based on outflow proportional to the square root of the depth difference between the water surface and the crack. I'll spawn visual jet particles at the opening and use a heightmap approach for the puddle spreading across the floor. Now I'm setting up the canvas and coordinate system with y pointing downward. The tank occupies a fixed region with its right wall as the breach point, and I'm tracking the water level directly since the tank width is constant. When the tank bursts, water flows out through the breach based on the pressure from the water depth above it—I'll calculate the outflow rate using the standard formula and update the water level accordingly until it drops to the breach height and stops flowing.

For the visual effect, I'm spawning particles at the breach point with horizontal velocity proportional to the water pressure, creating a jet that spreads slightly. I need to be mindful of performance by capping the particle count. The user will be able to drag a crack indicator along the right wall before triggering the burst, then click to activate it.

Writing the full implementation... Now I'm modeling the physics: water has density 1, so buoyancy gives net vertical acceleration of g times (1 minus the object's density), pushing lighter things up. Drag acts on each body based on its velocity relative to the water current. The current itself flows toward the breach opening, with strength that decreases with distance—I'll approximate this as a vector pointing toward the breach scaled by flow rate and distance. When a body reaches the breach and the water level is high enough, it exits the tank and becomes airborne, subject to gravity and air resistance until it hits the floor outside, where it bounces with damping and friction.

For fish, I'm applying a swim force that opposes the current, pushing them back toward the tank interior, but if the current exceeds their maximum swim capability, they get swept toward the breach. Glass fragments at the breach are polygons with outward velocity and angular rotation, experiencing water resistance while submerged and colliding with the floor.

I'm representing the puddle as an array of height values across the room width in bins, where water landing adds to the nearest bin and each frame applies smoothing to simulate shallow water spreading from higher to lower neighbors, bounded by walls. The puddle renders as a filled area.

For the tank water, I'm drawing a semi-transparent blue rectangle from the water level up to the tank bottom with a wavy surface. Jet particles render as small circles. I'm setting gravity to around 1500 px/s² and using Torricelli's equation to calculate the breach jet speed based on water depth—with a 300px depth that gives roughly 950 px/s. The breach opening will grow slightly after the initial burst to simulate the crack widening.

Writing the full implementation now... Writing plant physics...

I should run the file through Node to check for any syntax errors.

I'm noticing a potential issue with the save/restore stack balance in the drawing code. When drawBody calls drawPlant, there's a restore followed by a save that could throw off the context stack — I need to trace through the sequence carefully to make sure each save has a matching restore at the right level.