The user wants me to create a single HTML file with a complete simulation of a glass aquarium bursting. This is a complex physics simulation. Let me break down the requirements:

1. Large glass aquarium with side panel
2. Visible crack that develops and bursts
3. Water escaping through opening with flow based on water depth (decreasing as tank drains)
4. Curved water jet affected by gravity
5. Spreading puddle colliding with room boundaries
6. Fish, rocks, plants, floating toy reacting by density, buoyancy, drag, current
7. Objects transitioning from underwater → airborne → floor collisions
8. Fish swimming against current before being swept through breach
9. Glass fragments with angular velocity, collisions, water resistance
10. Visible waterline that lowers continuously
11. User can drag crack vertically before triggering failure
12. Lower crack = stronger jet than higher crack
13. Single self-contained HTML file with CSS in <style> and JS in <script>

This is a very complex simulation. Let me think about how to build this efficiently while keeping it performant and visually impressive.

I'll use HTML5 Canvas for rendering. The simulation needs:
- Physics for water flow (Torricelli's law: v = sqrt(2gh))
- Fluid simulation or particle-based water
- Object physics (buoyancy, drag, gravity)
- Collision detection
- Rendering of water surface (waterline)
- Glass fracture simulation
- Fish AI (swimming against current)

Let me think about the architecture:

1. **Water physics**: I'll use a particle-based approach for water, with some surface tracking. For performance, I'll use a mix of particles for the jet and a height-field or particle system for the main water body.

2. **Tank**: Rectangular glass tank drawn with strokes. The crack starts small and propagates.

3. **Crack interaction**: User drags a point on the side panel, sets crack position vertically.

4. **Flow**: Based on Torricelli's law. Flow rate = area * sqrt(2*g*h) where h is water depth above crack.

5. **Objects**: 
   - Fish: swim with AI, affected by current
   - Rocks: sink (density > water)
   - Plants: flexible, affected by current
   - Floating toy: floats (density < water), affected by current

6. **Glass fragments**: break off when tank bursts, physics with rotation.

7. **Puddle**: water that spreads on the floor.

Let me write this. I need to be careful about performance. I'll use requestAnimationFrame and optimize with particle limits.

Let me think about the water rendering. For a large aquarium, I could use:
- A main water body rendered as a filled polygon with a waterline
- Particles for the jet and splashing
- A puddle that grows on the floor

For the water in the tank, I'll track the water level and render a polygon. The waterline lowers over time.

For the jet, I'll emit particles at the crack position with velocity based on Torricelli's law, directed outward.

For the puddle, I'll track puddle radius or use particles that settle on the floor.

Let me structure the code:

```javascript
// Constants
const G = 9.81 * 200; // scaled gravity for pixels
const WATER_DENSITY = 1;
const AIR_DENSITY = 0.001;

// State
let tank; // tank object
let crackY; // crack position
let waterLevel; // current water height
let particles = []; // water particles
let objects = []; // fish, rocks, plants, toy
let glassFragments = [];
let puddleParticles = [];
let gameState = 'idle'; // 'cracking', 'burst', 'draining'

// Tank
const TANK_WIDTH = 400;
const TANK_HEIGHT = 500;
const TANK_X = 100;
const TANK_Y = 50;
```

Let me think more carefully about the water simulation. A full fluid simulation (like SPH) would be computationally expensive. Instead, I'll use a simplified approach:

1. **Main water body**: Track water level as a single height value. Render as a filled rectangle/polygon inside the tank. Water spills out through the crack.

2. **Jet particles**: Emitted at the crack, follow projectile motion with gravity, then when they hit the floor they become puddle particles.

3. **Puddle**: Track as a growing circle (or set of particles) on the floor that expands and collides with walls.

4. **Objects**: Simularated with forces - gravity, buoyancy (based on submersion depth), drag, and current (from jet particles).

For the objects in water:
- Buoyancy force = rho_water * V_displaced * g (upward)
- Drag force = 0.5 * rho * v^2 * Cd * A (opposing velocity)
- Gravity = m * g (downward)

For fish, I'll give them AI to swim in a direction opposite to the current near the crack, but they'll be swept away.

Let me think about the rendering layers:
1. Room background
2. Floor
3. Tank glass (with crack)
4. Water inside tank
5. Objects inside tank
6. Jet particles
7. Objects airborne
8. Puddle on floor
9. Glass fragments
10. Fish (can be in any state)

Let me write the complete code now. I'll aim for something that looks good and runs smoothly.

For the water current affecting objects, I'll compute velocity at each object's position based on nearby jet particles and the general flow toward the breach.

Actually, let me think about a cleaner approach for water simulation. 

I'll use a hybrid approach:
- **Water level tracking**: Simple scalar that decreases over time based on flow rate
- **Surface rendering**: Draw water as a polygon filling the tank up to waterLevel
- **Jet**: Particles emitted at crack, with velocity = sqrt(2*g*h) where h = waterLevel - crackY
- **Splash**: When jet particles hit floor, spawn spray particles
- **Puddle**: A growing/shrinking area on the floor

For objects, the "current" inside the tank will be a simplified flow field pointing toward the crack, with magnitude based on proximity to crack and water level.

Let me code this up:

```javascript
// Fish class
class Fish {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.size = 15;
    this.angle = 0;
    this.swimDir = 1; // direction fish is facing
    this.state = 'swimming'; // 'swimming', 'airborne', 'on_floor'
    this.health = 1;
    this.targetX = x + 50;
    this.targetY = y;
  }
  
  update(dt) {
    if (this.state === 'swimming') {
      // Try to swim away from current (toward center of tank)
      // But if current is strong, get swept
      ...
    } else if (this.state === 'airborne') {
      // Physics: gravity, air drag
      this.vy += G_AIR * dt;
      this.vx *= (1 - AIR_DRAG * dt);
      this.vy *= (1 - AIR_DRAG * dt);
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      this.angle = Math.atan2(this.vy, this.vx);
      // Check floor collision
      if (this.y > floorY) {
        this.state = 'on_floor';
      }
    }
  }
}
```

Let me think about the fish behavior more carefully. The fish should:
1. Swim normally (back and forth) at the start
2. When the crack forms, detect current and try to swim against it
3. When water is flowing strongly, get swept through the breach
4. Become airborne outside the tank
5. Land on the floor

For the "swim against current" behavior:
- Fish detect velocity of water current at their position
- They try to swim in the opposite direction with some max speed
- If current > fish swim speed, they get swept

Let me think about the current field inside the tank. Near the crack, water flows out. The general flow direction inside the tank would be toward the crack. I can compute this as:
- Direction from object to crack (pointing toward crack)
- Magnitude based on water level (higher water = stronger flow)

Actually, for objects inside the tank, I'll compute a current vector that:
- Points from the object toward the crack
- Magnitude = baseCurrent * (waterLevel - crackY) / tankHeight (proportional to water pressure)

Objects in water experience:
1. Buoyancy (upward force based on submersion)
2. Gravity (downward)
3. Current drag (force in direction of current)
4. Their own velocity drag (opposing motion through water, stronger than air drag)

Let me write the full simulation now.

For glass fragments:
- When the tank bursts (water level drops enough or crack propagates fully), the side panel breaks
- Fragments fly outward with some velocity
- They have angular velocity
- Air resistance slows them down
- They collide with the floor and walls
- Some may be underwater initially (so water resistance applies)

For the crack propagation:
- User drags to set crack position
- On trigger, crack grows horizontally first, then propagates vertically
- Eventually the whole panel breaks

Let me think about timing:
1. **Idle phase**: Tank is intact, water is calm, fish swim, objects float/sink
2. **User drags crack**: A small crack appears at the dragged position
3. **User triggers**: Crack propagates, panel breaks
4. **Burst phase**: Water flows out, jet, objects get swept, fragments fly
5. **Drain phase**: Tank empties, puddle spreads, everything settles

Let me write this now. I'll be thorough but efficient.

Let me think about the rendering for the water surface. I want a visible waterline that lowers continuously. I'll:
- Draw the tank with a stroke
- Fill water area with a blue color up to waterLevel
- The water surface can have slight wave animation

For the jet particles, they should be emitted at the crack and arc through the air. When waterLevel is above the crack, particles emit from the crack outward.

For the puddle, I'll track puddle "radius" or use particles. When jet particles hit the floor, I add to the puddle. The puddle spreads and collides with walls.

Let me think about how objects transition from underwater to airborne:
- While waterLevel > object.y, object is in water (buoyancy, water drag)
- When waterLevel drops below object, and object is above floor, it becomes airborne
- When object hits floor, it's on the floor

Actually, this is a bit tricky. Objects inside the tank:
- If waterLevel > object.y: object is submerged (water physics)
- If waterLevel < object.y but object is still inside tank: object is in air inside tank (air physics, but tank walls constrain)
- When the panel bursts and object exits tank: fully airborne
- When object hits floor: on floor

Hmm, this is getting complex. Let me simplify:

While the panel is intact:
- Objects stay inside tank
- Water physics apply to submerged objects
- Air physics for objects above water level (but still inside tank)

When panel bursts:
- Objects near the breach can exit the tank
- They become fully airborne
- Floor collisions apply

Let me just code it up. I'll make reasonable simplifications where needed.

Let me think about performance. Canvas rendering of many particles... I'll cap particle counts. For the jet, I'll emit maybe 10-20 particles per frame. For glass fragments, maybe 20-30. For fish, 5-8. For water rendering, just a polygon fill.

Let me now write the complete HTML file.

Actually, let me think about the puddle more carefully. I want a spreading puddle that collides with room boundaries. I could:
1. Use a circle that grows
2. Use particles that spread
3. Use a height field

For simplicity and visual appeal, I'll use particles for the puddle edges (like a blob) or a growing circle that deforms when hitting walls. Actually, let me use particles for the puddle - when they hit the floor, they spread out. I'll track puddle edges as a set of points that expand radially from the impact point.

Or simpler: I'll maintain a puddle radius that grows based on water volume, and render it as a circle. When it hits walls, it can flow along walls (expand in other directions). For collision with room boundaries, I can make the puddle deform.

Let me use a particle-based approach for the puddle: particles that are emitted from the jet impact point, spread radially on the floor, and collide with room boundaries (bounce or slide along walls).

Actually, for the puddle to "collide with room boundaries" in a visible way, I think the cleanest approach is:
- Track puddle as a growing circle
- When the circle hits a wall, it starts spreading along the wall
- Render the puddle as a filled shape

Let me just use particles and make them behave like a viscous fluid on the floor. They'll spread out, slow down due to friction, and bounce/slide off walls.

Let me think about the whole thing more holistically and just write it.

Here's my plan for the code structure:

```
HTML structure:
- <style> for CSS
- <canvas> element
- <script> for JS

JS structure:
- Constants and config
- Utility functions (vector math)
- Particle class (water jet, spray)
- PuddleParticle class
- GlassFragment class
- Fish class
- Rock class
- Plant class
- FloatingToy class
- Tank class (handles rendering, crack, burst)
- Room class (walls, floor)
- Game state machine
- Main loop (update + render)
- Event handlers (drag, click)

Let me write this now.
```

For the current/drag on objects in water, let me think about what forces to apply:
- **Buoyancy**: F_b = rho_water * V * g (upward), only when submerged
  - For floating objects: buoyancy adjusts to equal weight
  - For sinking objects: full buoyancy applies
- **Water drag**: F_d = 0.5 * rho_water * v_relative^2 * Cd * A (opposing relative motion)
  - v_relative = object velocity - water current velocity
  - This is much stronger than air drag
- **Current**: Water particles carry objects. I'll compute current velocity at object position.

For the current field, I'll compute:
```
currentDir = normalize(toward crack)
currentMag = k * (waterLevel - crackY) / tankHeight
```
Where toward crack means the direction from the object to the crack.

This gives a radial-ish flow toward the breach, which is physically reasonable for this kind of situation.

For fish swimming against current:
```
swimVelocity = fishSpeed * (-currentDir)
if (currentMag > fishSpeed) {
  // swept away
  object.vx += currentDir.x * currentMag * dt;
} else {
  // can swim against it
  object.vx += swimVelocity * dt;
}
```

OK let me just write the code now. I'll make it comprehensive.

Let me think about the visual style. I want it to look good:
- Realistic water color (blue with some transparency)
- Glass tank with reflections
- Colorful fish
- Various object colors
- Glass fragments sparkling

For rendering water, I'll use:
- FillStyle with blue color and some alpha
- Maybe a slight wave effect using sin distortion
- The water surface with a meniscus effect at the glass walls

For the jet, I'll use white/blue particles that are smaller and more numerous at the source, spreading out.

Let me code this up now. I'll write a comprehensive implementation.

Let me think about one more thing - the crack propagation visual. I want:
1. User drags and a crack line appears at that position
2. On trigger, the crack grows (spider-web pattern?)  
3. Eventually the panel breaks into fragments

For the crack, I'll:
1. Draw a thin red/white line at the crack position
2. As it propagates, the line grows
3. When it reaches critical length, the panel shatters

For the shatter effect:
- Generate fragments from the panel area
- Each fragment gets a velocity and angular velocity
- They fly outward

OK, I think I have a good enough plan. Let me write the code.

Let me think about the actual numbers:
- Canvas: 800x600
- Room: full canvas, with a floor at y=500
- Tank: x=200, y=80, width=300, height=420
- Crack: user sets y position on the right side of tank (x = tankX + tankWidth)

For gravity, I'll use G = 980 (3x real, in pixels per second squared, for a nice arc)

For water flow rate (Torricelli's law):
- v = sqrt(2 * g * h) where h = waterLevel - crackY
- flowRate = v * crackArea (area based on crack width)
- waterLevel decreases: dLevel = -flowRate * dt / (tankWidth * tankHeight)

Wait, I need to be more careful. The flow rate in terms of volume per second:
- Volume flow rate = A_crack * v = A_crack * sqrt(2*g*h)
- Rate of water level decrease = Volume flow rate / (tank cross-section area)
- = A_crack * sqrt(2*g*h) / (tankWidth * 1) (per unit depth, but we're in 2D)

In 2D:
- "Volume" per unit depth = width * height
- Flow rate per unit depth = crackHeight * sqrt(2*g*h)
- So d(waterLevel)/dt = -crackHeight * sqrt(2*g*h) / tankWidth

This gives us the water level decreasing based on depth. Good.

For the jet particles, they should be emitted at a rate proportional to the flow rate:
- particleCount = flowRate * dt / particleVolume

Let me set this up so that:
- When crack is low (near bottom), water level is high, so h is large, jet is strong
- When crack is high (near top), water level might be close to crack, h is small, jet is weak

This matches the requirement: "A lower crack should initially produce a stronger jet than a higher crack."

Now let me code everything.

I realize I should also think about how objects exit the tank. When the panel bursts:
- The right side of the tank is open
- Objects near the right side can be pushed out by the jet/current
- Once outside the tank, they're fully airborne

For objects inside the tank (panel intact):
- They're constrained within the tank boundaries
- Wall collisions keep them inside

For objects that fall below the water level:
- They're in water, experience buoyancy and water drag

For objects above water level (panel intact):
- They're in air inside the tank, experience air drag and gravity
- If the object floats, it should be at the water surface

Let me think about this more carefully for each object type:

**Rocks (sink)**:
- In water: sink downward, hit tank bottom, water drag slows them
- When panel bursts: might be pushed out by current if near breach
- Airborne: gravity + air drag
- Floor: rests on floor

**Floating toy (floats)**:
- In water: floats at water surface, moves with current
- When water level drops: stays at water surface
- If pushed out by jet: airborne, then lands on floor
- On floor: rests

**Fish**:
- In water: swims, tries to swim against current
- When current too strong: swept toward breach, exits tank
- Airborne: flops (gravity + drag)
- Floor: flops weakly

**Plants**:
- Rooted at bottom, bend with current
- When water drains: become exposed, sway in air
- Flexible, spring-like motion

Let me now actually write the code. I'll be thorough.

Let me think about the plant. It's rooted at the bottom, so it doesn't move from the bottom. But the top bends with the current. I can model it as a series of segments with spring physics, or simpler: a flexible line with the base fixed and the top swaying.

I'll model it as a curved line with the base fixed and some wave equation. When current is strong, it bends more.

Actually, for simplicity, I'll model plants as flexible lines that bend based on nearby current. Each plant is a set of points forming a curve from the bottom of the tank.

Let me think about the implementation:

```javascript
class Plant {
  constructor(x, baseY) {
    this.x = x;
    this.baseY = baseY; // bottom of tank
    this.segments = 8;
    this.length = 60;
    this.points = [];
    for (let i = 0; i < this.segments; i++) {
      this.points.push({ x: x, y: baseY - i * this.length / this.segments });
    }
    this.current = { x: 0, y: 0 };
  }
  
  update(dt, currentField) {
    // Simple spring-based bending
    let current = currentField(this.x, this.baseY);
    for (let i = 1; i < this.segments; i++) {
      let p = this.points[i];
      let parent = this.points[i-1];
      // Target direction with current influence
      let targetAngle = Math.PI / 2 + current.x * 0.5; // bend toward current
      let dist = this.length / this.segments;
      p.x = parent.x + Math.sin(targetAngle) * dist;
      p.y = parent.y - Math.cos(targetAngle) * dist;
    }
  }
}
```

OK, I think I have enough of a plan. Let me write the full code now.

Actually, I want to make sure the simulation looks good. Let me think about visual effects:
1. **Water**: Blue fill with alpha, slight wave animation on surface
2. **Jet**: Dense stream of particles, curving due to gravity
3. **Splash**: Particles radiating when jet hits floor
4. **Puddle**: Growing blue area on floor, with expanding waves
5. **Glass**: Clear with transparency, crack as white line
6. **Fragments**: Sharp polygons with angular velocity
7. **Fish**: Colorful sprites with tail animation
8. **Objects**: Various shapes and colors

Let me write it all now.

Let me also think about the room. The room should have:
- Walls (left, right, back) drawn as lines
- Floor drawn as a line/rectangle
- Maybe some room details (floor tiles, wall texture)

The puddle should spread on the floor and collide with walls.

Let me define the room:
- Room floor at y = 500
- Room floor extends from x = 50 to x = 750
- Room walls at x = 50 and x = 750
- Room back wall at y = 50 (top)

The tank sits on the floor:
- Tank base at y = 500 (on the floor)
- Tank x from 200 to 500

The puddle spreads from under the tank (where the jet hits) and can reach walls at x=50 and x=750.

Actually, the jet goes outward from the tank's right side, so the puddle forms to the right of the tank. Let me position the tank so the right side (where the crack is) allows the jet to go into the room.

Tank: x = 200, y = 80, width = 300, height = 420
Crack is on the right side (x = 500)
Jet goes to the right (positive x direction)
Puddle forms around x = 500, y = 500 (floor)

The puddle can spread right (toward wall at 750) and also left (toward wall at 50, but tank is in the way... well tank will break too).

Actually, when the tank bursts, the whole right panel is gone. The puddle forms at the right side. Let me make the room wide enough.

Room: x from 20 to 780, floor at y = 520, back wall at y = 30
Tank: x = 200, y = 50, width = 300, height = 470, floor at y = 520
Floor thickness: 10 pixels

The puddle forms at the right of the tank (around x=500) and spreads right toward the wall at x=780 and left toward the wall at x=20 (but tank is there, so it can only spread right and the floor right of tank).

Actually, I think the puddle spreading right and hitting the right wall is the most visually interesting. Let me also have some spray bounce off walls.

OK let me just write the code now. I'm overthinking the layout.

Let me settle on this layout:
- Canvas: 900 x 650
- Room floor at y = 550
- Room extends from x = 30 to x = 870
- Tank: x = 250, y = 100, width = 300, height = 450 (sits on floor)
- Crack on right side of tank at x = 550, user drags y from 100 to 550
- Jet goes right
- Puddle spreads right on floor
- Right wall at x = 870

This gives room for the puddle to spread and hit the wall.

Now let me write the complete code.

I'll structure the code with clear sections and classes. Let me write it all in one go.

One more thing - for the glass fragments, I want them to:
1. Start at the tank's right side
2. Fly out with angular velocity
3. Be affected by air resistance (and water resistance if they start underwater)
4. Collide with the floor and walls
5. Some might be pushed by the water jet initially

For fragment generation, I'll split the right panel into pieces. I'll use simple polygon shapes.

Actually, let me generate fragments as rectangles or irregular polygons. I'll create a grid of fragments that break apart.

Let me think about how many fragments. Maybe 20-30 for a good visual effect without too much performance impact.

OK, let me write the code now. I'll make it comprehensive but still performant.

For the water surface, I'll add a slight wave animation using sine waves on top of the flat water level.

Let me think about the fish rendering. I'll draw fish as:
- An oval body
- A triangle tail that oscillates
- An eye dot
- Direction based on current

For the fish AI:
1. Normal swimming: swim in a direction, turn when hitting walls
2. Current avoidance: when current is detected, try to swim against it
3. When current is too strong: be swept away
4. Transition to airborne when exiting water/tank
5. On floor: flop weakly (small random movements)

Let me write it all now. I'll aim for clean, well-structured code.

Let me think about one more detail: the water current inside the tank. I want objects to be visibly pushed toward the crack. The current should:
- Flow from left to right (toward the crack on the right side)
- Be stronger near the crack
- Be stronger when water level is higher

I'll compute current at any point (x, y) inside the tank as:
```
current.x = currentStrength * (distance from left wall to crack) 
current.y = some vertical component (upward near bottom, downward near top for circulation)
```

Actually, let me simplify. The main current is from left to right (toward the crack). The strength depends on:
- How far below the water surface (deeper = stronger due to pressure)
- How close to the crack (closer = stronger)
- Water level height

```javascript
function computeCurrent(x, y, waterLevel, crackY, tankX, tankWidth) {
  if (y > waterLevel) return { x: 0, y: 0 }; // above water
  let depth = waterLevel - y; // depth below surface
  let distanceToCrack = crackY - y; // vertical distance to crack
  let maxDist = waterLevel - tankBottom; // max possible depth
  let strength = Math.sqrt(Math.max(0, depth)) * 30; // stronger at depth
  // Direction toward crack (rightward)
  return { x: strength, y: 0 };
}
```

This gives a current that increases with depth, which is physically accurate (Bernoulli's principle / pressure increases with depth).

For objects in water, the drag force from current will push them toward the crack. The magnitude depends on the object's drag coefficient and cross-sectional area.

Let me now actually write the code. I'll be comprehensive.

Let me also think about the "flow strength based on water depth and decreasing as the tank drains" requirement. This is naturally handled by:
1. Torricelli's law: v = sqrt(2*g*h), where h = waterLevel - crackY
2. As waterLevel decreases, h decreases, so jet velocity decreases
3. Flow rate = area * velocity, so flow rate also decreases

For the jet particle emission rate, I'll emit more particles when the flow is strong (high water level) and fewer as it drains.

OK, I'm going to write the code now. Let me structure it carefully.

Actually, for performance, let me think about the particle budget:
- Water jet: emit ~2 particles per frame normally, more during initial burst
- Water spray (splash): ~50 particles on impact
- Total particle count: cap at ~500-800
- Glass fragments: ~30
- Fish: ~6
- Objects: ~10-15
- Plants: ~5
- Puddle particles: ~200

This should be manageable at 60fps.

Let me write the code now. I'll create a comprehensive, self-contained HTML file.

Let me think about the overall state machine:

States:
1. **SETUP**: Tank is shown, objects in place, no crack yet
2. **DRAGGING**: User is dragging to set crack position. Crack line is visible at drag position.
3. **CRACK_PROPAGATING**: Crack grows from initial position. Takes ~1 second.
4. **BURSTING**: Panel breaks, glass fragments fly, water starts flowing
5. **DRAINING**: Water flows out, objects are swept, puddle grows
6. **SETTLED**: Tank is empty, everything is on the floor

Transitions:
- Setup → Dragging: user mousedown on tank
- Dragging: user drags to set crack position
- Dragging → Setup: user releases without triggering
- Dragging → Crack propagating: user clicks/mousedown again (or releases to trigger)
- Crack propagating → Bursting: crack reaches full propagation
- Bursting → Draining: panel fully breaks
- Draining → Settled: water level reaches crack level

Let me implement this. The user drags to set crack position, then releases to trigger the failure. Or maybe: drag to set position, then click a button or press space to trigger.

Actually, re-reading: "Let the user drag the crack vertically before triggering the failure."

So:
1. User drags vertically on the tank side to set crack position
2. User releases and clicks a "Trigger" button (or presses space/click again)

Let me implement it as: drag to set position, release to show crack at that position, then click anywhere or press a button to trigger. Or maybe just drag and release to trigger immediately.

I think: drag to set crack position, release to trigger. The crack position is where the user dragged. Let me add a visual indicator showing the crack during drag.

Let me also add a "Reset" button to restart the simulation.

OK, now I'll write the code. Let me be thorough and make it look great.

Here's my approach for the water rendering in the tank:
- Draw tank walls as transparent glass (light gray with alpha)
- Fill water area with blue color, using a polygon from tank bottom to waterLevel
- Add wave animation on the water surface
- The waterline is clearly visible

For the jet:
- Emit particles at crack position (x = tank right edge, y = crackY)
- Particles have initial velocity based on Torricelli's law: v = sqrt(2 * g * (waterLevel - crackY))
- Direction is outward (positive x) with slight spread
- Gravity curves the trajectory
- When particles hit the floor, they create splash and contribute to puddle

For the puddle:
- Track as a growing circle that spreads from the impact point
- Growth rate proportional to incoming water volume
- When reaching walls, it stops growing in that direction and flows along
- Render as a blue puddle with some transparency

Actually, for the puddle colliding with boundaries, let me use particles:
- Floor particles spread out from impact point
- They have friction (slow down quickly)
- They bounce off walls
- They accumulate to form a visible puddle

Or, I can use a hybrid: a growing circle for the main puddle body, plus particles for splash effects.

Let me use particles for the puddle. They'll be:
- Low velocity (spread out)
- High friction (slow down)
- Bounce off walls
- Rendered as small blue ellipses

This gives a nice accumulating effect.

For the "visible waterline that lowers continuously", I'll:
- Track waterLevel as a float
- Each frame, decrease it based on flow rate
- Render the water fill up to waterLevel
- The decrease is smooth and continuous

OK, I'm going to write the code now. No more planning, just coding.

Let me think about one more thing - the glass fragments. When the panel bursts:
1. Generate fragments from the panel area (right side of tank)
2. Each fragment gets:
   - Position (within panel area)
   - Size (random)
   - Velocity (outward and some upward/downward)
   - Angular velocity (random)
   - Angle (random rotation)
3. If fragment starts underwater (below waterLevel), it has water resistance
4. If fragment starts above water, just air resistance
5. Fragments collide with floor and walls
6. They bounce (with energy loss) and eventually come to rest

For fragment shapes, I'll use slightly irregular rectangles or triangles.

Now let me code it all up.

I'll make the code modular with classes but all in one script tag.

Let me write it now:

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 900;
canvas.height = 650;

// Constants
const G = 1200; // gravity (pixels/s^2) - stronger for nice arcs
const DT = 1/60; // fixed timestep

// Tank dimensions
const TANK_X = 250;
const TANK_Y = 100;
const TANK_W = 300;
const TANK_H = 450;
const TANK_BOTTOM = TANK_Y + TANK_H; // 550

// Room dimensions
const FLOOR_Y = 560;
const ROOM_LEFT = 40;
const ROOM_RIGHT = 860;
const ROOM_TOP = 40;

// Game state
let gameState = 'setup'; // 'setup', 'dragging', 'cracking', 'bursting', 'draining', 'settled'
let crackY = TANK_BOTTOM / 2; // current crack position
let isDragging = false;
let waterLevel; // current water level (y coordinate, lower means less water)
let waterLevelInitial;
let jetStrength; // current jet strength
let glassFragments = [];
let particles = []; // all particles (jet, splash, puddle)
let puddleVolume = 0;
let objects = []; // fish, rocks, plants, toy
let plants = [];

// ... etc
```

Let me now write the complete code. I'll make it work end to end.

Actually, I realize I should think about the flow more carefully to make sure it's satisfying:

1. Water level starts at top of tank (y = TANK_Y)
2. Crack is at some y position on the right wall
3. When triggered, crack propagates vertically (both up and down from the initial point)
4. When crack reaches top or bottom of tank, the panel breaks
5. Water starts flowing out
6. Flow rate is highest at start (max water depth above crack) and decreases as water level drops
7. Jet is curved by gravity
8. When jet hits floor, water spreads as puddle
9. Objects are affected by current and buoyancy
10. Fish swim against current then get swept
11. Glass fragments fly from broken panel
12. Eventually tank is empty and everything settles

Let me now write the actual code. I'll make it clean and comprehensive.

Let me think about some key physics implementations:

**Object in water:**
```javascript
// Forces on object
let submergedDepth = waterLevel - object.y; // how deep the object is below water surface
let buoyancy = 0;
if (submergedDepth > 0) {
  // Buoyancy force (simplified - proportional to submerged volume)
  let submersionRatio = Math.min(1, submergedDepth / object.height);
  buoyancy = WATER_DENSITY * submersionRatio * BOLTZMANN * G; // simplified
}

// Current drag
let current = computeCurrent(object.x, object.y);
let relativeVel = { x: object.vx - current.x, y: object.vy - current.y };
let dragMag = 0.5 * WATER_DENSITY * (relativeVel.x^2 + relativeVel.y^2) * DRAG_COEFF * AREA;
let dragDir = normalize(-relativeVel);
let dragForce = { x: dragDir.x * dragMag, y: dragDir.y * dragMag };

// Net force
object.fx = dragForce.x + current.x * CURRENT_MULT; // current pushes object
object.fy = -buoyancy + dragForce.y + gravity;
```

Hmm, this is getting complex. Let me simplify the physics to something that looks good without being perfectly physically accurate.

For objects in water:
1. **Buoyancy**: If object density < water density, it floats (stays at surface). If > water, it sinks.
2. **Water drag**: Strong damping on velocity (multiply by 0.95 each frame)
3. **Current**: Add current velocity to object velocity each frame
4. **Gravity**: Always applied, but reduced by buoyancy

For floating objects (like the toy):
- They should stay at the water surface
- Move with current
- When water level drops, they follow the surface down

For sinking objects (like rocks):
- They sink to the bottom
- Get pushed by current along the bottom
- When water drains, they stay on the bottom

For fish:
- They actively swim
- They try to swim away from the current/breach
- When current is too strong, they're carried away

Let me implement this more simply:

```javascript
class PhysicsObject {
  constructor(x, y, density) {
    this.x = x; this.y = y;
    this.vx = 0; this.vy = 0;
    this.density = density; // compared to water density
    this.inWater = true;
    this.inTank = true;
    this.onFloor = false;
  }
  
  update(dt, waterLevel, current) {
    if (this.onFloor) return;
    
    let inWater = this.y < waterLevel;
    
    if (inWater) {
      // Water physics
      let drag = 0.85; // strong drag in water
      this.vx *= drag;
      this.vy *= drag;
      
      // Add current
      this.vx += current.x * dt * 0.5;
      this.vy += current.y * dt * 0.5;
      
      // Buoyancy
      if (this.density < 1) {
        // Floats - push toward surface
        let targetY = waterLevel;
        let force = (targetY - this.y) * 0.05;
        this.vy += force * dt;
      }
      
      // Gravity (reduced by buoyancy)
      this.vy += (G * (1 - this.density * 0.5)) * dt;
      
    } else {
      // Air physics
      let drag = 0.98;
      this.vx *= drag;
      this.vy *= drag;
      this.vy += G * dt;
    }
    
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    
    // Check if exited tank
    if (this.x > TANK_X + TANK_W) {
      this.inTank = false;
    }
    
    // Check floor collision
    if (this.y > FLOOR_Y) {
      this.y = FLOOR_Y;
      this.vy = -Math.abs(this.vy) * 0.3;
      if (Math.abs(this.vy) < 1) this.onFloor = true;
    }
  }
}
```

OK, I think I have a good enough understanding. Let me write the full code now.

For the fish, I'll add swimming behavior:
```javascript
class Fish extends PhysicsObject {
  constructor(x, y) {
    super(x, y, 1.02); // slightly denser than water (sinks slowly)
    this.size = 18;
    this.tailTime = 0;
    this.swimTarget = { x: x + 100, y: y };
    this.swimSpeed = 80;
    this.wasInWater = true;
  }
  
  update(dt, waterLevel, current) {
    this.tailTime += dt;
    
    if (this.inWater && this.inTank) {
      // Normal swimming
      let targetDir = normalize(this.swimTarget.x - this.x, this.swimTarget.y - this.y);
      
      // Check current - try to swim against it
      if (Math.abs(current.x) > this.swimSpeed * 0.5) {
        // Current is strong, try to swim away from it
        targetDir.x = -normalize(current.x, current.y).x * this.swimSpeed;
        targetDir.y = -normalize(current.x, current.y).y * this.swimSpeed * 0.5;
      }
      
      // Apply swimming force
      this.vx += targetDir.x * this.swimSpeed * dt;
      this.vy += targetDir.y * this.swimSpeed * dt * 0.5;
      
      // Call parent for water physics
      super.update(dt, waterLevel, current);
      
      // Check if swept away
      if (current.x > this.swimSpeed * 2) {
        // Get swept toward breach
        this.vx += current.x * dt * 0.8;
      }
    } else if (!this.inWater && this.wasInWater) {
      // Just exited water - become airborne
      this.wasInWater = false;
    }
    
    if (!this.onFloor && (!this.inWater || !this.inTank)) {
      // Airborne
      this.vy += G * dt;
      this.vx *= 0.98;
      this.vy *= 0.98;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
    }
    
    if (this.y > FLOOR_Y) {
      this.y = FLOOR_Y;
      this.vy *= -0.2;
      if (Math.abs(this.vy) < 2) this.onFloor = true;
    }
    
    // Pick new target if reached
    if (this.inWater && this.inTank) {
      let dist = Math.sqrt((this.x - this.swimTarget.x)**2 + (this.y - this.swimTarget.y)**2);
      if (dist < 20) {
        this.swimTarget.x = this.x + (Math.random() - 0.5) * 100;
        this.swimTarget.y = this.y + (Math.random() - 0.5) * 50;
      }
    }
  }
}
```

Hmm, the fish physics is getting complicated. Let me think about this more carefully.

Actually, I think I should separate the update logic more cleanly. Let me have:
1. A `computeCurrent(x, y)` function that returns the water current at any point
2. Objects check if they're in water and apply current/buoyancy/drag
3. Fish have their own swimming logic

Let me simplify and just write the code. I'll make it work well visually even if the physics isn't perfect.

Let me think about what the user sees during the simulation:
1. Fish swimming around normally
2. Rocks settled at bottom
3. Plants swaying gently
4. Toy floating at surface
5. User drags on tank → crack appears at position
6. User releases → crack propagates, panel breaks
7. Water starts flowing out → strong jet
8. Jet curves down → hits floor → puddle spreads
9. Objects get caught in current:
   - Fish try to swim away but get swept
   - Rocks slide along bottom toward breach, some get carried
   - Plants bend violently
   - Toy gets pushed toward breach, exits, lands on floor
10. Glass fragments fly out
11. Water level drops continuously
12. Eventually everything settles

Let me write the code now. I'll be thorough but make sure it runs well.

I think for this simulation, I'll focus on making the visuals compelling and the physics "good enough" to be convincing. Perfect fluid dynamics would require a much more complex implementation.

Let me write the full HTML file now.

Key implementation decisions:
- Use requestAnimationFrame for 60fps
- Fixed timestep for physics (or use variable with dt)
- Cap particle count for performance
- Use simple shapes for objects (circles, rectangles, ellipses)
- Wave animation using sine distortion
- Particle-based water jet and puddle

Let me write it all now. Here goes:

I'll write the code in sections:

1. Setup (canvas, constants, state)
2. Utility functions
3. Classes (Particle, GlassFragment, Fish, Rock, Plant, FloatingToy, Tank, Puddle)
4. Physics functions
5. Update function
6. Render function
7. Event handlers
8. Main loop
9. Start

Let me code this up.

Actually, I want to think about one more thing - the water inside the tank. I want the water to look realistic with:
- A surface that has waves
- Transparency (objects below are visible but slightly distorted)
- The waterline clearly visible

For the surface waves, I'll use a sine distortion on the water surface line.

For transparency, I'll use globalAlpha when rendering water.

For objects below water, I'll render them normally (no special distortion effect for simplicity, but maybe add a slight blue tint).

Let me think about the tank rendering:
```
Tank walls: 4 lines (left, top, right, bottom) in light blue/white
Tank interior: filled with water (blue, alpha ~0.6)
Water surface: wavy line at waterLevel
Objects: rendered on top of water fill
```

Wait, the objects should be partially submerged. Let me render:
1. Tank walls (first, so they're in the background)
2. Water fill (semi-transparent)
3. Objects (some partially in water, some above)
4. Water surface wave line (on top of water fill, semi-transparent)
5. Glass fragments, jet particles, etc.

Actually, the rendering order matters. Let me think:
1. Room background
2. Floor
3. Tank (back wall and floor sides)
4. Water fill (blue, alpha)
5. Objects (partially submerged look)
6. Tank walls (glass effect, alpha)
7. Water surface (waves on top)
8. Jet particles
9. Glass fragments
10. Puddle on floor
11. UI (crack line, drag indicator)

Hmm, the tank walls should probably be rendered before water so the water is in front of the walls (since water is inside the tank). But the walls are transparent, so:
1. Room
2. Floor
3. Tank back and bottom walls (drawn first as background elements)
4. Water fill
5. Objects (partially submerged)
6. Tank front and side walls (drawn on top, as glass)
7. Water surface waves

Wait, that doesn't work either. The tank walls are the boundaries of the water. Let me think again.

The tank is a box:
```
+------------+
|            |
|    WATER   |
|            |
+------------+
```

The walls are the borders. The water fills the interior. So:
1. Draw tank as a filled rectangle (clear/transparent glass)
2. Draw water as a filled rectangle inside (up to waterLevel)
3. Draw objects inside
4. Draw tank borders (stroke, slightly opaque for glass look)
5. Draw water surface waves on top

Or:
1. Draw tank stroke (outline)
2. Fill water area
3. Draw objects
4. Draw water surface on top of everything inside tank

Actually, for a 3D-looking tank, I should draw:
1. Back wall of tank (filled rectangle, slightly darker)
2. Water inside (filled area up to waterLevel)
3. Objects
4. Front panel of tank (lines, transparent)
5. Water surface (lines/animated)

Let me keep it simple:
1. Room background
2. Floor
3. Tank: filled rectangle with glass color (light blue, alpha ~0.1)
4. Water: filled rectangle up to waterLevel (blue, alpha ~0.5)
5. Objects: rendered inside tank
6. Water surface: wave line at waterLevel
7. Tank outline: stroke for glass effect
8. Jet particles: emitted from crack
9. Glass fragments: flying out
10. Puddle: on floor
11. Crack line: on tank wall

Let me also add some nice visual details:
- Light reflection on water surface
- Bubbles rising from the jet
- Spray particles when jet hits floor
- Fish tail animation
- Plant sway animation
- Glass shine on fragments

OK, I'm going to write the code now. Let me just do it.

For the water jet, I want it to look like a cohesive stream that curves due to gravity. I'll emit particles from the crack with:
- Initial velocity: v = sqrt(2 * g * (waterLevel - crackY)) in x direction
- Slight random spread in angle
- Gravity applied each frame
- Particles are blue/white, varying sizes

For the puddle, I'll accumulate puddleVolume and use particles or a growing shape.

Let me think about how to render the puddle as it collides with walls. I'll use a particle system where:
- Particles are emitted from the jet impact point
- They spread radially on the floor
- They bounce off walls (with damping)
- They slow down due to friction
- When many particles accumulate in an area, they look like a puddle

But for a cleaner look, maybe I should use a different approach. Let me use a "puddle blob" that grows and deforms when hitting walls.

Actually, let me use a combination:
1. A growing circle for the main puddle body (simple and effective)
2. Splash particles for the jet impact
3. When the circle hits a wall, it flows along the wall

For the circle-to-wall collision:
```
if (puddleCenter.x + puddleRadius > ROOM_RIGHT) {
  // Hit right wall - start flowing along it
  puddleWidth += overflow * dt;
  // Render as extending along the wall
}
```

This is getting complicated. Let me just use particles for everything - jet, splash, and puddle. The puddle particles will:
- Spread out on the floor
- Slow down quickly (high friction)
- Bounce off walls (with damping)
- Accumulate visually as more particles are added

When the tank drains completely, the puddle particles will have spread out and mostly stopped.

Let me also add some visual feedback for the water current - maybe small bubbles or debris moving in the current inside the tank.

OK, I'm going to write the code now. I'll aim for 200-300 lines of clean JavaScript. Let me focus on the key requirements.

Let me think about what makes this satisfying:
1. The crack propagation animation
2. The initial burst of water (strong jet)
3. Objects being swept through the breach
4. Fish swimming against the current then getting swept
5. Glass fragments flying
6. Puddle spreading and hitting walls
7. Water level lowering continuously
8. Everything settling at the end

Let me write the code now. I'll structure it as a complete, working simulation.

Here's my final plan for the code structure:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Full-screen canvas, dark room background */
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // All code here
  </script>
</body>
</html>
```

Let me write it all now. I'll be thorough.

For performance, I'll:
- Use fixed timestep (60fps)
- Cap total particles at ~1000
- Use simple shapes (no complex paths unless needed)
- Reuse arrays where possible
- Use basic collision detection (circle vs rectangle for tank, circle vs point for floor)

Let me write the code:

Actually, I want to make the water in the tank look really good. Here's my approach:
- Fill the tank area with a blue gradient (lighter at top, darker at bottom)
- Add a wavy surface using sine distortion
- Add some transparency to see through
- Render objects that are below water with a slight blue tint (using composite operations)
- Add light specules on the water surface

For the wave surface, I'll use:
```javascript
ctx.beginPath();
ctx.moveTo(TANK_X, waterLevel);
for (let x = TANK_X; x <= TANK_X + TANK_W; x += 5) {
  let wave = Math.sin(time + x * 0.05) * 3;
  ctx.lineTo(x, waterLevel + wave);
}
ctx.lineTo(TANK_X + TANK_W, waterLevel);
ctx.closePath();
ctx.fill();
```

This gives a nice wavy water surface.

For submerged objects, I can use `ctx.globalCompositeOperation = 'source-atop'` or just render them normally with the water overlay.

Actually, let me keep it simple and just render objects on top of the water fill. The water is semi-transparent, so objects will be visible through it.

Let me write the code now. For real this time.

Let me also think about the crack propagation animation:
1. Initial crack at crackY position (a short line)
2. Crack grows upward and downward from the initial point
3. When cracks meet top and bottom edges, the panel breaks
4. Panel fragments fly outward

For the crack rendering:
```javascript
// Draw crack as white line
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(TANK_X + TANK_W, crackStartY);
ctx.lineTo(TANK_X + TANK_W, crackEndY);
ctx.stroke();
```

For fragmentation, when the crack reaches full extent:
```javascript
// Split panel into fragments
for (let i = 0; i < 30; i++) {
  let fragment = new GlassFragment(
    TANK_X + TANK_W + (Math.random() - 0.5) * 10,
    crackY + (Math.random() - 0.5) * TANK_H,
    ...
  );
  glassFragments.push(fragment);
}
```

OK, let me write the complete code now. I'm going to create a really impressive simulation.

Let me think about the final structure of the code:

```javascript
// ===== CONFIGURATION =====
// Gravity, tank dimensions, room dimensions, etc.

// ===== STATE =====
// Game state, water level, particles, objects, etc.

// ===== UTILITY FUNCTIONS =====
// Vector math, random, etc.

// ===== PARTICLE SYSTEM =====
class WaterParticle { ... }
class PuddleParticle { ... }

// ===== OBJECTS =====
class Fish { ... }
class Rock { ... }
class Plant { ... }
class FloatingToy { ... }

// ===== GLASS FRAGMENTS =====
class GlassFragment { ... }

// ===== TANK =====
class Tank { ... }

// ===== ROOM =====
class Room { ... }

// ===== PHYSICS =====
function computeCurrent(x, y) { ... }
function applyWaterForces(obj, dt) { ... }

// ===== UPDATE =====
function update(dt) { ... }

// ===== RENDER =====
function render() { ... }

// ===== EVENT HANDLERS =====
// Mouse drag, click, etc.

// ===== MAIN LOOP =====
function init() { ... }
function loop() { ... }
init();
```

Let me now write this complete code. I'll make it work end-to-end.

One thing I want to be careful about: the user interaction. The user should:
1. See the initial scene (tank with water, fish, objects, plants)
2. Drag on the tank's right side to set crack position
3. See a crack line at the dragged position
4. Release to trigger the failure
5. Watch the simulation unfold

For the drag:
```javascript
canvas.addEventListener('mousedown', (e) => {
  if (gameState === 'setup') {
    gameState = 'dragging';
    crackY = e.clientY - canvas.offsetTop;
    // Clamp to tank bounds
    crackY = Math.max(TANK_Y, Math.min(TANK_BOTTOM, crackY));
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (gameState === 'dragging') {
    crackY = e.clientY - canvas.offsetTop;
    crackY = Math.max(TANK_Y, Math.min(TANK_BOTTOM, crackY));
  }
});

canvas.addEventListener('mouseup', (e) => {
  if (gameState === 'dragging') {
    gameState = 'cracking'; // start crack propagation
  }
});
```

Wait, actually "drag the crack vertically" means they're dragging on the tank wall itself, setting where the crack will form. Then on release (or second click), the crack propagates and the panel bursts.

Let me implement: drag to set position, release triggers the burst sequence. During drag, show a visual indicator.

Actually, maybe: drag to set position, release to start cracking (crack propagates), then it bursts automatically.

Let me go with: drag sets crack position, release triggers the cracking → bursting → draining sequence.

Let me also add a reset button.

OK here's my final approach. Let me write the code now.

I'll also need to handle the case where the panel is still intact but water is flowing out. Wait, the panel needs to break for water to flow out. So the sequence is:
1. Crack propagates along the panel
2. Panel breaks into fragments
3. Water starts flowing out through the opening
4. Objects get swept through the opening
5. Water level drops
6. Panel is gone (only fragments remain, flying through air/on floor)

So the water doesn't start flowing until the panel is gone. The crack propagates, then breaks, then water flows.

Actually, re-reading the requirements: "A visible crack and then bursts." So:
1. Crack forms (visible line)
2. Crack propagates (grows)
3. Panel bursts (breaks into fragments)
4. Water escapes

Let me have the water start flowing as soon as the crack is large enough (even before full panel breakage), to add drama. The crack grows and water starts leaking, then the panel fully breaks.

Hmm, but the requirements say "water escaping through the opening" - implying the panel is already broken/open. Let me have:
1. Crack propagates (1 second animation)
2. Panel breaks (fragments fly)
3. Water starts flowing immediately after

This is cleaner. Let me go with this.

But wait, maybe I should have water start leaking during the crack propagation phase, so it's more dynamic. The crack opens up and water starts spurting through the growing crack. Then when it reaches critical length, the panel fully breaks.

Let me do:
1. **Crack phase**: Crack grows from crackY upward and downward. As the crack grows, water starts leaking through it (small jet). The leaking rate increases as crack grows.
2. **Burst phase**: When crack reaches tank top/bottom, panel breaks. Full jet emerges. Fragments fly.
3. **Drain phase**: Water level drops. Objects swept. Puddle grows.
4. **Settled phase**: Everything on floor.

This is more dynamic. Let me implement it this way.

For the crack phase, I'll track crackProgress (0 to 1). The crack length = crackProgress * TANK_H / 2 (growing from center to top and bottom). Water starts leaking when crackProgress > 0.3 (crack is big enough).

The leak rate is proportional to crackProgress, so it builds up.

When crackProgress reaches 1, the panel breaks.

OK, let me finalize and write the code.

Let me think about the visual for the crack growing:
- Draw the tank right wall as a line
- As crack grows, draw a crack line that extends from crackY upward and downward
- The crack is wider at the center and tapers toward the ends
- Water bleeds through the crack

For water bleeding through:
- When crackProgress > 0.3, start emitting particles from the crack
- Particle emission rate proportional to crackProgress and waterLevel height
- This creates the initial jet before the panel fully breaks

This is a nice touch. Let me implement it.

Now, for the panel breaking, I'll:
- Generate 20-30 fragments from the right panel area
- Each fragment gets velocity (outward + random), angular velocity
- Some fragments are submerged initially (underwater), so they have water resistance
- Others are in air (above waterLevel), just air resistance

For the fragments, I'll split the panel area into a grid and jitter the piece positions.

OK, let me write the code now. For real.

I also need to think about the floating toy. It should:
- Float at the water surface
- Be pushed by current
- When water level drops, follow the surface
- If pushed out of the tank by the jet, become airborne
- Land on the floor

For the toy, I'll use a simple buoyant object with a low density. It'll naturally float and follow the water surface.

For rocks:
- Sink to the bottom
- Get pushed along the bottom by current
- When water drains, stay on bottom
- Some might be pushed out if they're near the breach

Wait, rocks at the bottom inside the tank won't be pushed out unless they're near the right wall and the current is strong enough. Since the current flows toward the breach, rocks near the breach could be pushed out.

Actually, rocks at the bottom would be pushed along the bottom toward the right wall (the breach). If the current is strong enough, they'll exit through the breach.

For the toy (floating):
- It floats at the surface, so it's near the top of the tank
- The current at the surface is strong (toward the breach)
- The toy will be pushed toward the breach and exit

For plants:
- Rooted at bottom, sway with current
- When water drains, they become exposed and sway in air
- When water hits the floor, some plants might get knocked over

OK, I need to write the code now. Let me just do it and make it work.

Let me think about one final thing: the "current" that affects objects inside the tank. I need a function that computes the water current velocity at any point inside the tank.

The current is driven by the water flowing toward the breach. In reality, this would be a complex flow field, but I'll approximate it as:

```javascript
function computeCurrent(x, y, waterLevel, crackY, crackProgress) {
  if (y >= waterLevel) return { x: 0, y: 0 }; // above water
  if (crackProgress < 0.3) return { x: 0, y: 0 }; // no leak yet
  
  let tankWidth = TANK_X + TANK_W - TANK_X;
  let crackRatio = Math.max(0, (crackProgress - 0.3) / 0.7); // 0 to 1 as crack grows
  
  // Flow speed based on water depth above crack (Torricelli's law)
  let h = waterLevel - crackY;
  if (h < 0) return { x: 0, y: 0 };
  
  let speed = Math.sqrt(2 * G * h) * crackRatio * 0.3; // scaled
  
  // Flow is stronger near the crack and at greater depth
  let distanceFromCrack = Math.abs(y - crackY);
  let depthFactor = (waterLevel - y) / (waterLevel - TANK_BOTTOM + 1);
  
  // Flow direction: toward the crack (rightward in x, slight toward crackY in y)
  return {
    x: speed * (0.7 + 0.3 * depthFactor),
    y: -speed * 0.1 * Math.sign(y - crackY) * crackRatio * (1 - distanceFromCrack / TANK_H)
  };
}
```

This gives a current that:
- Flows rightward (toward the breach on the right)
- Is stronger at greater depth
- Is zero above water
- Builds up as crack grows

OK, now let me write the complete code. I'm going to create a really nice simulation.

Let me think about the rendering of water inside the tank more carefully. I want:
1. The water to fill up to waterLevel
2. The water surface to be wavy
3. Objects partially submerged in water
4. The water to have a blue color with transparency

For partial submersion, I'll compute for each object how deep it is below the water surface and render the submerged part differently (blue tint, slower animation).

Actually, for simplicity, I'll just render all objects normally and have the water overlay be semi-transparent. The water fill is rendered first (as a filled rectangle with alpha), then objects are rendered on top. Submerged parts of objects will be tinted blue by the water.

This is a common technique and looks good enough.

Let me also add some visual details:
- Light reflection on water surface (white highlight)
- Bubbles rising in the water
- The crack leaking water (small particles)

OK, writing the code now.

Let me think about the canvas rendering approach. I'll use a single canvas and clear it each frame, then render everything in order.

For performance, I'll:
- Clear canvas with room color
- Render static elements (room, tank) efficiently
- Update and render dynamic elements (particles, objects, fragments)

Let me write it all now. Here's the complete code:

I'll also add some nice touches:
- Background gradient (darker at top, lighter at floor level)
- Floor texture (tiles or wood pattern)
- Room details (maybe a few marks on the floor to show where the room boundary is)
- Light source from top-left

Let me also add a particle system for bubbles - small white particles that rise slowly in the water.

For the fish rendering:
- Draw an oval for the body
- Draw a triangle for the tail (oscillating)
- Draw a small circle for the eye
- Color varies per fish (orange, yellow, blue, etc.)
- Tail animation based on swim speed

For the plant rendering:
- Draw a curved line from base to top
- Use multiple segments
- Green color, with some variation
- Bend based on current

For the rock rendering:
- Irregular polygon or circle with gray color
- Varied sizes
- Dark gray with some variation

For the floating toy:
- A yellow rubber duck or similar
- Simple shape (oval with a head/beak)
- Bright color

OK, I'm going to write the code now. This is going to be a large file but I'll make it clean and well-commented.

Let me also think about how to handle the transition of objects from water to air:
- While waterLevel > object.y: object is in water (buoyancy, water drag, current)
- While waterLevel < object.y AND object is inside tank: object is in air inside tank (air drag, gravity, but tank walls constrain)
- When object.x > TANK_X + TANK_W: object is outside tank (fully airborne, gravity, air drag)
- When object.y > FLOOR_Y: object is on floor

Wait, but when the water is draining, the objects inside the tank should still be constrained by the tank walls. The exit is only through the breach (right side). So:
- Right wall is gone after bursting
- Other walls are intact
- Objects above water level inside the tank fall and hit the tank bottom
- Objects below water level inside the tank are affected by current
- Objects near the breach get swept out

Let me implement this.

Actually, when the panel bursts, the right side of the tank is completely open. So objects can exit freely from the right. The left, top, and bottom walls are still there (bottom wall is the tank bottom, which becomes part of the floor).

Let me track whether the panel has burst:
```javascript
let panelBurst = false;
```

When panelBurst is false, objects are constrained within all tank walls.
When panelBurst is true, objects can exit from the right.

For the floor: the tank bottom is at TANK_BOTTOM = FLOOR_Y (they're the same). So the floor and tank bottom are one and the same.

Let me now write the complete code. I'll aim for ~400-500 lines of JavaScript.

Let me think about the initial setup of objects:
- Tank: x=250, y=100, w=300, h=450
- Water: fills tank from y=100 to y=550 (TANK_BOTTOM = TANK_Y + TANK_H = 550)
- Floor: y=550 (same as tank bottom)
- Fish: 5 fish scattered in the water
- Rocks: 3-4 rocks at the bottom
- Plants: 4-5 plants rooted at bottom, scattered across tank width
- Floating toy: 1 toy near the center, floating at surface

Objects positions:
- Fish: randomly placed in upper-middle of tank
- Rocks: at bottom, randomly placed
- Plants: at bottom, with bases at various x positions
- Toy: near center, at water surface

Let me write the code now.

I think I should also add some small details to make it visually appealing:
- Light reflection on the water surface (horizontal white line with low alpha)
- The tank has a slight 3D effect (thicker lines on left/bottom)
- Glass reflections (white highlights on tank walls)
- The crack glows slightly (white/yellow)

For the crack glow:
```javascript
ctx.shadowColor = '#FFFFFF';
ctx.shadowBlur = 10;
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 3;
```

OK, let me write the code now. I'll make it comprehensive and visually appealing.

Let me think about the puddle rendering. I want it to look like a real puddle:
- Blue/clear with low alpha
- Expanding ripple effect
- Edge that's slightly irregular
- Reflection of nearby objects (optional, if time permits)

For the ripple effect, I can add concentric circles that expand from the impact point.

For the puddle spreading, I'll use:
- Puddle particles that spread on the floor
- Each particle has a position and radius
- When enough particles accumulate, they look like a puddle

Or, I can use a simpler approach:
- Track puddle as a growing ellipse or blob
- Render as a semi-transparent blue shape
- Add expanding ripples

Let me use particles for the puddle. They'll:
- Start at the jet impact point
- Spread radially with some randomness
- Slow down due to friction
- Bounce off walls (with damping)
- Render as small blue ellipses that overlap to form a puddle

With enough particles, this will look like a spreading puddle.

Let me cap puddle particles at ~300 for performance.

OK, writing the code now. Here it is:

Actually, let me reconsider the approach for the puddle. Particles might not form a nice continuous puddle shape. Let me use a hybrid:
1. A growing circle for the main puddle body
2. Splash particles for visual effect
3. Ripples for animation

The circle grows based on incoming water volume:
```
puddleRadius += dV / (PI * puddleRadius) / 2  // dV = volume increment
```

This is the formula for the growth rate of a circle's radius given a volume increment: dr = dV / (2 * PI * r)

When the circle hits a wall, it stops growing in that direction and forms a "puddle" that extends along the wall.

For the wall collision, I can just clamp the puddle center or make it asymmetric. But for simplicity, let me just use particles.

OK, I'm going to use particles for everything. Particles for:
- Water jet (high velocity, curve through air)
- Splash (when jet hits floor, radiate outward)
- Puddle (spread on floor, slow, accumulate)
- Bubbles (rise in water)
- Spray (fine mist from jet)

Each particle has: position, velocity, size, color, lifetime, type.

For the puddle specifically, I'll use particles that:
- Start at floor level (y = FLOOR_Y)
- Move outward with some randomness
- Have high friction (stop quickly)
- Bounce off walls
- Are small and blue

This should create a nice spreading puddle effect.

Let me also add some particles that are underwater (inside tank) to show the current - small bubbles that get swept toward the breach.

OK, let me write the code now. I'll be comprehensive.

Let me think about the final structure one more time:

```javascript
// Canvas setup
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Constants
const WIDTH = canvas.width = 900;
const HEIGHT = canvas.height = 650;

// Tank
const TANK = { x: 250, y: 100, w: 300, h: 450 };
const TANK_RIGHT = TANK.x + TANK.w; // 550
const TANK_BOTTOM = TANK.y + TANK.h; // 550
const FLOOR_Y = 560;
const ROOM_LEFT = 30;
const ROOM_RIGHT = 870;

// Gravity
const G = 1500; // pixels/s^2

// Time
let time = 0;
const FPS = 60;

// Game state
let gameState = 'setup';
let crackY = (TANK.y + TANK_BOTTOM) / 2;
let isDragging = false;
let waterLevel = TANK.y; // starts full
let crackProgress = 0; // 0 to 1
let panelBurst = false;
let panelBroken = false;

// Objects
const particles = []; // water jet, splash, puddle, bubbles
const glassFragments = [];
const fish = [];
const rocks = [];
const plants = [];
const toy = null;

// ... setup function ...
// ... update function ...
// ... render function ...
// ... main loop ...
```

Let me write the full code now.

Actually, I just realized I should also handle the case where the tank's right wall is drawn and then disappears when it breaks. During the crack propagation phase, the crack is visible on the right wall. When the panel bursts, the right wall pieces (fragments) fly off.

Let me track the panel state:
- `crackProgress = 0`: no crack
- `crackProgress > 0`: crack growing on right wall
- `crackProgress = 1`: panel breaks, right wall gone, fragments fly

During crack propagation, the right wall is partially visible with a crack line. After breaking, the right wall is gone (only fragments remain).

OK, let me write the code now. I'm going to be thorough and make it visually impressive.

Let me think about one more thing: how the initial water jet is emitted. When the panel is still intact but the crack is propagating, water starts leaking through the crack. The leak is a particle stream that emerges from the crack position.

For the initial leak (before full burst):
- Particles are emitted from the crack position on the right wall
- Velocity is based on water depth above crack (Torricelli's law)
- But scaled down (since the crack isn't fully open yet)
- Particles go rightward and slightly down

When the panel bursts:
- The leak becomes a full jet
- No wall to constrain the right side
- More particles, higher velocity

Let me implement this with a `leakFactor` that goes from 0 to 1 as the crack grows.

OK, I'm writing the code now. Here's the complete implementation:

Let me also make sure to handle the water level correctly:
- Water level starts at TANK.y (top of tank)
- Decreases based on flow rate
- Flow rate = crackArea * sqrt(2 * g * (waterLevel - crackY)) * leakFactor
- When waterLevel drops below crackY, flow stops
- Water level can't go below crackY (or can it? If the crack is large, water keeps flowing)

Actually, in reality, when the water level drops below the crack, no more water flows out (the crack is above the water level). So:
- Flow rate = max(0, sqrt(2 * g * (waterLevel - crackY))) * crackArea * leakFactor
- When waterLevel <= crackY, flow stops
- Water level reaches equilibrium at crackY

But the remaining water is still inside the tank (below the crack). The waterline lowers to the crack level and stops.

Hmm, but the tank is open on the right side (after bursting), so water below the crack level would also flow out slowly. Let me handle this:
- When waterLevel > crackY: fast flow through crack (Torricelli's law)
- When waterLevel < crackY: water sloshes out slowly (the open right side allows water to flow out)
- Eventually all water drains

For simplicity, I'll have the water level continue to decrease even below the crack level, but at a slower rate (simulating the water flowing out through the open side).

Actually, let me think about this more carefully. When the panel is completely gone (burst), the entire right side is open. Water will flow out through the right side opening. The flow rate depends on the water depth at the right edge.

For the flow rate calculation:
```
if (waterLevel > crackY) {
  // Water above crack - strong flow (Torricelli's law)
  h = waterLevel - crackY;
  flowRate = crackWidth * sqrt(2 * g * h);
} else if (waterLevel > TANK_RIGHT) {
  // Water below crack but above floor - slower flow
  h = waterLevel - TANK_BOTTOM;
  flowRate = tankWidth * sqrt(2 * g * h);
} else {
  // No water
  flowRate = 0;
}
```

Hmm, this is getting complicated. Let me simplify:
- When the panel is burst, water flows out based on the water level at the right edge
- Flow rate = sqrt(2 * g * max(0, waterLevel - floorY)) * flowArea
- flowArea is a fraction of the tank width (the opening size)

Actually, when the entire right panel is gone, the opening is the full height of the tank (from floor to water level). The flow rate would be very large initially and decrease as water level drops.

Let me use a simpler model:
- Flow velocity at the breach: v = sqrt(2 * g * (waterLevel - TANK_BOTTOM))
  - If waterLevel > TANK_BOTTOM (always true until tank is empty)
- Flow rate (volume per second): flowArea * v
  - flowArea = min(waterLevel - TANK_BOTTOM, TANK_BOTTOM - TANK.y) (height of water column at right edge)
  - Actually, flowArea = waterLevel - TANK_BOTTOM (height of water above floor)
- Water level decrease: dLevel = flowRate * dt / tankWidth

Wait, I'm overcomplicating this. Let me use a simplified model:

When the panel bursts:
- Flow rate out = k * sqrt(waterLevel - TANK_BOTTOM) (for waterLevel > TANK_BOTTOM)
- This is Torricelli's law with some constant k
- Water level decreases: waterLevel -= flowRate * dt

For the jet particles:
- Emit from right edge at height = waterLevel (or slightly below)
- Velocity = sqrt(2 * g * (waterLevel - TANK_BOTTOM)) in x direction
- Some spread in angle

Actually wait, I need to reconsider. The crack is at crackY. When the crack propagates and the panel breaks, the water flows out through the opening. The flow should be strongest when the water level is highest (most water above the opening).

Let me use this model:
1. While crack is propagating (before burst): water leaks through crack
   - Leak rate = crackLength * sqrt(2 * g * (waterLevel - crackY))
   - crackLength grows from 0 to TANK_H
2. After burst: water flows out through the full opening
   - Flow rate = sqrt(2 * g * (waterLevel - TANK_BOTTOM)) * openingWidth
   - More water escapes, faster draining

For simplicity, let me just use one model:
- Flow rate = max(0, sqrt(2 * g * (waterLevel - crackY))) * openingFactor
- openingFactor grows from 0 (no crack) to full (panel burst)
- After panel burst, openingFactor = some constant

Actually, I realize I should just simplify this. Here's my final approach:

1. During crack propagation: small water leak through growing crack
   - Leak particles emitted from crack position
   - Flow velocity = sqrt(2 * g * (waterLevel - crackY)) * crackProgress
   - Water level decreases slowly

2. During burst: panel breaks, strong jet
   - Jet particles from crack position
   - Full velocity = sqrt(2 * g * (waterLevel - crackY))
   - Water level decreases based on flow rate

3. During draining: water continues to flow
   - As water level drops, velocity decreases
   - Objects get swept

This should give the desired behavior: lower crack = stronger jet (because waterLevel - crackY is larger).

Let me implement this. The key formula is:
- Jet velocity = sqrt(2 * g * (waterLevel - crackY))
- This is largest when crackY is low (near bottom) and waterLevel is high (near top)
- As water drains, waterLevel decreases, velocity decreases

This perfectly matches the requirement: "A lower crack should initially produce a stronger jet than a higher crack."

Let me now write the code. For real this time. No more planning.

Here's the code:

Let me also think about the visual effect of the crack during propagation. I want to show:
1. A thin white line that grows from crackY upward and downward
2. Small water particles leaking through the crack
3. The tank glass cracking visually (maybe some stress marks)

For the crack line:
```javascript
// Draw crack
ctx.strokeStyle = lerpColor('#4040FF', '#FFFFFF', crackProgress);
ctx.lineWidth = 2 + crackProgress * 3;
ctx.shadowBlur = 15;
ctx.shadowColor = '#FFFFFF';
ctx.beginPath();
ctx.moveTo(TANK_RIGHT, crackY - crackLength/2);
ctx.lineTo(TANK_RIGHT, crackY + crackLength/2);
ctx.stroke();
```

OK, I'm going to write the complete code now. Let me focus on making it work and look good.

One more thing: for the glass fragments, I want them to look sharp and angular. I'll generate them as irregular polygons with angular velocity. They should:
1. Fly out from the right panel
2. Some start underwater (below waterLevel) - slowed by water resistance
3. Some start in air - faster flight
4. Bounce on the floor
5. Come to rest

For fragment generation, I'll split the panel into a grid and create irregular pieces:
```javascript
for (let i = 0; i < 20; i++) {
  let fragX = TANK_RIGHT + (Math.random() - 0.5) * 20;
  let fragY = TANK.y + (i / 20) * TANK.h + (Math.random() - 0.5) * 10;
  let fragW = 10 + Math.random() * 15;
  let fragH = 10 + Math.random() * 15;
  let fragment = new GlassFragment(fragX, fragY, fragW, fragH);
  glassFragments.push(fragment);
}
```

Each fragment will have:
- Position, velocity, angular velocity
- Angle, angular velocity
- Shape (as a set of points)
- Whether it started underwater

Let me implement the GlassFragment class with a render method that draws a rotated rectangle or polygon.

OK, I'm going to write the complete code now. Here it is:

Let me also think about what happens to the objects (fish, rocks, toy, plants) during each phase:

**Setup → Cracking**: Objects behave normally (fish swim, toy floats, plants sway, rocks sit at bottom)

**Cracking**: 
- Small leak through crack
- Current starts building slowly
- Objects start to feel the current
- Fish might detect the current and move

**Bursting**:
- Panel breaks, fragments fly
- Strong jet emerges
- Objects near the breach get swept
- Fish try to swim away

**Draining**:
- Water level drops continuously
- Objects transition from water to air
- Fish become airborne when swept out
- Toy gets pushed out, floats on puddle surface
- Rocks get carried along bottom, some exit
- Plants bend and sway

**Settled**:
- Tank is empty (or nearly empty)
- Objects on floor
- Puddle on floor
- Glass fragments on floor
- Fish flopping (weakly) on floor

Let me handle the fish transition carefully. Fish should:
1. Swim normally in water
2. Detect current from crack/leak
3. Try to swim against the current (toward left wall)
4. When current is too strong, get swept right (toward breach)
5. Exit tank through breach
6. Become airborne (flop)
7. Land on floor
8. Continue flopping weakly

For the fish swimming behavior:
```javascript
// Fish AI:
// 1. Normal: swim toward target (left side of tank, away from breach)
// 2. Current avoidance: if current detected, swim against it
// 3. If current too strong: surrender, let current carry
// 4. When near breach and current strong: exit tank
```

Let me implement this with a simple finite state machine for each fish.

OK, I really need to start writing the code now. Let me do it.

Here's my complete implementation plan. I'll write it all in one go.

Let me also think about the plants. I want them to:
1. Be rooted at the bottom
2. Sway with the current
3. Bend more when current is strong
4. When water drains, become exposed (still sway but in air)
5. When water hits the floor, they might get knocked over

For plant rendering, I'll draw a curved line (using Bezier curves or segmented lines) from base to top. The curve bends based on current.

Plant as a set of segments:
```javascript
class Plant {
  constructor(x, y) {
    this.x = x; // base x (fixed)
    this.baseY = y; // base y (bottom of tank)
    this.segments = 10;
    this.segmentLength = 50 / this.segments;
    this.points = [];
    for (let i = 0; i < this.segments; i++) {
      this.points.push({
        x: x,
        y: this.baseY - i * this.segmentLength
      });
    }
  }
  
  update(dt, current) {
    // Base point is fixed
    // Each segment follows a target direction influenced by current
    for (let i = 1; i < this.segments; i++) {
      let parent = this.points[i-1];
      let targetAngle = -Math.PI/2 + (current ? current.x * 0.02 : 0);
      let targetX = parent.x + Math.sin(targetAngle) * this.segmentLength;
      let targetY = parent.y + Math.cos(targetAngle) * this.segmentLength;
      // Spring interpolation
      this.points[i].x += (targetX - this.points[i].x) * 0.3;
      this.points[i].y += (targetY - this.points[i].y) * 0.3;
      // Add some natural sway
      let sway = Math.sin(time * 2 + i * 0.5) * 0.5;
      this.points[i].x += sway * dt;
    }
  }
  
  render(ctx) {
    ctx.strokeStyle = '#2ecc71';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(this.points[0].x, this.points[0].y);
    for (let i = 1; i < this.segments; i++) {
      ctx.lineTo(this.points[i].x, this.points[i].y);
    }
    ctx.stroke();
  }
}
```

OK, let me now write the complete code. I'm going to create the entire HTML file.

Let me write the code in a logical order:

1. HTML structure
2. CSS
3. Canvas setup
4. Constants
5. State variables
6. Utility functions
7. Particle system
8. Glass fragments
9. Fish
10. Rocks
11. Plants
12. Floating toy
13. Setup function
14. Current computation
15. Update function (handles all game states)
16. Render function
17. Event handlers
18. Main loop

Let me write it all now. I'll make it comprehensive and visually appealing.

I'm going to aim for a really polished result. Let me think about what visual details will make this impressive:

1. **Water**: Blue gradient fill, wavy surface, light reflection, transparency
2. **Glass**: Semi-transparent with highlights, crack glow
3. **Jet**: Dense particle stream, curving due to gravity, mist at the end
4. **Puddle**: Expanding blue area with ripples, collision with walls
5. **Fish**: Colorful, animated tails, trying to swim
6. **Objects**: Textured, with proper physics
7. **Particles**: Bubbles, spray, mist
8. **Glass fragments**: Sharp, reflecting light, spinning through air
9. **Room**: Textured floor, walls with some detail

Let me add some nice touches:
- Ambient light/darkness
- Light source from top-left
- Reflections on the floor
- Specular highlights on glass

OK, let me write the code now. I'll focus on making it visually impressive and physically convincing.

Let me think about the time progression:
1. **Setup (0s)**: Tank is full, objects in place
2. **Dragging (user controlled)**: User drags to set crack position
3. **Cracking (0-1s)**: Crack propagates, small leak
4. **Bursting (1-2s)**: Panel breaks, strong jet
5. **Draining (2-15s)**: Water drains, objects swept
6. **Settled (15s+)**: Everything on floor

The total simulation after triggering should take about 10-15 seconds, which is satisfying to watch.

For the water draining time, let me calculate:
- Tank volume (2D): TANK_W * (TANK_H) = 300 * 450 = 135000 pixels
- Initial water depth: 450 pixels
- Flow velocity at crack: sqrt(2 * 1500 * 450) ≈ 1140 pixels/s
- Flow rate: velocity * crackOpenHeight * dt
- Water level decrease: flowRate * dt / TANK_W

If the crack is at the bottom (crackY = TANK_BOTTOM = 550), then h = waterLevel - crackY = 100 - 550 = ... wait, that's negative.

Hmm, I have my coordinate system upside down. Let me clarify:
- y increases downward (standard canvas)
- TANK_TOP = TANK.y = 100 (top of tank)
- TANK_BOTTOM = TANK.y + TANK.h = 550 (bottom of tank)
- waterLevel starts at TANK_TOP = 100 (full tank, water surface at top)
- crackY is somewhere between TANK_TOP and TANK_BOTTOM
- h = crackY - waterLevel (since y goes down, crackY > waterLevel means crack is below water surface)
  - Wait, waterLevel is the y-coordinate of the water surface
  - If waterLevel = 100 (at top), and crackY = 400 (in middle), then the crack is 300 pixels below the water surface
  - h = crackY - waterLevel = 400 - 100 = 300
  - Flow velocity = sqrt(2 * G * h) = sqrt(2 * 1500 * 300) = sqrt(900000) ≈ 949 pixels/s

OK so:
- waterLevel is the y-coordinate of the water surface (starts at TANK_TOP = 100)
- crackY is the y-coordinate of the crack (between TANK_TOP and TANK_BOTTOM)
- h = crackY - waterLevel (depth of crack below water surface)
- If h > 0, water flows out
- As waterLevel increases (water drains), h decreases, flow slows

Wait, waterLevel increases as water drains (since y goes down). Let me be more careful:
- waterLevel = y-coordinate of water surface
- Starts at TANK_TOP = 100 (full)
- Increases as water drains (water surface goes down, y increases)
- h = crackY - waterLevel (must be > 0 for flow)
- When waterLevel = crackY, flow stops... but that can't be right.

Actually, when the panel is fully broken, the entire right side is open. Water will flow out until the water level is at the bottom of the tank. So:
- waterLevel goes from TANK_TOP to TANK_BOTTOM
- At the start, h = crackY - waterLevel (or more precisely, the depth of the opening)
- The opening is from crackY to waterLevel (if waterLevel > crackY) or from TANK_BOTTOM to waterLevel (if waterLevel < crackY but panel is broken)

Hmm, this is getting complicated. Let me simplify:

When the panel is broken (full opening on right side):
- The opening height = waterLevel - TANK_BOTTOM (if waterLevel > TANK_BOTTOM) or some fixed value
- Actually, the opening is the full right side of the tank. So from TANK_BOTTOM to waterLevel.
- Flow velocity = sqrt(2 * G * (waterLevel - TANK_BOTTOM))
- If waterLevel > TANK_BOTTOM, water flows
- If waterLevel <= TANK_BOTTOM, no water left (but waterLevel should stop at TANK_BOTTOM)

Wait, waterLevel can be above TANK_BOTTOM (water fills tank from TANK_BOTTOM up to waterLevel). Water flows out until waterLevel reaches TANK_BOTTOM.

So:
- h = waterLevel - TANK_BOTTOM (height of water above the tank bottom)
- Flow velocity = sqrt(2 * G * h)
- Flow rate = flowVelocity * openingWidth (where openingWidth is some fraction of TANK_W, let's say TANK_W * 0.3 for the effective opening area)
- Water level decrease = flowRate * dt / TANK_W

Let me simulate this:
- TANK_W = 300, TANK_H = 450
- h_initial = 100 - 550 = ... no, waterLevel = 100 (top), TANK_BOTTOM = 550
- h_initial = 550 - 100 = 450 (water depth)
- flowVelocity = sqrt(2 * 1500 * 450) = sqrt(1350000) ≈ 1162 pixels/s
- flowRate = 1162 * 300 * 0.3 = 104580 pixels²/s (in 2D, this is pixels/s * pixels = pixels²/s)
- Water level decrease = flowRate / TANK_W = 104580 / 300 = 349 pixels/s

So the water would drain in about 450 / 349 ≈ 1.3 seconds. That's a bit fast. Let me adjust the constants.

Let me use a smaller effective opening and more drag:
- effectiveOpening = TANK_W * 0.1 = 30 pixels
- flowRate = 1162 * 30 = 34860 pixels²/s
- waterLevel decrease = 34860 / 300 = 116 pixels/s
- Drain time = 450 / 116 ≈ 3.9 seconds

That's better. Or I can use a different formula:
- dV/dt = A * sqrt(2 * g * h)
- dh/dt = A * sqrt(2 * g * h) / W (where W is tank width)
- This gives exponential-like decay

Let me use:
- G = 1500
- effectiveArea = 30 (opening area in 2D)
- waterLevel decrease rate = effectiveArea * sqrt(2 * G * h) / TANK_W

This gives a nice gradual drain. The water level decreases quickly at first (when h is large) and slows down as h decreases.

For the jet velocity, it's just sqrt(2 * G * h) which decreases as water level drops. Perfect for the requirement.

Now, for the crack propagation phase (before burst), the leak is smaller:
- leakArea grows from 0 to some value
- Water level decreases slowly during this phase
- Jet particles are emitted from crack position

When the panel bursts:
- Full opening
- Strong jet
- Water level drains faster

Let me also think about the jet particle emission rate:
- Particles per second = flowRate / particleVolume
- particleVolume = particleSize² (in 2D)
- So particles per frame = flowRate * dt / particleSize²

With flowRate = 34860 and particleSize = 5:
- particles per frame = 34860 / 60 / 25 = 23

That's a lot of particles. Let me cap at 20 per frame and use larger particles (size 8-12).

Actually, 20 particles per frame at 60fps = 1200 per second. With a lifetime of 2 seconds, that's 2400 particles alive. That's a lot but should be fine for canvas.

Let me cap total particles at 1500 and use a pool/reuse system.

Hmm, actually, let me just cap at 800 particles total and reduce the emission rate. I'll also make the jet particles have some spread so they look like a cohesive stream.

OK, let me now write the actual code. I've planned enough.

Let me think about one more detail: the jet curving due to gravity. The jet particles are emitted with high x velocity (from Torricelli's law) and gravity pulls them down. This creates a curved trajectory. The jet should arc downward and hit the floor somewhere to the right of the tank.

The maximum range of the jet (if it were a projectile):
- Initial velocity: v = sqrt(2 * G * h)
- Height: crackY - FLOOR_Y (height above floor)
- Range = v * sqrt(2 * (crackY - FLOOR_Y) / G)

For crackY = 400 (middle of tank), FLOOR_Y = 560:
- Height = 400 - 560 = -160 (crack is above floor, so jet starts at y=400, floor at y=560)
- Actually, crackY is on the right side of tank, which is at x=550. The jet goes right from there.
- The jet starts at (550, crackY) and goes right and down due to gravity
- It hits the floor at y=560

Time to hit floor:
- dt = crackY - FLOOR_Y... wait, crackY = 400, FLOOR_Y = 560
- Distance down = 560 - 400 = 160 pixels
- Time = sqrt(2 * 160 / G) = sqrt(320 / 1500) = sqrt(0.213) = 0.46 seconds
- Horizontal distance = v * time = sqrt(2 * 1500 * 300) * 0.46 ≈ 949 * 0.46 = 436 pixels

So the jet would land about 436 pixels to the right of the tank, at x = 550 + 436 = 986. But the room right wall is at 870. So the jet would hit the wall!

That's actually a good visual effect - the water hits the wall and splashes.

But wait, the jet velocity depends on water depth above crack. If crack is at the bottom (crackY = 550 = TANK_BOTTOM), then h = waterLevel - crackY = 100 - 550 = -450. That's negative, meaning the crack is below the water surface (or at the bottom).

I think I have the coordinate system confused again. Let me clarify:
- y = 0 is top of canvas, y increases downward
- TANK_TOP = 100 (top of tank)
- TANK_BOTTOM = 550 (bottom of tank)
- waterLevel = 100 initially (water surface at top)
- waterLevel increases as water drains (surface goes down)
- crackY is between 100 and 550
- h = crackY - waterLevel (how far below the surface the crack is)
  - If crackY = 200, waterLevel = 100: h = 100 (crack is 100px below surface)
  - If crackY = 550, waterLevel = 100: h = 450 (crack is at bottom, 450px below surface)
  - If waterLevel = 300, crackY = 200: h = -100 (water level is below crack, no flow)

So the flow happens when waterLevel < crackY (water surface is below the crack? No, that means the crack is above the water surface, so no flow).

Wait, I'm confusing myself. Let me think clearly:
- waterLevel is the y-coordinate of the water surface (top of water)
- If waterLevel = 100, water fills from y=100 to y=550 (tank bottom)
- crackY = 400 means the crack is at y=400, which is below the water surface (in the water)
- The depth of the crack below water surface: crackY - waterLevel = 400 - 100 = 300
- Water flows out through the crack because the crack is submerged

When water drains:
- waterLevel increases (surface goes down)
- Eventually waterLevel = crackY = 400, surface is at crack level
- At this point, h = crackY - waterLevel = 0, no flow through crack
- But the panel is broken, so water can flow out from the entire right side
- Water level continues to decrease (waterLevel increases) until it reaches TANK_BOTTOM

So I need two flow regimes:
1. **Crack flow** (waterLevel < crackY): water flows through the crack opening
   - h = crackY - waterLevel
   - v = sqrt(2 * G * h)
   - flowRate = crackWidth * v

2. **Panel flow** (waterLevel >= crackY, panel is broken): water flows out from the entire right side
   - h = waterLevel - TANK_BOTTOM (wait, this is always positive since waterLevel < TANK_BOTTOM until empty)
   
Hmm, actually when the panel is broken, the entire right side is open. Water flows out from the right edge. The flow velocity at any point on the right edge depends on the depth below the water surface at that point.

For simplicity, let me model the panel flow as:
- Opening height = waterLevel - TANK_BOTTOM (if waterLevel > TANK_BOTTOM)
  - Wait, waterLevel starts at TANK_TOP (100) and increases to TANK_BOTTOM (550)
  - So waterLevel - TANK_BOTTOM is negative initially and becomes 0 when empty
  - That's wrong. The water depth at the right edge is TANK_BOTTOM - waterLevel (since y goes down)
  - No wait, water fills from waterLevel to TANK_BOTTOM. So water depth at right edge = TANK_BOTTOM - waterLevel.
  - When waterLevel = 100, depth = 550 - 100 = 450
  - When waterLevel = 550, depth = 0 (empty)

OK so:
- water depth = TANK_BOTTOM - waterLevel
- Flow velocity (for panel broken) = sqrt(2 * G * (TANK_BOTTOM - waterLevel))
  - Wait, this is sqrt(2 * G * waterDepth), which is Torricelli's law with h = waterDepth
  - But waterDepth = TANK_BOTTOM - waterLevel, which decreases as waterLevel increases

Hmm, but Torricelli's law says v = sqrt(2gh) where h is the height of water surface above the opening. The opening is at TANK_BOTTOM (floor level). The water surface is at waterLevel. Since y goes down:
- h = TANK_BOTTOM - waterLevel (water surface is above the floor)
- v = sqrt(2 * G * (TANK_BOTTOM - waterLevel))

When waterLevel = 100: h = 450, v = sqrt(2 * 1500 * 450) = sqrt(1350000) ≈ 1162
When waterLevel = 300: h = 250, v = sqrt(2 * 1500 * 250) = sqrt(750000) ≈ 866
When waterLevel = 500: h = 50, v = sqrt(2 * 1500 * 50) = sqrt(150000) ≈ 387

This makes sense - the jet velocity decreases as the water level drops.

For the crack flow (before panel is fully broken):
- The crack is at crackY
- h = crackY - waterLevel (depth of crack below water surface)
- v = sqrt(2 * G * (crackY - waterLevel))
- Only flows when crackY > waterLevel (crack is below surface)

OK so to summarize:
- waterLevel starts at TANK_TOP (100) and increases to TANK_BOTTOM (550)
- crackY is between TANK_TOP and TANK_BOTTOM
- During crack propagation: leak through crack at crackY, flow rate proportional to sqrt(crackY - waterLevel) * crackProgress
- After panel burst: full flow through right side, flow rate proportional to sqrt(TANK_BOTTOM - waterLevel)
- Water level decreases (increases in y) over time
- Jet velocity decreases as water level drops

For the jet particle emission position:
- During crack propagation: emit from (TANK_RIGHT, crackY)
- After panel burst: emit from (TANK_RIGHT, waterLevel) (top of water at right edge)
  - Actually, emit from a range of positions along the right edge from waterLevel to TANK_BOTTOM
  - Or just emit from (TANK_RIGHT, waterLevel) with some spread

Let me emit jet particles from the right edge of the tank, at a height equal to the water level (or the crack position during propagation).

For the water level decrease after panel burst:
```
h = TANK_BOTTOM - waterLevel; // water depth
v = sqrt(2 * G * h); // flow velocity
flowRate = v * openingWidth; // volume flow rate (in 2D, pixels^2/s)
dw = flowRate * dt / TANK_W; // water level decrease (in y, so increase)
waterLevel += dw;
```

With openingWidth = TANK_W * 0.2 = 60:
- v = 1162, flowRate = 1162 * 60 = 69720
- dw = 69720 / 60 / 300 = 3.87 pixels per frame (at 60fps)
- Total drain: (550 - 100) / 3.87 ≈ 116 frames ≈ 1.9 seconds

That's pretty fast. Let me use openingWidth = TANK_W * 0.05 = 15:
- flowRate = 1162 * 15 = 17430
- dw = 17430 / 60 / 300 = 0.97 pixels per frame
- Total drain: 450 / 0.97 ≈ 463 frames ≈ 7.7 seconds

That's better - about 8 seconds to drain, which gives plenty of time for objects to be swept.

But wait, as the water level drops, the flow rate decreases (lower h = lower v). So the actual drain time will be longer. Let me calculate more carefully:

dh/dt = -A * sqrt(2 * G * h) / W
where A = openingWidth, W = TANK_W

This is a differential equation: dh/dt = -k * sqrt(h) where k = A * sqrt(2 * G) / W

Solution: 2 * sqrt(h) = -k * t + C
When t = 0, h = h0 = 450
C = 2 * sqrt(450) = 2 * 21.21 = 42.43

When h = 0: t = C / k = 42.43 / k

k = 15 * sqrt(2 * 1500) / 300 = 15 * 54.77 / 300 = 2.74

t = 42.43 / 2.74 = 15.5 seconds

That's 15.5 seconds to drain. That's good! But let me adjust to make it a bit faster - maybe 10 seconds.

Let me use openingWidth = TANK_W * 0.08 = 24:
k = 24 * 54.77 / 300 = 4.38
t = 42.43 / 4.38 = 9.68 seconds

About 10 seconds. That's good.

OK, let me finalize the constants:
- G = 1500
- openingWidth = 24 (after panel burst)
- crackWidth = 2 (during crack propagation)
- Tank starts full (waterLevel = 100)
- Drains over ~10 seconds after burst

For the jet particles:
- Emitted from right edge at height = waterLevel (or crackY during propagation)
- Velocity = sqrt(2 * G * (TANK_BOTTOM - waterLevel)) (after burst) or sqrt(2 * G * (crackY - waterLevel)) * crackProgress (during propagation)
- Direction: rightward (positive x) with slight downward
- Some spread in angle (±10 degrees)

For the jet particles also having water resistance if they're inside the tank - no, they're emitted outside the tank (from the breach).

Actually, during crack propagation, the water leaks through the crack on the right wall. The particles emerge from the crack and go rightward (outside the tank). During burst, the full opening allows water to flow out.

Let me now write the code. I'll implement all of this.

Let me also think about the bubble effect. I'll have small bubbles rising in the water (before and during the simulation). These are tiny white/blue particles that move upward slowly.

When the tank is full:
- Bubbles rise from the bottom
- Some get attracted to the crack area (current)

When water is draining:
- Bubbles are less visible
- More spray and mist

For the spray/mist when the jet hits the floor:
- Emit small white particles at the impact point
- They spread radially and upward
- Short lifetime

OK, I'm going to write the code now. Let me structure it carefully.

Let me also think about the rendering of objects partially submerged in water. I want:
- Objects below waterLevel to be tinted blue (as if underwater)
- Objects above waterLevel to be normal
- The water surface to be a clear line with waves

For the blue tint, I can use `ctx.filter = 'hue-rotate(... )'` or draw a blue overlay. Or I can just render objects normally and let the water fill (semi-transparent blue) provide the tint.

I think rendering objects normally with a water overlay is the simplest approach. The water fill is rendered with alpha = 0.4, which will tint everything below it.

For objects that are partially submerged (like a fish that's half in water), the water fill will tint the part below the surface.

OK, let me write the code now. I'll create a comprehensive simulation.

Let me think about the fish rendering in more detail:
- Fish are rendered as colored shapes
- Body: ellipse
- Tail: triangle or ellipse, oscillating
- Eye: small white circle with black pupil
- Direction: based on velocity (pointing where swimming)

For the oscillation:
```javascript
let tailAngle = Math.sin(time * 5 + fishIndex) * 0.3;
```

For different fish colors:
- Orange, yellow, blue, red, green

For the fish size: 15-20 pixels

Let me now write the complete code. I'll be thorough and make it visually impressive.

One final thought: for the glass fragments, I want them to reflect light and have sharp edges. I'll render them as:
- Irregular polygons (4-6 vertices)
- Light gray with alpha (semi-transparent)
- White highlights for shine
- Rotation based on angular velocity

For the fragment shape:
```javascript
class GlassFragment {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * 200;
    this.vy = (Math.random() - 0.5) * 100 - 50;
    this.angle = Math.random() * Math.PI * 2;
    this.angularVel = (Math.random() - 0.5) * 5;
    this.w = w;
    this.h = h;
    // Generate irregular polygon points
    this.points = generateIrregularPolygon(w, h);
  }
}
```

OK, let me write the complete code now. I've planned enough.

Let me write it section by section, making sure each part works.

Let me also add a nice background. The room should have:
- Dark floor (gray or black)
- Walls with some texture
- Maybe a light source (ceiling light)
- The tank in the center

For the floor texture, I'll add some floor tiles or a simple pattern.

For the room, let me add some details:
- A back wall (horizontal line at the top)
- Side walls (vertical lines)
- Floor (horizontal line at bottom)
- Maybe some shadows

OK, writing the code now:

Actually, let me reconsider the overall visual. I want the simulation to be visually striking. Here's my visual plan:

**Background**: Dark room (black/dark gray) with a light source from top-left
**Floor**: Concrete or tile pattern in dark gray
**Walls**: Simple lines or gradients
**Tank**: Glass tank with transparency, sitting on the floor
**Water**: Deep blue with transparency, wavy surface
**Jet**: Bright blue-white stream, curving down
**Puddle**: Shimmering blue on the floor
**Objects**: Various colors against the blue water
**Glass fragments**: Sharp, reflective, flying through air

For lighting effects:
- Light direction from top-left (225°)
- Water surface reflection (specular highlight)
- Glass reflection (white lines on glass surfaces)
- Fragment highlights (based on angle to light)

Let me implement this with canvas shadows and gradients.

OK, I'm going to write the code now. Let me create the full HTML file.

I'll structure the JavaScript as follows:

1. **Configuration constants**
2. **State variables** (arrays, scalars)
3. **Utility functions** (random, lerp, etc.)
4. **Particle class** (for water jet, splash, puddle, bubbles)
5. **GlassFragment class**
6. **Fish class**
7. **Rock class**
8. **Plant class**
9. **FloatingToy class**
10. **Setup function** (initialize objects)
11. **Compute current** function
12. **Update function** (handles all states)
13. **Render function** (draws everything)
14. **Event handlers** (drag, click)
15. **Main loop**

Let me write it all now.

I want to also add some particle effects:
- Bubbles rising in the water (before and during simulation)
- Mist/spray from the jet impact
- Small droplets splashing when objects hit the floor
- Ripples in the puddle

These visual details will make the simulation feel alive and realistic.

Let me also add a "Trail" effect for fast-moving objects (fish being swept, glass fragments). This could be done with faded particles behind them.

OK, I'm writing the code now. Here's the complete file:

Let me think about what might go wrong and how to handle it:
1. **Performance**: Cap particle counts, use simple shapes
2. **Objects getting stuck**: Make sure collision detection is robust
3. **Fish not swimming properly**: Tune AI parameters
4. **Water level not decreasing smoothly**: Use proper flow rate calculation
5. **Jet not curving**: Make sure gravity is applied to jet particles
6. **Puddle not spreading**: Make sure floor particles have enough initial velocity

Let me be careful about these issues as I write the code.

For the puddle collision with walls, I need to make sure:
- Puddle particles bounce off the room walls (x = ROOM_LEFT and x = ROOM_RIGHT)
- They also stop at the tank (but tank is broken, so no collision with tank right wall)
- Left wall of tank is still there, so particles can go left but hit the tank left wall

Actually, the tank left wall is at TANK.x = 250. Puddle particles should be able to go left past the tank right edge (550) but not past the tank left wall (250). Or should they? The puddle forms to the right of the tank, so it should spread rightward and maybe a bit leftward.

Actually, puddle particles form at the jet impact point, which is to the right of the tank. They spread on the floor. The left wall of the room is at ROOM_LEFT = 30. The tank is between 250 and 550. Puddle particles form at ~550+ and spread rightward toward ROOM_RIGHT = 870.

Some particles might spread leftward (back toward the tank), but they'd hit the tank's left wall (the tank bottom extends from x=250 to x=550). Actually, the tank is broken on the right side, so the right opening is at x=550. Puddle particles form to the right of x=550.

The puddle can spread:
- Right: until ROOM_RIGHT = 870
- Left: maybe to x=550 (back of the tank) or a bit further

For the collision, I'll have puddle particles collide with:
- ROOM_LEFT (x=30)
- ROOM_RIGHT (x=870)
- Maybe the tank's left wall (x=250) if particles spread that far

Let me keep it simple: puddle particles bounce off ROOM_LEFT and ROOM_RIGHT, and maybe the front of the tank (x=550 if I model the tank front as still standing).

Actually, when the panel bursts, the right side of the tank is gone. The tank's remaining structure is: left wall, top, bottom. The bottom of the tank is the floor. So on the floor, to the right of the tank, there's an open space. Puddle particles can spread freely from x=550 to x=870.

They might also spread under the tank (to the left of x=550), but that's less likely since the tank is there. Let me just have them bounce off the room walls (x=30 and x=870).

OK, let me write the code now. I'll make it work.

For the room boundaries collision for puddle particles:
```javascript
if (p.x < ROOM_LEFT) {
  p.x = ROOM_LEFT;
  p.vx = -p.vx * 0.5;
}
if (p.x > ROOM_RIGHT) {
  p.x = ROOM_RIGHT;
  p.vx = -p.vx * 0.5;
}
```

Simple and effective.

Let me now write the complete code. I'll be thorough.

For the "objects transitioning correctly from underwater motion to airborne motion and then to floor collisions":
- An object inside the tank is in water when y < waterLevel
- It's in air (inside tank) when y >= waterLevel but still within tank bounds
- When it exits the tank (x > TANK_RIGHT), it's fully airborne
- When it hits the floor (y > FLOOR_Y), it's on the floor

For each object, I'll track its state:
```javascript
object.state = 'in_water' | 'in_air' | 'airborne' | 'on_floor';
```

- `in_water`: inside tank, below water surface
- `in_air`: inside tank, above water surface
- `airborne`: outside tank, in air
- `on_floor`: on the floor

The transitions:
1. in_water → in_air: water level drops below object
2. in_water → airborne: object exits tank through breach (current too strong)
3. in_air → airborne: object exits tank
4. in_air → in_water: water level rises? (unlikely unless water surges)
5. airborne → on_floor: object hits floor

For floating objects (toy):
- They stay at waterLevel (float on surface)
- As waterLevel changes, they follow
- If pushed out of tank, they become airborne (but floating on the puddle surface)

Actually, for the floating toy, when it exits the tank and lands on the floor, it should float on the puddle. This is tricky to implement perfectly. Let me just have it land on the floor and stay there (or sit on top of puddle particles).

For rocks:
- They sink to the bottom
- Get pushed by current along the bottom
- When near breach, might be pushed out
- On floor: stop moving

Let me now write the code. I'll handle these cases in the update function.

Here's my final approach for each object type:

**Fish**:
- In water: swim, affected by current and buoyancy, try to swim against current
- Exit tank through breach when current is strong
- Airborne: flail (random velocity changes, gravity)
- On floor: weak flapping

**Rock**:
- In water: sink to bottom, pushed by current along bottom
- Exit tank when near breach and current is strong
- Airborne: gravity + air drag
- On floor: stop

**Plant**:
- Rooted at bottom, sway with current
- Becomes exposed when water drains
- Continues to sway in air

**Floating Toy**:
- Floats at water surface
- Pushed by current
- Exit tank when near breach
- Airborne (briefly) then lands on floor
- On floor: sits there (or on puddle)

Let me now write the complete code. This is going to be a large file.

Actually, I just realized - for the fish, when they're in the water and the current pushes them, they should be physically pushed. The current adds velocity to the fish, but the fish can also swim against the current. So:

```javascript
// Fish physics in water:
if (fish isInWater) {
  // Apply current
  fish.vx += current.x * dt * currentStrength;
  fish.vy += current.y * dt * currentStrength;
  
  // Swim (fish can control its own velocity)
  if (fish wants to swim away) {
    fish.vx += swimDirection.x * swimSpeed * dt;
    fish.vy += swimDirection.y * swimSpeed * dt;
  }
  
  // Water drag
  fish.vx *= 0.9;
  fish.vy *= 0.9;
}
```

The fish's actual velocity is the sum of current and swimming. If the current is stronger than the fish's swimming ability, the fish gets swept.

For the fish trying to swim against the current:
```javascript
let currentSpeed = Math.sqrt(current.x^2 + current.y^2);
if (currentSpeed > fishSwimSpeed * 0.8) {
  // Current is strong - try to swim against it
  fish.vx -= current.x * dt * 0.5; // partial compensation
  // If current is really strong, the fish can't compensate and gets swept
} else {
  // Swim normally
  fish.vx += normalSwimDirection.x * fishSwimSpeed * dt;
}
```

OK, I'm going to write the code now. No more planning. Here's the complete implementation:

Let me also think about what visual effects will make this look great:

1. **Water surface**: Wavy, with light reflection
2. **Jet**: Bright, with some mist/spray around it
3. **Puddle**: Expanding, with ripple effects
4. **Fish**: Smooth swimming animation, colorful
5. **Glass**: Reflective, with crack propagation visual
6. **Objects**: Natural movement and physics
7. **Room**: Atmospheric lighting

For the water surface waves, I'll use a sine wave distortion on the water level line.

For the jet, I'll render particles with varying sizes and alpha, and add some spray particles around the edges.

For the puddle, I'll use a growing shape with ripples.

Let me write the code now.

I want to also add:
- A "Trigger" button that appears after dragging, or just trigger on release
- A "Reset" button to restart
- Maybe some text instructions

Actually, let me keep the UI minimal:
- During setup: text "Drag on the tank to position the crack"
- During dragging: text "Release to trigger"
- During simulation: no text (let the visuals speak)
- After settled: text "Click to reset"

Or I could add buttons. Let me use text overlays.

Let me also add a visual indicator for the crack position during dragging (a line or marker on the tank).

OK, here's my final code plan:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; overflow: hidden; background: #000; }
  canvas { display: block; margin: 0 auto; background: #111; }
  #info { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: white; font-family: sans-serif; font-size: 14px; }
</style>
</head>
<body>
  <div id="info">Drag on the tank to position the crack, then release to trigger</div>
  <canvas id="canvas"></canvas>
  <script>
    // All code here
  </script>
</body>
</html>
```

Let me now write the complete JavaScript. I'll make it comprehensive.

I think I should stop planning and just write the code. Let me do it.

Let me write the code in a logical, well-organized way. I'll create a single HTML file with all the code.

Here's what I'll write:
1. CSS for full-screen canvas with dark background
2. Canvas setup
3. Physics constants
4. State variables
5. Utility functions
6. Object classes (Particle, GlassFragment, Fish, Rock, Plant, FloatingToy)
7. Setup function
8. Current computation
9. Update function (handles all states)
10. Render function
11. Event handlers
12. Main loop

Let me write it now. I'll be thorough and make it a complete, working simulation.

Let me start writing the actual code. I'll write it section by section, but in one file.

Here goes:

Actually, I want to think about one more important detail: how the jet particles create the puddle. When jet particles hit the floor:
1. They stop (or bounce slightly)
2. They create small spray particles (radial explosion)
3. They turn into puddle particles (spread on floor, high friction)
4. The puddleVolume counter increases

For the puddle particles:
- Position: at floor level (FLOOR_Y)
- Velocity: radial from impact point, with some randomness
- Friction: high (slow down quickly)
- Bounce off walls
- Size: small (2-4 pixels)
- Color: blue with low alpha

When the tank is fully drained, the puddle should have a certain size based on the total water volume that escaped.

OK, I'm going to write the code now. Let me just do it.

Let me also think about how the objects interact with the puddle. After the tank drains:
- Fish on the floor (flopping)
- Rocks on the floor
- Toy might be in the puddle (floating)
- Plants still rooted (but exposed)
- Glass fragments on the floor

The toy should float on the puddle if it's there. But implementing realistic puddle floating is complex. Let me just have the toy rest on the floor near the puddle.

OK, I'm writing the code now. For real.

Let me think about the structure one more time, then write it:

```javascript
// Constants
const config = {
  width: 900,
  height: 650,
  gravity: 1500,
  tank: { x: 250, y: 100, w: 300, h: 450 },
  room: { left: 30, right: 870, top: 30, floor: 560 },
};

// State
const state = {
  gameState: 'setup',
  time: 0,
  crackY: 325,
  crackProgress: 0,
  waterLevel: 100,
  panelBurst: false,
  isDragging: false,
  lastMouseY: 0,
  particles: [],
  fragments: [],
  fish: [],
  rocks: [],
  plants: [],
  toy: null,
  puddleVolume: 0,
  puddleParticles: [],
};

// Classes
class Particle { ... }
class GlassFragment { ... }
class Fish { ... }
class Rock { ... }
class Plant { ... }
class FloatingToy { ... }

// Functions
function setup() { ... }
function computeCurrent(x, y) { ... }
function update(dt) { ... }
function render() { ... }
function handleMouseDown(e) { ... }
function handleMouseMove(e) { ... }
function handleMouseUp(e) { ... }

// Init
setup();
requestAnimationFrame(loop);

function loop() {
  update(1/60);
  render();
  requestAnimationFrame(loop);
}
```

OK, let me write the complete code now. I'll fill in all the details.

Let me write it as a complete HTML file. I'll aim for about 500-600 lines of JavaScript.

For the particle system, I'll have different particle types:
- WATER_JET: blue, fast, curving, for the water jet
- SPRAY: white/light blue, fast, short-lived, for splash
- PUDDLE: small blue, slow, for the puddle
- BUBBLE: white, tiny, rises, for bubbles in water
- DEBRIS: small brown/gray, for floor impact

Each particle has: type, x, y, vx, vy, size, color, life, maxLife

Let me now write the code.

I'll also add some nice visual effects:
- Canvas shadow for glow effects
- Gradient fills for water and glass
- Alpha blending for transparency
- Wave distortion for water surface

For the water surface, I'll render a wavy line:
```javascript
function drawWavySurface(y, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(config.tank.x, y);
  for (let x = config.tank.x; x <= config.tank.x + config.tank.w; x += 10) {
    let wave = Math.sin(state.time * 3 + x * 0.1) * 4;
    ctx.lineTo(x, y + wave);
  }
  ctx.lineTo(config.tank.x + config.tank.w, y);
  ctx.lineTo(config.tank.x + config.tank.w, TANK_BOTTOM);
  ctx.lineTo(config.tank.x, TANK_BOTTOM);
  ctx.closePath();
  ctx.fill();
}
```

Wait, I want the water fill to be behind the wave surface. Let me just fill a rectangle up to the (approximate) water level, then draw the wavy surface line on top.

Actually, for performance, let me simplify:
1. Fill water area with a rectangle (up to waterLevel + small wave offset)
2. Draw a wavy line at waterLevel for the surface
3. Objects are rendered on top

For the wavy surface line, I can use `ctx.moveTo` and `ctx.lineTo` with sine distortion, then stroke it.

OK, I'm going to write the code now. Let me just do it.

Let me think about the final rendering order:
1. Clear canvas (room background)
2. Draw room (floor, walls)
3. Draw tank (back wall fill, side walls)
4. Draw water (fill up to waterLevel, with wave surface)
5. Draw objects (fish, rocks, plants, toy)
6. Draw tank outline (glass walls)
7. Draw water surface waves (on top of water fill)
8. Draw jet particles
9. Draw glass fragments
10. Draw puddle on floor
11. Draw crack (if active)
12. Draw UI (instructions, effects)

Let me write the complete code now. I'll make it a polished, engaging simulation.

Here's the complete code. I'm going to write it all in one go.

Actually, let me think about a subtle but important point: when objects are floating at the water surface and the water level drops, the objects should follow the surface down. For the floating toy, this means:
- The toy's y position = waterLevel - toyHeight/2 (floating at surface)
- As waterLevel changes, the toy moves with it
- But the toy is also affected by current (pushed toward breach)

For the fish near the surface, they should also be affected by the dropping water level. If they're at the surface, they'll be carried down as the water level drops (but they can swim away).

For submerged objects (rocks at bottom), they're not affected by water level changes (they're at the bottom).

OK, I think I have enough understanding. Let me write the code.

I want to make sure the fish behavior is interesting:
1. Fish swim around normally at the start
2. When the crack starts leaking, they notice the current and swim away from it
3. As the crack grows and the panel breaks, the current becomes very strong
4. Fish try to swim against it but get swept toward the breach
5. They exit the tank through the breach
6. They become airborne (flapping)
7. They land on the floor (still flapping)
8. Eventually they stop moving

For the fish AI, I'll use:
- A target position that the fish swims toward
- When current is detected, the target shifts to "away from the breach"
- When current is too strong, the fish surrenders and lets the current carry them
- The fish's actual velocity = swim velocity + current velocity

Let me implement this:

```javascript
class Fish {
  constructor(x, y, index) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.index = index;
    this.size = 15 + Math.random() * 5;
    this.color = ['#FF6B6B', '#4ECDC4', '#FFE66D', '#A8E6CF', '#FF9AA2'][index % 5];
    this.tailPhase = Math.random() * Math.PI * 2;
    this.state = 'in_water'; // 'in_water', 'airborne', 'on_floor'
    this.swimTargetX = x + (Math.random() - 0.5) * 100;
    this.swimTargetY = y + (Math.random() - 0.5) * 50;
    this.swimSpeed = 100 + Math.random() * 50;
    this.facing = 1; // 1 = right, -1 = left
  }

  update(dt, waterLevel, crackY, gameState, panelBurst) {
    if (this.state === 'on_floor') {
      // Weak flapping
      this.x += (Math.random() - 0.5) * 2;
      return;
    }

    if (this.state === 'airborne') {
      // In air - gravity and basic physics
      this.vy += G * dt;
      this.vx *= 0.97; // air drag
      this.vy *= 0.97;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      
      // Floor collision
      if (this.y > FLOOR_Y - this.size/2) {
        this.y = FLOOR_Y - this.size/2;
        this.vy *= -0.3;
        this.vx *= 0.7;
        if (Math.abs(this.vy) < 50 && Math.abs(this.vx) < 30) {
          this.state = 'on_floor';
        }
      }
      return;
    }

    // In water state
    let inWater = this.y < waterLevel;
    
    if (!inWater && !panelBurst) {
      // Above water but panel not burst - still in tank, in air
      this.vy += G * dt * 0.5; // reduced gravity in air inside tank
      this.vx *= 0.98;
      this.vy *= 0.98;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      
      // Tank wall collisions
      if (this.x < TANK_X + this.size) this.x = TANK_X + this.size;
      if (this.x > TANK_RIGHT - this.size) this.x = TANK_RIGHT - this.size;
      if (this.y > TANK_BOTTOM - this.size) this.y = TANK_BOTTOM - this.size;
      return;
    }
    
    if (!inWater && panelBurst) {
      // In air inside tank after panel burst - check if exits
      this.vy += G * dt;
      this.vx *= 0.98;
      this.vy *= 0.98;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      
      // Exit through right side
      if (this.x > TANK_RIGHT) {
        this.state = 'airborne';
      }
      return;
    }

    // In water - apply physics
    let current = computeCurrent(this.x, this.y, waterLevel, crackY, gameState, panelBurst);
    
    // Swim behavior
    if (gameState === 'cracking' || panelBurst) {
      // Try to swim away from breach (left)
      let currentSpeed = Math.sqrt(current.x**2 + current.y**2);
      if (currentSpeed > this.swimSpeed * 0.3) {
        // Swim against current
        this.vx -= current.x * dt * 0.3; // partial compensation
        // Face away from current
        this.facing = current.x > 0 ? -1 : 1;
      } else {
        // Swim toward target (which is away from breach)
        this.swimTargetX = TANK_X + 50; // try to go left
        let dx = this.swimTargetX - this.x;
        this.facing = dx > 0 ? 1 : -1;
        if (Math.abs(dx) > 5) {
          this.vx += this.facing * this.swimSpeed * dt;
        }
      }
      
      // If current is very strong, get swept
      if (currentSpeed > this.swimSpeed * 1.5) {
        this.vx += current.x * dt * 0.5;
      }
      
      // Check if near breach and about to exit
      if (this.x > TANK_RIGHT - 30 && currentSpeed > this.swimSpeed * 0.5) {
        this.state = 'airborne';
      }
    } else {
      // Normal swimming
      let dx = this.swimTargetX - this.x;
      let dy = this.swimTargetY - this.y;
      let dist = Math.sqrt(dx**2 + dy**2);
      this.facing = dx > 0 ? 1 : -1;
      if (dist > 5) {
        this.vx += (dx/dist) * this.swimSpeed * dt;
        this.vy += (dy/dist) * this.swimSpeed * 0.5 * dt;
      }
      if (dist < 20) {
        this.swimTargetX = TANK_X + 50 + Math.random() * (TANK_W - 100);
        this.swimTargetY = TANK_Y + 50 + Math.random() * (TANK_H - 100);
      }
    }
    
    // Apply current
    this.vx += current.x * dt;
    this.vy += current.y * dt;
    
    // Water drag
    this.vx *= 0.95;
    this.vy *= 0.95;
    
    // Buoyancy (fish are neutrally buoyant)
    // Keep fish near their preferred depth
    
    // Update position
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    
    // Tank wall collisions (except right if panel burst)
    if (this.x < TANK_X + this.size) {
      this.x = TANK_X + this.size;
      this.vx = 0;
    }
    if (!panelBurst && this.x > TANK_RIGHT - this.size) {
      this.x = TANK_RIGHT - this.size;
      this.vx = 0;
    }
    if (this.y < TANK_Y + this.size) {
      this.y = TANK_Y + this.size;
    }
    // Fish can go above water surface inside tank
  }
  
  render(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.facing, 1);
    
    // Tail animation
    this.tailPhase += 0.2;
    let tailOffset = Math.sin(this.tailPhase) * 0.3;
    
    // Body
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.ellipse(0, 0, this.size, this.size * 0.7, 0, 0, Math.PI * 2);
    ctx.fill();
    
    // Tail
    ctx.beginPath();
    ctx.moveTo(-this.size, 0);
    ctx.lineTo(-this.size - 8, -6);
    ctx.lineTo(-this.size - 8, 6);
    ctx.closePath();
    ctx.fill();
    
    // Eye
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.arc(this.size * 0.4, -2, 2, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.restore();
  }
}
```

OK, this is getting long. Let me just write the complete code now. I'll include all classes and functions.

I need to think about the computeCurrent function more carefully. The current should:
1. Only exist when there's a crack/leak/burst
2. Flow toward the breach (rightward)
3. Be stronger when water level is higher (more depth)
4. Be stronger near the crack
5. Build up during crack propagation

```javascript
function computeCurrent(x, y, waterLevel, crackY) {
  // No current if no crack/leak
  if (gameState === 'setup' || gameState === 'dragging') return { x: 0, y: 0 };
  
  let h = crackY - waterLevel; // depth of crack below water surface
  if (h <= 0) return { x: 0, y: 0 }; // crack above water
  
  let speed = Math.sqrt(2 * G * h) * 0.3; // scaled current speed
  
  // Increase with crack progress
  let crackFactor = Math.max(0, (crackProgress - 0.3) / 0.7);
  speed *= crackFactor;
  
  // If panel is burst, full current
  if (panelBurst) {
    let fullFlow = Math.sqrt(2 * G * (TANK_BOTTOM - waterLevel)) * 0.3;
    speed = fullFlow;
  }
  
  // Current is stronger at depth
  let depthFactor = (waterLevel - y) / (waterLevel - TANK_BOTTOM + 1);
  depthFactor = Math.max(0, Math.min(1, depthFactor));
  speed *= (0.5 + 0.5 * depthFactor);
  
  return { x: speed, y: 0 };
}
```

This should give a current that:
- Flows rightward (toward breach)
- Is stronger at greater depth
- Is zero if no crack
- Increases as crack grows
- Is at full strength after panel burst

OK, I'm going to write the complete code now. Let me create the full HTML file.

Let me also think about the crack propagation animation timing:
- crackProgress goes from 0 to 1 over 1 second
- crackLength = crackProgress * (TANK_H / 2) (grows from crackY to top and bottom)
- At crackProgress = 1, the crack reaches top and bottom, panel breaks

For the crack visual:
- Draw crack on right wall
- Crack starts at crackY and grows up/down
- Width of crack increases slightly with progress
- Glow effect on crack line

Let me write the code now.

For the panel breaking:
- When crackProgress reaches 1:
  - Set panelBurst = true
  - Create glass fragments
  - Change gameState to 'bursting'
  - After a brief bursting phase, change to 'draining'

For glass fragments:
- Generate 20-30 fragments
- Position: within the right panel area
- Velocity: outward (positive x) + random vertical
- Angular velocity: random
- Some start underwater (below waterLevel) - water resistance
- Size: 8-20 pixels

For the fragments' physics:
```javascript
class GlassFragment {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.vx = (100 + Math.random() * 200) * (0.5 + Math.random() * 0.5);
    this.vy = (Math.random() - 0.5) * 100;
    this.angle = Math.random() * Math.PI * 2;
    this.angularVel = (Math.random() - 0.5) * 3;
    this.inWater = y < waterLevel;
    this.onFloor = false;
    
    // Generate shape points
    this.points = [];
    let sides = 3 + Math.floor(Math.random() * 3);
    for (let i = 0; i < sides; i++) {
      let angle = (i / sides) * Math.PI * 2;
      let radius = size * (0.7 + Math.random() * 0.3);
      this.points.push({
        x: Math.cos(angle) * radius,
        y: Math.sin(angle) * radius
      });
    }
  }
  
  update(dt) {
    if (this.onFloor) {
      this.angularVel *= 0.95;
      return;
    }
    
    let drag = this.inWater ? 0.85 : 0.97;
    this.vx *= drag;
    this.vy *= drag;
    this.vy += G * dt * (this.inWater ? 0.3 : 1); // reduced gravity in water
    
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    this.angle += this.angularVel * dt;
    this.angularVel *= 0.98;
    
    // Exit water surface
    if (this.inWater && this.y < waterLevel) {
      this.inWater = false;
    }
    
    // Floor collision
    if (this.y > FLOOR_Y - this.size/2) {
      this.y = FLOOR_Y - this.size/2;
      this.vy *= -0.4;
      this.vx *= 0.7;
      if (Math.abs(this.vy) < 30 && Math.abs(this.vx) < 20) {
        this.onFloor = true;
        this.angularVel = 0;
      }
    }
    
    // Wall collision
    if (this.x < ROOM_LEFT) {
      this.x = ROOM_LEFT;
      this.vx = -this.vx * 0.5;
    }
    if (this.x > ROOM_RIGHT) {
      this.x = ROOM_RIGHT;
      this.vx = -this.vx * 0.5;
    }
  }
  
  render(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    
    ctx.fillStyle = this.inWater ? '#88CCFF' : '#FFFFFF';
    ctx.globalAlpha = 0.8;
    ctx.beginPath();
    ctx.moveTo(this.points[0].x, this.points[0].y);
    for (let i = 1; i < this.points.length; i++) {
      ctx.lineTo(this.points[i].x, this.points[i].y);
    }
    ctx.closePath();
    ctx.fill();
    
    // Highlight
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(-this.size/3, -this.size/3, this.size/3, this.size/3);
    
    ctx.restore();
    ctx.globalAlpha = 1;
  }
}
```

OK, I'm going to write the complete code now. Let me put it all together.

Let me think about one more visual detail: the water in the tank should look like it has depth. I'll use a vertical gradient from light blue (top) to dark blue (bottom).

For the jet, I want it to look like a solid stream of water. I'll emit particles that are closely spaced at the source and spread out as they travel. The particles should be mostly blue-white.

For the splash when the jet hits the floor, I'll emit particles radially from the impact point, with some going upward (spray) and some spreading horizontally (puddle).

OK, here's the complete code. Let me write it all now.

One more thing: I need to handle the case where the user drags the crack position but doesn't trigger (releases without starting the crack sequence). I'll:
1. If user drags and releases, start the crack propagation
2. If user drags and releases without any significant drag, just show the crack position and wait for a click to trigger

Actually, let me simplify: the drag sets the crack position, and releasing triggers the sequence. If the user doesn't drag (just clicks), the crack starts at the middle.

Or even simpler: 
- User clicks and drags on the tank's right wall
- While dragging, a crack line is shown at the current Y position
- On release, the crack propagation starts
- The crack position is where the user released

Let me implement this. The crack propagation starts on release.

For the UI:
- During setup: "Drag on the tank wall to position the crack"
- During drag: "Release to trigger the burst"
- After trigger: "Simulation running..." (or no text)
- On settled: "Click to reset"

Let me now write the complete code. I'll make it polished and complete.

Here's the final code:

I'm going to write it all now. Let me focus on getting it right.

Actually, let me reconsider the particle system. I want to make sure the jet looks good. The jet should be:
- A dense stream of water particles
- Curving due to gravity
- Some mist around it
- Impacting the floor with a splash

For the jet particles:
- Emitted from (TANK_RIGHT, waterLevel) after panel burst
- Or from (TANK_RIGHT, crackY) during crack propagation
- Velocity: based on Torricelli's law
- Direction: outward (positive x) with slight down
- Size: 3-8 pixels
- Color: blue (#4A90E2) with some white
- Lifetime: 3-5 seconds (or until they hit floor)

For the jet to look like a stream, I'll emit particles at a high rate (10-20 per frame) with a narrow spread angle.

For the splash:
- When jet particles hit floor (y > FLOOR_Y)
- Emit 5-10 spray particles in a radial pattern
- Emit 3-5 puddle particles that spread on the floor

For the mist:
- A few white particles that disperse quickly
- Short lifetime (0.5 seconds)

OK, let me write the code now. I'm going to create the complete simulation.

Let me also think about the camera/view. I'll use the full canvas (900x650) as the view. The room fills the entire canvas. The tank is centered horizontally.

Room:
- Floor at y = 560
- Left wall at x = 30
- Right wall at x = 870
- Back wall at y = 30 (top)

Tank:
- x = 250, y = 100, w = 300, h = 450
- Right side at x = 550 (where crack and jet are)
- Bottom at y = 550 (on the floor)

The jet goes from x=550 to the right, toward the floor at y=560.
The puddle forms around x=600-700 on the floor.
The right wall is at x=870, so there's room for the puddle to spread.

Let me verify: jet starts at (550, crackY), goes right. If crackY = 325 (middle of tank):
- Jet particle starts at (550, 325)
- Gravity pulls it down (G = 1500)
- Velocity: sqrt(2 * 1500 * (325 - 100)) = sqrt(2 * 1500 * 225) = sqrt(675000) ≈ 822 pixels/s
- Time to reach floor: distance = 560 - 325 = 235 pixels
  - 235 = 0.5 * 1500 * t² + 0 * t
  - t² = 470/1500 = 0.313
  - t = 0.56 seconds
- Horizontal distance: 822 * 0.56 = 460 pixels
- Impact at x = 550 + 460 = 1010 (way past the room right wall at 870!)

Hmm, the jet would go past the right wall. That means the jet would hit the wall before reaching the floor. Or I need to adjust.

Let me either:
1. Make the room wider (right wall at x=1100 or so)
2. Make the jet velocity lower
3. Make gravity higher

Let me make the room wider: canvas = 1000x650, room right at 950. Then the jet at 1010 would be slightly past the wall, so it would hit the wall and splash there. That's actually a cool effect - the water hits the wall and splashes back.

Or, with a lower crack (crackY = 450):
- h = 450 - 100 = 350
- v = sqrt(2 * 1500 * 350) = sqrt(1050000) ≈ 1025 pixels/s
- Time to floor: (560 - 450) = 110 pixels
  - t = sqrt(2 * 110 / 1500) = sqrt(0.147) = 0.38 seconds
- Horizontal: 1025 * 0.38 = 389 pixels
- Impact at x = 550 + 389 = 939

With canvas at 1000, room right at 950, the jet would hit at 939, which is just before the wall. That's better.

Actually, let me use a larger canvas: 1000 x 700. Room from 30 to 970. Floor at 600. Tank: x=250, y=100, w=300, h=500 (bottom at 600).

With crackY = 450 (middle):
- v = sqrt(2 * 1500 * 350) ≈ 1025 pixels/s
- Time to floor: 600 - 450 = 150 pixels
  - t = sqrt(2 * 1500 / 1500) * sqrt(150) = sqrt(300/1500) = sqrt(0.2) = 0.447 seconds
  - Wait: t = sqrt(2 * 150 / 1500) = sqrt(0.2) = 0.447
- Horizontal: 1025 * 0.447 = 458 pixels
- Impact at x = 550 + 458 = 1008

Still past the wall! Let me adjust gravity or velocity.

Actually, let me use G = 800 (less gravity, more natural-looking arc):
- v = sqrt(2 * 800 * 350) = sqrt(560000) ≈ 748 pixels/s
- Time to floor: 150 pixels
  - t = sqrt(2 * 150 / 800) = sqrt(0.375) = 0.612 seconds
- Horizontal: 748 * 0.612 = 458 pixels
- Impact at x = 550 + 458 = 1008

Still too far. Let me use G = 600:
- v = sqrt(2 * 600 * 350) = sqrt(420000) ≈ 648 pixels/s
- Time to floor: t = sqrt(2 * 150 / 600) = sqrt(0.5) = 0.707
- Horizontal: 648 * 0.707 = 458

The physics gives the same range regardless of gravity (that's a known result for projectile motion - range doesn't depend on g). So I need to reduce the effective jet velocity.

Torricelli's law gives v = sqrt(2gh). With h = 350 and G = 600:
- v = sqrt(2 * 600 * 350) = sqrt(420000) ≈ 648

Range = v * sqrt(2 * height / G) = 648 * sqrt(2 * 150 / 600) = 648 * 0.707 = 458

To get the range to ~400 pixels (impact at x = 550 + 400 = 950), I need:
- v * sqrt(2 * 150 / G) = 400
- v = sqrt(2 * G * 350)
- sqrt(2 * G * 350) * sqrt(2 * 150 / G) = 400
- sqrt(2 * G * 350 * 2 * 150 / G) = 400
- sqrt(4 * 350 * 150) = 400
- sqrt(210000) = 458 ≠ 400

Hmm, the math shows that the range is independent of G and depends only on h and the drop height. The range is:
R = sqrt(4 * h * dropHeight) = sqrt(4 * 350 * 150) = sqrt(210000) ≈ 458

So the jet will always land ~458 pixels from the crack, regardless of gravity. With the crack at x=550, the impact is at x=1008.

I have a few options:
1. Make the canvas wider (1200px)
2. Have the jet hit the wall and splash (which is actually cool)
3. Reduce the effective velocity (e.g., use a drag coefficient for the jet)

Option 2 is actually good - the jet hits the wall, splashes, and water flows along the wall. But it complicates the physics.

Option 1 is easiest. Let me use a wider canvas: 1100 x 650. Room from 30 to 1070. Then the impact at 1008 is within the room. But the tank would be at x=300, which might be too centered.

Actually, let me just use a wider room. Canvas = 1100 x 650. The tank at x=250, w=300 (right at x=550). The jet can travel ~458 pixels to x=1008, and the room right wall can be at x=1050 or 1070. That works.

But actually, I realize that the jet velocity should be reduced in practice (not all the theoretical velocity is achieved due to friction, turbulence, etc.). I can multiply by a coefficient like 0.6-0.7 to get a shorter jet.

Let me use a jet coefficient of 0.5:
- v_effective = 0.5 * sqrt(2 * G * h) = 0.5 * 1025 = 512 (for crackY=450, h=350, G=1500)
- Time to floor: sqrt(2 * 150 / 1500) = 0.447
- Range: 512 * 0.447 = 229
- Impact at x = 550 + 229 = 779

With canvas=900, room right at 870, the impact at 779 is well within the room. 

But the lower the crack, the stronger the jet. With crackY = 550 (bottom):
- h = 550 - 100 = 450
- v = 0.5 * sqrt(2 * 1500 * 450) = 0.5 * sqrt(1350000) = 0.5 * 1162 = 581
- Range: 581 * 0.447 = 259 (hmm, similar because the range formula is different)

Actually wait, if crackY = 550 (bottom of tank):
- h = crackY - waterLevel = 550 - 100 = 450
- But the jet starts at y=550 (tank bottom, on the floor)
- So the jet doesn't fall - it's horizontal!
- Time to "fall": 0 (already at floor level)
- Range: v * 0 = 0? No, that's not right.

Actually, the crack is on the right wall. The jet comes out horizontally from the right wall. If the crack is at the bottom (y=550), the jet starts at floor level and goes horizontally. It wouldn't fall - it would just spread along the floor.

If the crack is at the top (y=100), the jet starts at the tank top and falls:
- h = 100 - 100 = 0 (crack is at water surface level)
- v = 0 (no flow!)
- No jet

So the crack at the top barely has any jet (water level is at the top, so there's minimal depth above the crack).

The crack at the bottom has maximum depth (h = 450) but the jet is at floor level so it's horizontal.

The crack in the middle has moderate depth and the jet arcs down.

This is physically correct! A lower crack produces a stronger jet (more depth = higher velocity), but the jet also has less distance to fall. A higher crack has less depth (weaker jet) but more distance to fall.

With the 0.5 coefficient:
- Crack at 325 (middle): h=225, v=0.5*sqrt(675000)=0.5*822=411, drop=600-325=275, t=sqrt(550/1500)=0.606, range=411*0.606=249, impact at x=799
- Crack at 200 (high): h=100, v=0.5*sqrt(300000)=0.5*548=274, drop=600-200=400, t=sqrt(800/1500)=0.730, range=274*0.730=200, impact at x=750
- Crack at 450 (low): h=350, v=0.5*sqrt(1050000)=0.5*1025=512, drop=600-450=150, t=sqrt(300/1500)=0.447, range=512*0.447=229, impact at x=779
- Crack at 550 (bottom): h=450, v=0.5*sqrt(1350000)=0.5*1162=581, drop=600-550=50, t=sqrt(100/1500)=0.258, range=581*0.258=150, impact at x=700

So the jet range varies from 150 to 249 pixels depending on crack position. The jet is strongest (highest velocity) at the bottom, but also has less distance to travel. The maximum range is at the middle.

For the visual effect, a lower crack produces a stronger jet (higher velocity) even if the range isn't much longer. The jet particles move faster, which is visually noticeable.

With a 0.5 coefficient and canvas=900, the maximum impact is at x=799, well within the room (right wall at 870). This works!

Let me use:
- G = 1500
- Jet velocity coefficient = 0.5
- Canvas: 900 x 650
- Floor at 560 (tank bottom at 560, floor slightly below)
- Tank: x=250, y=100, w=300, h=460 (bottom at 560)

Wait, TANK_H = 460, TANK_BOTTOM = 560. Let me adjust:
- TANK_X = 250, TANK_Y = 100
- TANK_W = 300, TANK_H = 460
- TANK_RIGHT = 550
- TANK_BOTTOM = 560
- FLOOR_Y = 560 (tank bottom = floor)

OK, this all works. Let me finalize the constants and write the code.

Actually, I want the floor to be slightly below the tank bottom, so the tank sits on a pedestal. But for simplicity, let me keep them the same.

Let me also adjust the water level. waterLevel starts at TANK_Y = 100 (full tank). It increases (goes down) to TANK_BOTTOM = 560 (empty).

For the water depth: TANK_BOTTOM - waterLevel = 460 pixels initially.

OK, I'm writing the code now. Here it is:

Let me think about the complete list of particles I'll use:

1. **WaterJetParticle**: emitted from crack/breach, blue, follows projectile motion, hits floor → becomes PuddleParticle
2. **SplashParticle**: emitted when jet hits floor, white/light blue, radial spread, short lifetime
3. **PuddleParticle**: spreads on floor, blue, slow, bounces off walls
4. **BubbleParticle**: rises in water, white, tiny, gets swept by current
5. **SprayParticle**: fine mist from jet, very small, short lifetime
6. **GlassFragment**: flying glass pieces (separate class)

Total particle budget: ~1000
- Jet: ~20 per frame during burst
- Splash: ~10 per jet impact
- Puddle: ~5 per jet impact (spreads slowly, accumulates)
- Bubbles: ~2 per frame (continuous)
- Spray: ~3 per jet particle (occasional)

This should be manageable.

Let me write the code now. I'm going to create the complete HTML file.

Let me also think about the visual style of the water. I want it to look like real water:
- Blue color (#4A90E2 or similar)
- Transparency (alpha 0.4-0.6)
- Light reflection (white highlight at top)
- Refraction effect (objects slightly distorted below water - I'll skip this for performance)
- Wave animation

For the glass tank:
- Light blue color (#B3D9FF or similar)
- Transparency (alpha 0.3-0.5)
- Reflection highlights
- Crack propagation visual

For the room:
- Dark background (#1a1a2e or similar)
- Floor texture (maybe a simple pattern)
- Walls with some texture

OK, I'm going to write the code now. Here's the complete implementation:

Let me write the code section by section:

```javascript
// ===== SETUP =====
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 900;
canvas.height = 650;

// ===== CONSTANTS =====
const G = 1500;           // Gravity (px/s²)
const WIDTH = 900;
const HEIGHT = 650;

const ROOM = { left: 30, right: 870, top: 30, floor: 560 };
const TANK = { x: 250, y: 100, w: 300, h: 460 };
const TANK_RIGHT = TANK.x + TANK.w;  // 550
const TANK_BOTTOM = TANK.y + TANK.h; // 560
const TANK_TOP = TANK.y;              // 100

const WATER_COLOR = '#4A90E2';
const GLASS_COLOR = '#B3D9FF';
const FLOOR_COLOR = '#2a2a3e';

// ===== STATE =====
let gameState = 'setup';
let simTime = 0;
let crackY = (TANK_TOP + TANK_BOTTOM) / 2; // 330
let crackProgress = 0;
let crackPropagationStart = 0;
let waterLevel = TANK_TOP; // 100 (starts full)
let panelBurst = false;
let panelBroken = false;
let isDragging = false;
let dragStartY = 0;

const particles = [];
const fragments = [];
const fishList = [];
const rockList = [];
const plantList = [];
let toy = null;

// ===== UTILS =====
function rand(min, max) { return Math.random() * (max - min) + min; }
function randInt(min, max) { return Math.floor(rand(min, max + 1)); }
function lerp(a, b, t) { return a + (b - a) * t; }
function dist(x1, y1, x2, y2) { return Math.sqrt((x2-x1)**2 + (y2-y1)**2); }
```

OK, I'm just going to write the full code now in the file. Let me do it.

I'll write a comprehensive simulation. Let me make it really good.

I realize I've been planning for a very long time. Let me just write the code now.

Key things to implement:
1. Tank with glass, water, crack
2. Jet of water based on Torricelli's law
3. Objects: fish, rocks, plants, floating toy
4. Glass fragments when panel breaks
5. Puddle on floor
6. User interaction (drag crack, release to trigger)
7. State machine: setup → cracking → bursting → draining → settled

Let me write the code now.

For the puddle, I'll use a particle system where particles are emitted from the jet impact point, spread on the floor, and bounce off walls. The particles accumulate to form a visible puddle.

For the current, I'll compute a simple flow field that pushes objects toward the breach.

Let me write the complete code now. I'll focus on making it work and look good.

I'm going to write about 500-600 lines of JavaScript. Let me do it.

Let me think about what colors to use:
- Room background: dark blue-gray (#1a1a2e)
- Floor: medium gray (#2d2d44)
- Tank glass: light blue with alpha (#B3D9FF at 0.4)
- Water: blue with alpha (#4A90E2 at 0.5)
- Water surface: brighter blue (#6AB0FF)
- Crack: white with glow
- Jet: bright blue-white
- Puddle: blue with alpha (#4A90E2 at 0.3)
- Fish: orange, yellow, blue, etc.
- Rocks: gray (#666666)
- Plants: green (#2ecc71)
- Toy: yellow (#FFD93D)
- Glass fragments: white/silver with alpha

Let me write the code now.

For the water jet, I want to use a gradient of colors: deep blue at the core, lighter at the edges. I can achieve this by varying the particle color based on their position in the jet.

Actually, for simplicity, I'll use a single color for the jet particles but vary their alpha based on their distance from the center of the jet.

Let me just write the code now. I've planned enough.

Here's the complete HTML file:

Actually, I realize I should also handle the case where water jets out during crack propagation. The crack grows from crackY upward and downward. As it grows, water leaks through. The leak particles come from the crack position.

During crack propagation:
- crackProgress goes from 0 to 1
- crackLength = crackProgress * TANK_H (from crackY to TANK_TOP and crackY to TANK_BOTTOM)
- Leak starts when crackProgress > 0.3
- Leak velocity = sqrt(2 * G * (crackY - waterLevel)) * crackProgress * 0.5
- Leak particles are emitted from (TANK_RIGHT, crackY)

After burst:
- Panel is gone, full opening
- Jet velocity = sqrt(2 * G * (TANK_BOTTOM - waterLevel)) * 0.5
  - Wait, the jet should come from the water surface at the right edge, not from TANK_BOTTOM
  - Actually, water flows out from the entire right side. The "effective" jet comes from the water surface.
  - For simplicity, I'll emit from (TANK_RIGHT, waterLevel) with velocity based on water depth

Actually, let me emit from a range of positions along the right edge, from waterLevel to TANK_BOTTOM. This gives a more realistic "sheet" of water flowing out.

But for visual simplicity, let me emit from a single point at (TANK_RIGHT, crackY) during crack propagation, and from a line along the right edge during burst.

Hmm, let me just emit from the water surface at the right edge: (TANK_RIGHT, waterLevel). The velocity is based on the water depth.

For the crack propagation phase, the "effective" opening is the crack. So I'll emit from (TANK_RIGHT, crackY).

OK, let me finalize and write the code.

Here's my emission strategy:
- During crack propagation (crackProgress > 0.3): emit from (TANK_RIGHT, crackY)
- During burst: emit from a vertical line at x=TANK_RIGHT, from y=waterLevel to y=TANK_BOTTOM
  - Each frame, pick a random y in [waterLevel, TANK_BOTTOM] to emit from
  - Velocity = sqrt(2 * G * depthAtThatPoint) * 0.5

This gives a more realistic sheet flow after the panel breaks.

For the particle emission rate:
- Crack propagation: 5-10 particles per frame (small leak)
- Burst: 20-30 particles per frame (strong jet)

Particle velocity:
- v = sqrt(2 * G * h) * 0.5 * crackFactor
  - crackFactor = crackProgress during propagation
  - crackFactor = 1.0 after burst (but using full water depth)

Wait, I need to be more careful. After burst, the water flows out based on the water depth at the right edge:
- At each point along the right edge, the depth below the water surface determines the local flow velocity
- Deeper points have higher velocity

For simplicity, I'll compute an average velocity:
- h = TANK_BOTTOM - waterLevel (average water depth)
- v = sqrt(2 * G * h) * 0.5
- Emit from random y in [waterLevel, TANK_BOTTOM]

The flow rate (water level decrease):
- flowRate = v * openingWidth
- openingWidth = TANK_W * 0.2 (20% of tank width is the effective opening)
- dLevel = flowRate * dt / TANK_W

Wait, this doesn't match Torricelli's law exactly. Let me think about this more carefully.

In 2D (per unit depth into the page):
- Volume flow rate = integral of v(y) dy from y=TANK_BOTTOM to y=waterLevel
  - where v(y) = sqrt(2 * G * (y - TANK_BOTTOM)) for y > TANK_BOTTOM
  - Wait, y goes down. So at the bottom (y=TANK_BOTTOM), v = sqrt(2 * G * 0) = 0
  - At the water surface (y=waterLevel), v = sqrt(2 * G * (waterLevel - TANK_BOTTOM))
  
Hmm, I think the velocity is based on the depth below the water surface:
- At depth d below surface: v(d) = sqrt(2 * G * d)
- d = y - waterLevel (where y is the point, and y > waterLevel means below surface)
- v(y) = sqrt(2 * G * (y - waterLevel))

Volume flow rate = integral from y=waterLevel to y=TANK_BOTTOM of v(y) dy
= integral of sqrt(2 * G * (y - waterLevel)) dy from waterLevel to TANK_BOTTOM
Let u = y - waterLevel, du = dy
= integral of sqrt(2 * G * u) du from 0 to (TANK_BOTTOM - waterLevel)
= sqrt(2 * G) * integral of sqrt(u) du
= sqrt(2 * G) * (2/3) * (TANK_BOTTOM - waterLevel)^(3/2)
= (2/3) * sqrt(2 * G) * h^(3/2) where h = TANK_BOTTOM - waterLevel

Water level change:
- dW/dt = -flowRate = -(2/3) * sqrt(2 * G) * h^(3/2)
- dh/dt = (2/3) * sqrt(2 * G) * h^(3/2) / TANK_W

This gives a more realistic drain curve. Let me use this.

For particle emission:
- Pick random y in [waterLevel, TANK_BOTTOM]
- depth = y - waterLevel
- v = sqrt(2 * G * depth) * 0.5 + some randomness
- Direction: rightward with slight spread

OK, I think I have a good enough model. Let me write the code now.

I'll also need to handle the water level decrease during crack propagation (before burst):
- Leak through crack at crackY
- h = crackY - waterLevel (depth of crack below surface)
- v = sqrt(2 * G * h) * 0.3 * crackProgress (weaker than full burst)
- flowRate = v * crackEffectiveWidth (crack width = TANK_H * crackProgress)
- dLevel = flowRate * dt / TANK_W

Actually, let me simplify. During crack propagation:
- waterLevel decreases at a rate proportional to crackProgress
- Jet particles are emitted from crackY

After burst:
- waterLevel decreases based on full Torricelli flow
- Jet particles emitted from right edge

Let me use a simple model:
- dLevel/dt = k * sqrt(h) where h = TANK_BOTTOM - waterLevel (or crackY - waterLevel during propagation)
- k is a constant that controls drain speed

For propagation: k_prop = 30 (slow leak)
For burst: k_burst = 100 (fast drain)

This gives:
- dLevel/dt = k * sqrt(h)
- dh/dt = -k * sqrt(h) (since h = TANK_BOTTOM - waterLevel, dh/dt = -dLevel/dt)
- Solution: sqrt(h) = sqrt(h0) - k*t/2
- h = (sqrt(h0) - k*t/2)^2

Time to drain: t = 2 * sqrt(h0) / k
For h0 = 460 (full tank): t = 2 * 21.4 / 100 = 0.43 seconds (too fast!)

Let me use k_burst = 15:
- t = 2 * 21.4 / 15 = 2.85 seconds to drain

That's better. Let me use k_burst = 15 and k_prop = 3 (leak is slow).

Wait, but the flow rate should also affect particle emission. More flow = more particles. Let me emit particles based on the flow rate:
- particleCount = flowRate * dt / particleSize^2
- But cap at some maximum

For k_burst = 15:
- At h = 460: flowRate = 15 * sqrt(460) = 15 * 21.4 = 321 pixels/s
- Particles per frame (at 60fps): 321 / 60 / (5^2) = 321/60/25 = 0.21
  - That's less than 1 particle per frame!

That's too few. Let me use a different approach for particle emission:
- Emit based on jet velocity and a base rate
- Base rate: 30 particles per second at max velocity
- Scale by velocity fraction

Actually, let me just emit a fixed number of particles per frame during burst (15-20), and scale the velocity by the flow rate. This is simpler and will look good.

Let me also adjust the water level decrease to be more gradual. I'll use:
- dLevel = 0.5 * sqrt(h) * dt (where dt is in seconds)

At h = 460: dLevel = 0.5 * 21.4 * (1/60) = 0.178 per frame
Total drain: 460 / 0.178 = 2584 frames... that's 43 seconds. Too slow!

Let me try: dLevel = 2 * sqrt(h) * dt
At h = 460: dLevel = 2 * 21.4 / 60 = 0.713 per frame
Total drain: 460 / 0.713 = 645 frames = 10.7 seconds at initial rate
But it slows down as h decreases. The actual time is longer.

Using the formula t = 2 * sqrt(h0) / k:
- k = 2, h0 = 460: t = 2 * 21.4 / 2 = 21.4 seconds. Too slow.

Let me use k = 5:
- t = 2 * 21.4 / 5 = 8.6 seconds. Good.

But I also need the flow rate to control particle emission. Let me use:
- flowRate = 5 * sqrt(h) (this is the water level change rate)
- particleEmissionRate = flowRate * 0.1 (particles per frame, scaled)

At h = 460: flowRate = 5 * 21.4 = 107, particleEmissionRate = 10.7 per frame = ~11 particles per frame
At h = 100: flowRate = 5 * 10 = 50, particleEmissionRate = 5 per frame

So 5-11 particles per frame for the jet. That's reasonable.

For crack propagation (before burst):
- flowRate = 1 * sqrt(h) * crackProgress (slower)
- particleEmissionRate = flowRate * 0.05

OK, let me finalize:
- Water level decrease: dLevel = (5 * sqrt(h) * burstFactor) * dt, where burstFactor = 0.2 during propagation, 1.0 after burst
- Jet velocity: v = sqrt(2 * G * h) * 0.5 * burstFactor
- Particle emission: 10-20 per frame, scaled by velocity

Let me just write the code now. I'll tune the parameters as needed.

Here's the complete code. I'm writing it now:

Actually, I want to make sure the water drains in a reasonable time. Let me think about what looks good:
- The tank has 460 pixels of water depth
- With k=5 (after burst): t = 2*sqrt(460)/5 = 2*21.4/5 = 8.6 seconds
- During crack propagation (1 second): water level drops a little
- So total draining: ~1 second (crack) + ~8.6 seconds (drain) = ~9.6 seconds

That's good. The user sees the crack propagate, the panel burst, and then ~8 seconds of draining action before everything settles.

Let me write the code now.

For the objects, here's how they'll behave:
- 5 fish: swim around, try to escape when current starts, get swept out, land on floor
- 4 rocks: at bottom, pushed by current along bottom, some get pushed out
- 5 plants: at bottom, sway with current, become exposed
- 1 floating toy: at surface, pushed by current, gets pushed out, lands on floor

Let me position them:
- Fish: randomly in upper half of tank
- Rocks: at bottom, various positions
- Plants: at bottom, various x positions
- Toy: near center

OK, I'm writing the code now. Here it is:

Let me also think about the "fish attempting to swim against the current before being swept through the breach" requirement. This is a key visual:
1. Fish notice the current (when crack starts leaking)
2. They turn and swim toward the left wall (away from breach)
3. They struggle against the current (visible thrashing)
4. When current becomes too strong, they're swept right (toward breach)
5. They exit the tank through the breach
6. They become airborne and land on the floor

For the visual, I want to see the fish actively swimming (tail movement) against the current. This means their tails should be animated and they should move left even as the current pushes them right.

For the implementation, I'll:
1. Compute current at fish position
2. If current is detected, set fish target to left side of tank
3. Apply current velocity to fish velocity
4. Apply fish swim velocity (toward target)
5. If current > swim speed, fish is swept (velocity dominated by current)
6. When fish reaches breach area (x near TANK_RIGHT), transition to airborne

This should create the nice visual of fish fighting the current.

OK, I'm writing the complete code now. Let me create the file.

I'll make the code as complete and polished as I can. Let me write it.

For the rendering, I want to use these techniques:
- Canvas 2D context
- Save/restore for transformations
- Gradients for water and glass
- Shadows for glow effects
- Alpha for transparency
- GlobalCompositeOperation for some effects (if needed)

For performance:
- No unnecessary redraws
- Simple shapes
- Capped particle count
- Efficient collision detection

Let me write the code now. This is the final version:

Actually, I want to make the tank look more 3D. Let me add:
- Thicker lines on the bottom and left edges (shadows)
- Thinner lines on top and right edges (highlights)
- Corner where tank meets floor

For the glass effect:
- Use strokeStyle with a light blue color
- LineWidth varies: 3px for edges, 1px for interior lines
- Add highlights: white lines on the top-left edges
- Add reflections: white spots on the glass

For the water:
- Fill with blue gradient (lighter at top, darker at bottom)
- Add waves on the surface
- Add light reflection (horizontal white line at top of water)
- Add transparency so objects below are visible

Let me write the code now. I'll make it visually appealing.

Here's the complete code:

I'll write it all in one go. Let me be thorough.

For the tank rendering, I'll draw:
1. Back wall (filled rectangle, dark blue, alpha)
2. Water (filled rectangle, blue gradient, alpha)
3. Objects
4. Front glass walls (stroke, light blue, alpha)
5. Water surface (wavy line, stroke)
6. Crack (if active)

Let me write it now.

OK I need to just start writing. Let me create the file.

I'll write the complete code with all features implemented. Here it is:

Let me think about the main update loop structure:

```javascript
function update(dt) {
  simTime += dt;
  
  // Update water level
  if (gameState === 'cracking') {
    crackProgress += dt / 1.0; // 1 second to propagate
    crackProgress = Math.min(1, crackProgress);
    
    // Leak during propagation
    if (crackProgress > 0.3) {
      let h = crackY - waterLevel;
      if (h > 0) {
        let flowRate = 2 * Math.sqrt(h) * (crackProgress - 0.3);
        waterLevel += flowRate * dt;
        // Emit leak particles
      }
    }
    
    if (crackProgress >= 1) {
      panelBurst = true;
      panelBroken = true;
      createFragments();
      gameState = 'bursting';
      // Start bursting timer
    }
  }
  
  if (gameState === 'bursting') {
    // Burst is immediate - transition to draining
    gameState = 'draining';
  }
  
  if (gameState === 'draining') {
    // Water flows out based on Torricelli's law
    let h = TANK_BOTTOM - waterLevel;
    if (h > 0) {
      let flowRate = 5 * Math.sqrt(h);
      waterLevel += flowRate * dt;
      
      // Emit jet particles
      let jetVel = Math.sqrt(2 * G * h) * 0.5;
      emitJetParticles(jetVel);
    } else {
      waterLevel = TANK_BOTTOM;
      gameState = 'settled';
    }
    
    // Update objects
    // Update fragments
    // Update particles
  }
  
  // Always update: particles, fragments, fish, etc.
  updateParticles(dt);
  updateFragments(dt);
  updateFish(dt);
  updateRocks(dt);
  updatePlants(dt);
  updateToy(dt);
}
```

For the objects, they're updated every frame regardless of game state (they just behave differently based on state).

Let me now write the complete code. I'll make it comprehensive and working.

One more thing: I need to handle the water level correctly for each object. An object is "in water" if its y position is below the water surface (y > waterLevel, since y goes down). Wait:
- waterLevel is the y-coordinate of the water surface
- An object at y=300 is "in water" if waterLevel > 300 (surface is below the object)
  - No! If waterLevel = 100 (surface at top), and object is at y=300, the object is below the surface (submerged)
  - waterLevel = 100 means surface is at y=100. Object at y=300 is below that → submerged
  - waterLevel = 300 means surface is at y=300. Object at y=300 is at the surface
  - waterLevel = 400 means surface is at y=400. Object at y=300 is above the surface (not submerged)

So: object is inWater if waterLevel > object.y (water surface is below the object, meaning the object is submerged)

Wait no. If waterLevel = 100 (surface at y=100) and object is at y=300:
- The water fills from y=100 to y=550 (bottom)
- Object at y=300 is between 100 and 550, so it's in water
- waterLevel (100) < object.y (300) → object is in water

If waterLevel = 400 (surface dropped to y=400) and object is at y=300:
- Water fills from y=400 to y=550
- Object at y=300 is above the water surface (300 < 400)
- waterLevel (400) > object.y (300) → object is NOT in water

So: object isInWater = waterLevel > object.y... no wait:
- waterLevel = 100, object.y = 300: 100 > 300? No. But object IS in water.
  
I'm confusing myself. Let me be very clear:
- y = 0 at top, y increases downward
- tank top = y = 100, tank bottom = y = 550
- waterLevel = y-coordinate of the water surface (top of water)
- Water fills from y = waterLevel to y = 550 (bottom)
- If waterLevel = 100: water fills entire tank (full)
- If waterLevel = 300: water fills from y=300 to y=550 (tank is 1/3 full)
- If waterLevel = 550: water is empty

An object at position y is in water if waterLevel <= y <= 550 (between surface and bottom)
Or equivalently: y >= waterLevel AND y <= TANK_BOTTOM

For an object at y = 300:
- If waterLevel = 100: 100 <= 300 <= 550 → in water ✓
- If waterLevel = 400: 100 <= 300 <= 550 → 400 <= 300 is false → not in water (above surface) ✓
- If waterLevel = 300: 300 <= 300 → at surface, barely in water ✓

So: object.isInWater = (this.y >= waterLevel && this.y <= TANK_BOTTOM)

For a floating object, it should be at waterLevel (at the surface).
For a sinking object, it should be at TANK_BOTTOM (at the bottom).
For a fish, it can be at any depth.

When waterLevel rises (water drains, waterLevel increases), objects that were in water may emerge:
- If waterLevel rises above object.y, the object is no longer in water

When an object is no longer in water:
- Buoyancy stops
- Water drag stops
- Air drag applies
- Gravity applies (full)
- If inside tank, it falls to tank bottom
- If outside tank, it falls to floor

OK, this is clear now. Let me write the code.

For the floating toy:
- It floats at waterLevel (the surface)
- It's pushed by current
- When waterLevel rises (water drains), it follows the surface
- When it exits the tank (current pushes it to the breach), it becomes airborne
- On the floor, it rests

```javascript
class FloatingToy {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.size = 18;
    this.state = 'floating';
  }
  
  update(dt, waterLevel, current, panelBurst) {
    if (this.state === 'airborne') {
      this.vy += G * dt;
      this.vx *= 0.97;
      this.vy *= 0.97;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      
      if (this.y > FLOOR_Y - this.size/2) {
        this.y = FLOOR_Y - this.size/2;
        this.vy *= -0.3;
        if (Math.abs(this.vy) < 30) this.state = 'on_floor';
      }
      return;
    }
    
    if (this.state === 'on_floor') return;
    
    // Floating
    let isInWater = this.y >= waterLevel && this.y <= TANK_BOTTOM;
    
    if (isInWater) {
      // Float at surface
      let targetY = waterLevel + this.size/2;
      this.y += (targetY - this.y) * 0.1; // soft follow
      
      // Current pushes it
      this.vx += current.x * dt * 0.5;
      
      // Move horizontally
      this.x += this.vx * dt;
      this.vx *= 0.95;
      
      // Check if exits tank
      if (panelBurst && this.x > TANK_RIGHT) {
        this.state = 'airborne';
        this.vx += current.x * 0.3;
      }
      
      // Tank wall constraints
      if (!panelBurst || this.x < TANK_RIGHT) {
        if (this.x < TANK_X + this.size) this.x = TANK_X + this.size;
        if (this.x > TANK_RIGHT - this.size && !panelBurst) this.x = TANK_RIGHT - this.size;
      }
    } else {
      // Above water, inside tank
      this.vy += G * dt * 0.3;
      this.vx *= 0.98;
      this.x += this.vx * dt;
      this.y += this.vy * dt;
      
      if (panelBurst && this.x > TANK_RIGHT) {
        this.state = 'airborne';
      }
    }
  }
}
```

OK, I really need to stop planning and start writing. Let me create the complete file now.

I'll write a comprehensive, well-organized HTML file with all the features. Let me do it.

I want the simulation to be satisfying to watch. The key moments are:
1. Crack propagation with water leaking through
2. Panel bursting with glass fragments flying
3. Strong jet of water curving through the air
4. Objects being swept through the breach
5. Fish fighting the current
6. Puddle spreading and hitting walls
7. Water level dropping continuously
8. Everything settling on the floor

Let me write the code now. Here's the complete implementation:

I'll write it section by section, making sure each part is implemented correctly.

Let me think about the overall flow of the code:

1. Initialize canvas and state
2. Create objects (fish, rocks, plants, toy)
3. Main loop:
   a. Handle input (if in setup/dragging state)
   b. Update physics (based on game state)
   c. Draw everything
4. Event handlers for mouse/touch

Let me write it now. I'll create a polished, complete simulation.

I'll write the entire HTML file in one go. Let me make it comprehensive.

Here's my code:

For the puddle, when jet particles hit the floor, I'll create puddle particles. These particles:
- Start at the impact point
- Spread radially on the floor
- Have high friction (stop quickly)
- Bounce off walls (with damping)
- Are small and render as blue ellipses

The puddle will accumulate over time and eventually form a visible pool.

For visual effect, I'll also draw a semi-transparent blue "puddle blob" that grows over time, representing the puddle volume. The particles provide the dynamic, spreading effect.

Actually, let me use both: a growing blob for the main puddle shape, and particles for the splash/spread effect. This will look better.

For the puddle blob:
- Centered at the average impact point (roughly x=600, y=FLOOR_Y)
- Radius grows based on puddleVolume
- When it hits walls, it deforms (I'll just clamp the radius)

For the puddle volume:
- Increases when jet particles hit the floor
- dV = jetParticle.size^2 * jetParticleCount

Let me track puddleVolume (in pixels^2) and compute puddleRadius:
- puddleRadius = sqrt(puddleVolume / PI)
- Cap at some maximum (e.g., 150 pixels)

This gives a continuously growing puddle that looks good.

OK, I'm writing the code now. Here's the complete file.

Let me also think about rendering the water inside the tank. I want it to look like water:
1. Fill the tank area (inside walls) with a blue color
2. Use a gradient for depth (darker at bottom)
3. Add wave animation on the surface
4. Add transparency so objects below are visible but tinted

For the wave animation:
- On the water surface line, add sine wave distortion
- Also add some subsurface wave motion (bubbles or particles)

For the transparency:
- globalAlpha = 0.5 for water fill
- Objects below water are drawn normally (the water's alpha tints them)

Wait, if I draw water with alpha 0.5, it will tint everything below it (the tank background). That's fine. Objects drawn after the water will be on top.

But I want submerged objects to appear underwater (tinned blue). Let me:
1. Draw tank background
2. Draw water fill (alpha 0.4)
3. Draw objects (normal)
4. The water fill provides the blue tint for submerged parts

But objects drawn after the water won't be tinted. I need to draw objects before the water fill, or use a different approach.

Option 1: Draw objects first, then water fill on top (water tents everything)
- But then objects above water would be tinted too
- Not ideal

Option 2: Use clipping or masking
- Draw water fill as a clipping region
- Draw objects inside the water region
- Objects above water are drawn normally

Option 3: Draw objects with a blue tint if they're below water
- Check each object's position relative to waterLevel
- Apply a blue tint (fillStyle shift) for submerged objects

Option 3 is the cleanest. Let me render objects with a blue tint if they're below waterLevel.

Actually, the simplest approach is:
1. Draw water fill (rectangle up to waterLevel, with alpha)
2. Draw objects (normal)
3. Draw water surface waves on top

The water fill with alpha will tint whatever is below it. Objects drawn on top of the water fill will be partially tinted (the water is semi-transparent). This should look fine.

But if I draw water first, then objects, the objects won't be tinted by the water. They'll be on top of the water. Unless the objects are drawn before the water.

Let me try:
1. Draw tank back wall
2. Draw objects
3. Draw water fill (with alpha, on top of objects) - this tents submerged parts
4. Draw water surface waves
5. Draw tank walls (on top of water)
6. Draw objects that are above water (on top of tank walls)

Hmm, this is getting complicated. Let me simplify:
1. Draw tank back wall
2. Draw water fill (blue, alpha 0.4)
3. Draw all objects (they'll be on top of water, but partially submerged parts will show through water above)

Wait, objects are drawn on top of the water fill. So they won't be tinted. But the water fill is on top of the tank back wall. So:
- Submerged objects: drawn on top of water fill → they look normal (not tinted), but the water fill is below them
- Above water objects: drawn on top of water fill → they look normal

This means objects won't have the underwater tint. Not ideal but acceptable.

Let me use a different approach:
1. Draw tank back wall
2. Draw water fill (blue, alpha 0.4) - this tents the back wall and anything below
3. Draw all objects (on top of water)
4. For objects below water surface, add a blue overlay:
   - Before drawing a submerged object, set a blue tint using globalCompositeOperation

Actually, the simplest approach that looks good:
1. Draw tank
2. Draw water fill (semi-transparent blue)
3. Draw objects on top (they're partially above and below water)
4. For submerged portions of objects, draw a blue overlay

Let me just use globalAlpha and fillStyle with blue tint for water. Objects drawn after will be on top. The key visual is that the water is there and objects interact with it.

OK, I'll just go with:
1. Room background
2. Floor
3. Tank back wall (filled rectangle)
4. Water fill (blue, alpha 0.4)
5. All objects (drawn on top)
6. Water surface (wavy line on top of water fill)
7. Tank walls (stroke)
8. Particles, fragments, etc.

This should look fine. Objects partially submerged will appear to be in water because of the blue fill below them.

Let me write the code now. For real. Here it is:

I'll also add some nice details like:
- Light reflection on the water surface (horizontal white line)
- Tank reflections (white highlights on glass)
- Shadow of objects on the tank bottom
- Bubble trails behind floating objects

OK, let me write the complete code. I'll make it as good as I can.

Here's my complete implementation. I'm writing it now:

Let me review the code and check for any issues. Let me re-read it and fix bugs.

I noticed a few issues:
1. In the Rock class, `this.col = lerpColor('#556',' '#778');` has a space in `'#778` which should be `'#778'`
2. The fish `inW` check is complex and might have bugs
3. The crack propagation and water flow logic might need tuning
4. The UI text handling seems inconsistent

Let me review and fix these issues.

Let me also think about the overall flow:
1. Setup: tank is full, objects in water, fish swimming
2. User drags on right wall → crack position indicator
3. User releases → crack propagates (crackProg goes 0→1 over 0.9s)
4. At crackProg=1: panel bursts (fragments fly, water flows)
5. Water drains (waterLevel rises from TANK_T to TANK_B)
6. Objects get swept, puddle grows
7. Settled: tank empty, everything on floor

Let me fix the issues and make the code more robust.

Actually, let me re-read the code more carefully to find all bugs.

1. `lerpColor('#556',' '#778')` - syntax error, space in string
2. Fish `inW` check: `const inW = this.y >= wl && this.y <= TANK_B && state.panelBurst || (this.y >= wl && this.y <= TANK_B && !state.panelBurst && this.x <= TANK_R);` - this has operator precedence issues
3. The `state.panelBurst || ` part doesn't make sense for the inW check
4. Fish airborne re-entry logic is confusing
5. The puddle impact position is hardcoded

Let me fix these issues and also improve some aspects of the simulation.

Let me rewrite the file with fixes and improvements.

Let me read through the code more carefully to find bugs and fix them. Let me read the key sections.

Let me check the Rock class for the lerpColor issue and other bugs.

Let me continue reading to find more issues.

I found a bug: `lerpColor('#556',' '#778')` has a syntax error - there's a space in `' '#778'`. The lerpColor function also doesn't actually do color interpolation. Let me fix these issues and continue reading the rest of the code.

Let me also check the computeCurrent function and other parts.

Let me continue reading the rest of the code to check for any remaining issues.