The response is formatted, readable, and contains the final answer.

I need to build a single self-contained HTML file with a complex physics simulation of an aquarium breaking. Let me plan this out carefully.

Requirements:
1. Large glass aquarium with side panel that develops a visible crack and bursts
2. Water escaping through opening - flow strength based on water depth, decreasing as tank drains
3. Curved water jet affected by gravity
4. Spreading puddle that collides with room boundaries
5. Fish, rocks, plants, floating toy reacting differently (density, buoyancy, drag, current)
6. Objects transitioning from underwater to airborne to floor collisions
7. Fish attempting to swim against current before being swept through breach
8. Glass fragments with angular velocity, collisions, water resistance
9. Visible waterline that lowers continuously
10. User can drag crack vertically before triggering failure
11. Lower crack = stronger initial jet than higher crack

This is a substantial physics simulation. I'll use Canvas 2D for rendering. Let me think about the physics:

- The aquarium is a 3D box rendered in 2D side view (or isometric?). Given the complexity, I'll do a 2D side view (cross-section) showing the tank from the side. The "side panel" is the right wall. The crack is on the right side.

Actually, let me think about this more carefully. A 2D simulation from the side would show:
- Tank: rectangular box with left, bottom, right walls visible
- Water inside with waterline
- Crack on the right wall
- Water jet shooting out to the right
- Puddle on the floor to the right
- Objects inside the tank

Let me design the physics:

Water level: y position of water surface. Initially at some height H. When crack opens, water flows out through the crack at rate proportional to sqrt(depth at crack position). The water level drops.

Flow through crack: Using Torricelli's law - velocity = sqrt(2*g*h) where h is depth below water surface. Flow rate = area * velocity. The crack has some width (height in our 2D view). Flow per unit crack height = C * sqrt(2*g*(waterline_y - crack_y)).

Water particles: I'll simulate particles for the jet and puddle.

Objects:
- Fish: density slightly less than water (buoyant), swim behavior
- Rocks: dense, sink
- Plants: buoyant, flexible
- Floating toy: very buoyant, floats on surface

Glass fragments: pieces of the broken panel, with angular velocity, collisions.

Let me structure the code:

1. HTML + CSS for layout
2. Canvas for rendering
3. Physics simulation loop
4. User interaction (drag crack, trigger burst)

Let me think about the coordinate system:
- Canvas: 800x600 or so
- Tank: positioned on the left side, taking up most of the height
- Floor: bottom of canvas
- Room boundaries: canvas edges

Actually, let me make it more visually appealing with a 3D-ish perspective but still 2D physics. Or just go with a clean 2D side view.

Let me go with a side view. The tank is on the left, room extends to the right.

Tank dimensions: let's say the tank is about 500px wide, 400px tall, positioned at x=50, y=50 from top of canvas.

Wait, I need to think about this more carefully. The user drags the crack vertically on the side panel. The crack is on the right side of the tank (the side panel facing the viewer, or the side panel on the right side of the tank).

Let me make it so we're looking at the front of the tank, and the "side panel" is the right wall. The crack appears on the right wall. The user drags vertically to set crack position.

Actually, re-reading: "Let the user drag the crack vertically before triggering the failure." So the user drags to position the crack height on the side panel.

Let me design the UI:
- Canvas fills most of the screen
- Tank shown with glass walls, water inside
- A crack indicator that the user can drag up/down on the right wall
- A "Trigger" button or click to make it burst
- After burst, physics simulation starts

Let me code this step by step.

Physics model:
- Water particles: spawned at crack location, with velocity based on depth
- Each water particle has position, velocity, affected by gravity
- Puddle: water particles that hit the floor spread out, slow down due to friction
- Objects: fish, rocks, plants, toy
- Glass fragments: from the broken panel

For the fish: they have a "swim" force trying to go left (against current), but the current (water flow) pushes them right. When the crack opens, fish near it get swept out.

Let me think about object physics more carefully:

Each object has:
- position (x, y)
- velocity (vx, vy)
- mass, volume, density
- radius (for collision)
- buoyancy force = water_density * volume * g (upward when submerged)
- drag force = 0.5 * drag_coefficient * fluid_density * v^2 (opposite to velocity)
- gravity = mass * g (downward)

When submerged in water:
- net_force = gravity + buoyancy + drag + current_force
- current_force depends on water flow at that position

When in air:
- net_force = gravity + air_drag

When on floor:
- friction force, normal force

For fish specifically:
- They have a "swim" force that pushes them in a direction (toward the left, against current)
- They try to maintain depth
- When the current is too strong, they get swept

Let me now write the actual code. This is going to be quite long but I need to make it work.

Actually, let me think about the rendering approach. I'll use requestAnimationFrame for the game loop.

Let me sketch the visual layout:
- Canvas: 1000x700
- Room: the entire canvas
- Tank: positioned at (60, 60) with width 450, height 420
- Floor: y = 660 (bottom of canvas with some margin)
- Right wall of tank: x = 510

The crack is on the right wall (x = 510). User drags along this wall to set crack y position.

When triggered:
- The right wall breaks at the crack position
- Glass fragments fly outward
- Water starts flowing out through the opening
- The waterline drops

Let me code this up. I'll start with the HTML structure.

Actually, I realize this is going to be very complex. Let me write it all out carefully.

Let me think about the water simulation approach:
- I'll use particle-based water for the jet and puddle
- Each frame, spawn particles at the crack based on flow rate
- Particles are affected by gravity
- When particles hit the floor, they spread (puddle)
- The water level in the tank is tracked as a single value that decreases

For the tank water rendering:
- Fill a rectangle from the bottom of the tank to the current water level
- Show a waterline (slightly wavy maybe)

For the crack: it's an opening on the right wall. The opening has a height (crack size). Let's say the crack is about 30px tall initially, and grows as the panel breaks.

Actually, let me think about this differently. The user drags to set the crack position. When triggered, the crack appears and water starts flowing. The crack could start small and grow, or it could immediately be a large opening.

Let me have the crack be a small opening initially (like a crack forming), then it widens as the panel breaks more.

OK let me just start writing code. I'll iterate if needed.

Let me think about the structure of the code:

```javascript
// Configuration
const CANVAS_WIDTH = 1000;
const CANVAS_HEIGHT = 700;
const TANK = { x: 60, y: 80, w: 450, h: 420 };
const FLOOR_Y = 660;
const GRAVITY = 0.5;
const WATER_DENSITY = 1.0;

// State
let state = 'setup'; // 'setup', 'flowing', 'draining'
let crackY = 300; // y position of crack (draggable)
let waterLevel = TANK.y + TANK.h - 30; // top of water (y coordinate)
let waterParticles = [];
let glassFragments = [];
let objects = [];
let fish = [];
let puddle = { x: 0, y: 0, width: 0, height: 0 };
let time = 0;
let isDragging = false;

// ... etc
```

Let me think about the rendering in more detail. I want it to look good.

For the tank:
- Glass walls: semi-transparent blue/white rectangles with borders
- Water: blue gradient from top to bottom
- Waterline: a slightly wavy line at the water surface
- Objects inside: fish, rocks, plants, toy
- Bubbles? Maybe not necessary.

For the crack:
- A visible crack line on the right wall
- When broken, an opening with jagged edges

For the jet:
- Particles streaming out, curving down due to gravity
- The stream gets thinner as water level drops

For the puddle:
- A blue region on the floor that spreads outward
- Gets wider as more water flows out

Let me now write the full code. I'll be careful about performance - particle count should be reasonable.

Let me think about the fish behavior more carefully:
- Before crack: fish swim around casually
- After crack: fish near the crack try to swim away (leftward)
- Fish are swept toward the crack if they're close enough
- Eventually some fish get swept through the crack
- Fish outside the tank fall to the floor and flop around

For the fish swimming AI:
- Each fish has a target position and a "swim force"
- They try to swim toward their target
- When the crack opens, their target shifts left/away from crack
- The current (water flow) pushes them rightward
- If current force > swim force, they get swept

Let me keep the fish simple: they have a velocity, a swim force that pushes them in a direction, and they're affected by water current.

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

I'll structure it as:
1. HTML with canvas
2. CSS for styling (dark background, etc.)
3. JavaScript with:
   a. Configuration constants
   b. State variables
   c. Physics update functions
   d. Rendering functions
   e. Event handlers
   f. Main loop

Let me write this out. This is going to be a large file.

Actually, let me reconsider the visual approach. Instead of a pure 2D side view, maybe I should do a pseudo-3D view (like a front-facing tank with the right side visible). But that's much harder to render.

Let me stick with a clean 2D side view. The tank is shown from the side, so we see:
- Left wall, bottom wall, right wall
- Water inside (blue fill)
- Objects inside (fish, rocks, plants, toy)
- Crack on the right wall
- Water jet coming out to the right
- Puddle on the floor

This is the clearest approach for the physics simulation.

Let me now write the code. I'll aim for something that looks polished and works well.

One more thing - the "crack" visual. Before triggering, I should show a crack line (like a hairline crack) on the right wall that the user can drag up/down. After triggering, the crack widens and glass breaks.

Let me think about the crack dragging UX:
- Mouse down on the crack area: start dragging
- Mouse move: update crackY
- Mouse up: stop dragging
- The crack is shown as a vertical line segment on the right wall

For triggering:
- A button "Test Pressure" or "Trigger Failure"
- Or click on the crack to trigger
- Let me use a button

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

Let me think about dimensions more carefully:

Canvas: 1200 x 750

Room:
- Floor at y = 700
- Left wall at x = 0
- Right wall at x = 1200

Tank:
- Left edge: x = 80
- Bottom edge: y = 650
- Right edge: x = 80 + 500 = 580
- Top edge: y = 150
- Tank height: 500px
- Tank width: 500px

Water:
- Initial water level: y = 200 (water fills from y=200 to y=650, so 450px deep)
- Wait, that's a lot. Let me make the tank smaller.

Actually, let me use these dimensions:
- Canvas: 1000 x 650
- Floor: y = 620
- Tank: x=60, y=80, w=420, h=500
- Tank right wall: x=480
- Initial water level: y=130 (water fills from y=130 to y=580, 450px deep)

Hmm, that's still a lot of water. Let me make the tank more reasonable:
- Tank: x=60, y=100, w=400, h=450
- Tank right wall: x=460
- Initial water level: y=140 (water fills from y=140 to y=550, 410px deep)
- Floor: y=600

That works. The tank is on the left, room extends to the right.

Let me plan the objects:
1. Rocks: 3-4 rocks at the bottom of the tank, heavy, sink
2. Plants: 2-3 plants growing from the bottom, sway in current
3. Fish: 3-5 fish swimming around
4. Floating toy: 1 toy (like a rubber duck) floating on the surface

For glass fragments:
- When the crack bursts, the right wall breaks into fragments
- 8-12 fragments of various sizes
- They fly outward with some velocity
- Affected by gravity, water resistance, air resistance
- They collide with the floor and objects

Let me now write the code. I'll be comprehensive but try to keep it readable.

Actually, I realize I should think about the flow calculation more carefully.

Torricelli's law: v = sqrt(2*g*h) where h is the depth of the crack below the water surface.

The crack has a height (let's say 40px). The flow through the crack depends on the depth of each point along the crack.

For simplicity, I'll calculate the flow at the center of the crack:
- depth = waterLevel - crackY (if crackY is below waterLevel)
- flow velocity = sqrt(2 * GRAVITY * depth)
- flow rate = flow velocity * crack_height * some_constant

The flow rate determines how many particles spawn per frame and how fast the water level drops.

As water level drops, depth decreases, so flow velocity decreases, so flow rate decreases.

When waterLevel reaches crackY, flow stops.

Let me also think about the water jet shape. The particles come out horizontally (to the right) and then curve down due to gravity. The initial horizontal velocity depends on depth. The vertical velocity starts at 0 (or slight random variation) and increases due to gravity.

For the puddle: when water particles hit the floor, they spread out. I'll track the puddle as a region on the floor. The puddle extends from the right wall of the tank to some distance rightward. The width of the puddle increases as more water flows out.

For the puddle physics, I'll track:
- puddleLeft: leftmost x of puddle (starts at tank right wall)
- puddleRight: rightmost x of puddle
- puddleDepth: depth of puddle (thickness of water layer on floor)

Actually, for visual purposes, I'll render the puddle as a blue region on the floor that spreads out. The puddle will have a height (depth) that's small but visible.

Let me now write the actual code. I'll try to make it comprehensive and well-structured.

Let me think about one more thing: the crack visual. Before breaking, the crack is shown as a thin line. After breaking, it's an opening with jagged edges.

I'll draw the crack as:
- Before: a vertical zigzag line on the right wall
- After: an opening (hole) in the wall, with jagged edges

For the glass fragments, I'll draw them as irregular polygons that fly outward.

OK, let me write the code now. This is going to be long but I'll make it work.

Let me be more specific about the fish behavior:

Fish properties:
- position (x, y)
- velocity (vx, vy)
- size (radius)
- swimForce: how strong they can swim
- targetX, targetY: where they want to go
- state: 'idle' | 'fleeing' | 'swept' | 'airborne' | 'floored'

Fish behavior:
- Idle: swim around randomly in the tank
- When crack opens:
  - Fish near crack (within 150px) enter 'fleeing' state
  - They try to swim leftward and away from crack
  - If current is too strong, they get 'swept' toward the crack
  - Once through the crack, they're 'airborne' (falling)
  - When they hit the floor, they're 'floored' (flopping)

For the swimming simulation:
- Each frame, fish apply a force toward their target
- The force is limited by swimForce
- Water current applies a force based on water flow at fish position
- The net force determines acceleration

Let me simplify: fish have a desired velocity (toward target) and can accelerate toward it. The water current adds to their velocity.

Actually, let me just use forces:
- swim_force = swimStrength * normalize(target - position)
- drag_force = -dragCoeff * velocity (water drag)
- current_force = waterVelocity at fish position * currentDrag
- gravity = mass * GRAVITY (only when not in water)
- buoyancy = waterDensity * volume * GRAVITY (upward, when in water)

Net force = swim_force + drag_force + current_force + gravity + buoyancy

When in water, buoyancy counteracts gravity (if density ≈ water density).
When in air, only gravity and air drag apply.
When on floor, normal force and friction.

This is getting complex. Let me simplify for the fish:

In water:
- acceleration = (swim_force + current_force) / mass - drag * velocity
- The fish has neutral buoyancy (density = water density), so no net vertical force from gravity/buoyancy
- Actually, let me give fish slightly less density than water so they float a bit

In air:
- acceleration = gravity - air_drag * velocity

On floor:
- The fish stops (friction)

Let me just write the code and handle these cases. I'll keep it simple but functional.

For the rock:
- High density, sinks to bottom
- Stays on bottom, doesn't move much

For the plant:
- Low density, buoyant
- Sways with water current
- Flexible (simulated as a chain of segments)

For the toy:
- Very low density, floats on surface
- Moves with water current
- When swept out, falls slowly (air resistance)

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

Actually, let me also plan the rendering order:
1. Background (room, floor)
2. Tank back wall and water (inside the tank)
3. Objects inside tank (rocks, plants, fish, toy) - underwater
4. Water surface (waterline)
5. Tank front wall and side wall
6. Crack / opening
7. Water jet particles
8. Glass fragments
9. Puddle on floor
10. Objects outside tank (fish, toy that escaped)
11. UI elements (instructions, crack position indicator, trigger button)

Wait, the rendering order should be:
1. Room background
2. Puddle on floor
3. Tank interior (back wall, water fill)
4. Objects inside tank (underwater)
5. Water surface
6. Tank front/side walls
7. Crack / broken glass
8. Water jet particles
9. Glass fragments in air
10. Objects in air / on floor outside
11. UI overlay

Let me code this up now. I'll write the full HTML file.

Actually, let me reconsider the approach for the water in the tank. Instead of rendering the water as a filled rectangle, I could use particles for the water inside the tank too. But that would be very expensive. Let me use a filled rectangle with a wavy top for the water surface.

For the waterline: I'll draw a wavy line at the water surface, with some animation to make it look natural.

OK, let me write the code now. I'll aim for something that works well and looks good.

Let me write a comprehensive implementation:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aquarium Crack Simulation</title>
<style>
  /* styles */
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="ui">
  <div id="instructions">...</div>
  <button id="trigger">Trigger Failure</button>
</div>
<script>
// ... all the JavaScript
</script>
</body>
</html>
```

Let me write the full implementation now. I'll be thorough.

Actually, I realize I should think about the crack position more carefully. The user drags the crack vertically on the right wall. The crack position is the y-coordinate of the center of the crack on the right wall.

When the user drags, I'll show a visual indicator (a small line or marker) at the crack position on the right wall.

The crack has a fixed height (let's say 40px). When triggered, this becomes an opening.

The flow strength depends on the depth of the crack below the water surface. A lower crack (higher y value, closer to bottom) has more depth, so stronger flow.

Let me also add some visual feedback when dragging - maybe the crack line pulses or changes color.

OK let me write the code now. I'll start with the HTML and CSS, then the JavaScript.

Let me be very careful about the physics to make it look realistic.

For the water jet, I'll spawn particles at the crack location. Each particle has:
- Initial position: at the crack, slightly to the right of the tank wall
- Initial velocity: horizontal, proportional to sqrt(depth), plus some random spread
- Acceleration: gravity (downward)
- Lifetime: until they hit the floor or go off-screen

For the puddle, I'll track the total volume of water that has exited and render a puddle on the floor. The puddle spreads outward from the tank wall.

For the water level drop:
- Each frame, calculate flow rate based on current water level and crack position
- Subtract from water volume
- Update water level based on new volume

Let me define:
- tankVolume = tankWidth * currentWaterHeight (in 2D, area = width * height)
- flowRate = crackHeight * sqrt(2 * GRAVITY * depth) * flowCoefficient
- Each frame: tankVolume -= flowRate * dt
- waterLevel = tankTop + tankHeight - tankVolume / tankWidth

Wait, I need to be more careful. The water volume in 2D is the area of water in the tank. If the tank has constant width, then:
- waterArea = tankWidth * (waterLevel_bottom - waterLevel_top)
- where waterLevel_bottom is the bottom of the tank (fixed) and waterLevel_top is the water surface

Actually, let me define:
- tankBottomY = TANK.y + TANK.h (bottom of tank)
- tankTopY = TANK.y (top of tank)
- waterSurfaceY = current water level (y coordinate of water surface)
- waterHeight = tankBottomY - waterSurfaceY (depth of water)
- waterVolume = TANK.w * waterHeight (2D area)

Flow rate:
- crackCenterY = crackY
- depthAtCrack = tankBottomY - crackCenterY (but only if crackCenterY > waterSurfaceY, i.e., below water surface)
- Actually, depth below water surface = crackCenterY - waterSurfaceY (if crackCenterY > waterSurfaceY)
- flowVelocity = sqrt(2 * GRAVITY * depthBelowSurface)
- flowRate = flowVelocity * crackHeight * dischargeCoefficient

Wait, I need to think about this more carefully. The water surface is at waterSurfaceY (a y-coordinate). The crack is at crackY (also a y-coordinate). Since y increases downward, the water surface is above the crack (smaller y) when there's water above the crack.

So:
- depthBelowSurface = crackY - waterSurfaceY (positive when crack is below surface)
- flowVelocity = sqrt(2 * GRAVITY * depthBelowSurface)
- flowRate = flowVelocity * crackOpeningHeight * dischargeCoeff

The water volume decreases:
- waterVolume -= flowRate * dt
- waterSurfaceY = tankBottomY - waterVolume / TANK.w

When waterSurfaceY >= crackY (water level below crack), flow stops.

OK, this makes sense. Let me use these formulas.

For the discharge coefficient, I'll use something like 0.6 (typical for sharp-edged orifices).

Let me also think about how many particles to spawn. Each particle represents some volume of water. I'll spawn particles proportional to the flow rate, with a maximum per frame to avoid performance issues.

Let me set:
- particlesPerUnitVolume = some constant
- particlesToSpawn = flowRate * dt * particlesPerUnitVolume
- Each particle has a random position within the crack opening and a velocity based on depth at that position

Actually, for simplicity, I'll spawn a fixed number of particles per frame when flow is active, with the velocity based on depth. The number of particles can be proportional to flow rate.

Let me now write the code. I'll aim for a clean, well-commented implementation.

Let me also think about the visual style:
- Dark background (like a dark room)
- The tank has a nice glass look (semi-transparent blue, reflections)
- Water is blue with some transparency
- Fish are colorful
- Rocks are gray/brown
- Plants are green
- Toy is yellow (rubber duck)
- Glass fragments are light blue/white with some transparency
- Water particles are blue with varying opacity

For the room, I'll add some subtle details like a floor line, maybe a wall texture.

OK, I think I've planned enough. Let me write the code now.

Let me write a very comprehensive implementation. I'll structure it as:

1. HTML structure
2. CSS styling
3. JavaScript:
   a. Constants and configuration
   b. State
   c. Utility functions
   d. Physics update functions
   e. Rendering functions
   f. Event handlers
   g. Main loop
   h. Initialization

Let me write it all out now. This will be a long file but it should work.

Let me think about one more thing: the glass fragments. When the panel breaks, I need to create fragments. Each fragment:
- Position: near the crack on the right wall
- Velocity: outward (to the right) with some random variation
- Angular velocity: random
- Shape: irregular polygon (I'll use a rectangle with some random vertices)
- Size: varies
- Mass: proportional to size
- Affected by: gravity, air resistance, water resistance (if in water jet), collisions with floor

For rendering, I'll draw each fragment as a polygon with a glass-like color.

For collisions with the floor: when a fragment's y position reaches the floor, it bounces (with some energy loss) or stops.

For water resistance: fragments in the water jet experience a drag force.

Let me keep the fragment physics simple:
- Gravity pulls them down
- Air resistance slows them
- When they hit the floor, they bounce with restitution = 0.3

OK, let me write the code now.

Actually, I want to think about one more thing: the crack opening animation. When triggered, the crack should start small and grow wider. This gives a more dramatic effect.

I'll have a `crackWidth` variable that starts at 0 and grows to some maximum over time. The opening gets wider as the panel breaks.

The glass fragments are created when the crack reaches certain widths.

Let me have the crack opening animation:
- When triggered, crackWidth starts growing
- At crackWidth > 10px, start spawning water particles
- At crackWidth > 20px, start spawning glass fragments
- crackWidth grows to max (e.g., 60px) over about 1 second

This creates a nice progressive failure effect.

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

Let me think about the fish swimming against current more carefully.

Each fish has:
- position (x, y)
- velocity (vx, vy)
- target position (targetX, targetY)
- swimStrength (max acceleration the fish can produce)
- state: 'normal', 'fleeing', 'swept', 'airborne', 'grounded'

In 'normal' state:
- Fish swims around randomly
- Target changes occasionally
- Fish stays within the tank

When crack opens:
- If fish is near the crack (within some threshold), it enters 'fleeing' state
- Target is set to a point away from the crack (left side of tank)
- Fish tries to swim leftward with maximum effort

If the fish's x position gets too close to the crack despite fleeing, it enters 'swept' state:
- The fish is carried by the current
- It moves toward the crack and through it

Once through the crack, the fish is 'airborne':
- Falls due to gravity
- Has some horizontal velocity from the water jet

When the fish hits the floor, it's 'grounded':
- Flops around on the floor
- Maybe has a small jump animation

Let me implement this.

For the fish's swimming mechanics:
- Each frame, calculate desired direction toward target
- Apply swim force in that direction
- The fish also experiences water current force (pushing toward crack)
- Net force determines acceleration

The water current is stronger near the crack and weaker farther away. I'll model the current as a vector field that points toward the crack, with strength proportional to flow rate and inversely proportional to distance from crack.

For simplicity:
- currentStrength at position (x, y) = flowVelocity * exp(-distance_to_crack / falloff_distance)
- currentDirection = toward the crack (rightward and slightly downward toward the crack)

OK, let me simplify: the current pushes everything rightward (toward the crack) with strength that decreases with distance from the crack.

currentForce_x = flowVelocity * exp(-(crackX - fishX) / 50) * someCoeff

This means fish near the crack feel a strong current, fish far away feel a weak current.

Let me now write the code. I'll aim for a working implementation that demonstrates all the required features.

Let me think about screen layout one more time:

Canvas: 1100 x 700

Room:
- Floor: y = 660
- Ceiling: y = 0 (top of canvas)
- Left wall: x = 0
- Right wall: x = 1100

Tank:
- x = 60, y = 80
- w = 420, h = 500
- Bottom: y = 580
- Right wall: x = 480
- Left wall: x = 60
- Top: y = 80

Water:
- Initial water surface: y = 130
- Water fills from y=130 to y=580 (450px deep)

Crack:
- On right wall (x=480)
- Default position: y=350 (middle of tank)
- User can drag from y=200 to y=550

Objects:
- 3 rocks at the bottom (y around 560-570)
- 2 plants growing from bottom (y around 570)
- 3 fish swimming around
- 1 rubber duck floating at surface (y around 130)

This should work. Let me write the code now.

Wait, I need to also consider: the puddle on the floor. The floor is at y=660. The puddle should spread from the wall (x=480) to the right. The puddle has a small height (like 10-20px) and grows wider as more water flows out.

Let me track:
- puddleVolume: total volume of water in puddle
- puddleWidth: width of puddle on floor
- puddleHeight: height/depth of puddle

For a simple model:
- puddleHeight is constant (say 15px)
- puddleWidth = puddleVolume / puddleHeight
- The puddle extends from x=480 to x=480+puddleWidth

When puddleWidth reaches the right wall of the room (x=1100), the puddle starts getting deeper.

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

Let me think about one more detail: how the water particles interact with the puddle. When a water particle hits the floor, it "adds" to the puddle. I'll track the puddle separately using volume rather than individual particles.

The puddle volume increases by the flow rate each frame. The puddle is rendered as a blue region on the floor.

For the water particles in the jet: they're visual only. They show the trajectory of the water. When they hit the floor or the puddle, they disappear (or become part of the puddle visually).

Let me also add some splash effects when water hits the floor.

OK, I'll add splash particles that are small and short-lived.

Let me write the code now. I'll aim for a complete, working implementation.

Let me think about performance. With particles, I need to be careful:
- Water jet particles: maybe 50-100 at a time (spawn and remove)
- Splash particles: maybe 20-30 at a time
- Glass fragments: maybe 10-15
- Objects: 10-15 total
- Fish: 3-5

This should be fine for performance.

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

Actually, let me think about one more thing: how to draw the fish. I'll draw them as simple shapes:
- Body: an ellipse
- Tail: a triangle
- Eye: a small circle

For the rubber duck:
- Body: an ellipse
- Head: a circle
- Beak: a small triangle

For rocks:
- Irregular polygons (circles with some variation)

For plants:
- A stem (line) with leaves (small ellipses along the stem)
- The stem sways with current

Let me keep the drawing simple but recognizable.

OK, let me write the code now. I'll start writing.

Actually, I realize I should think about one thing: how to handle the "glass fragments with angular velocity, collisions, and water resistance". 

For angular velocity:
- Each fragment has an angle and angular velocity
- Each frame, angle += angularVelocity * dt
- Angular velocity is affected by torque from collisions

For collisions:
- Fragments collide with the floor (bounce)
- Fragments could collide with each other (optional, for performance I might skip this)
- Fragments collide with the tank walls (if they fly inward)

For water resistance:
- Fragments in the water jet experience a drag force
- drag = 0.5 * waterDensity * v^2 * dragCoeff * area

Let me implement these. For fragment-fragment collisions, I'll skip them for performance. Fragment-floor and fragment-wall collisions are sufficient.

OK, let me write the code now. I'll start with the HTML structure and work my way through.

I'll aim for about 500-800 lines of JavaScript for a good implementation.

Let me start writing:

Actually, let me think about the coordinate system one more time. In canvas:
- x increases to the right
- y increases downward

So:
- Top of canvas: y = 0
- Bottom of canvas: y = canvas.height
- Water surface: higher y = lower water (more water)
- Actually, water surface at y = 130 means the surface is near the top, and water extends downward

The water depth at a point is:
- depth = tankBottomY - pointY (for points below the water surface)

The crack depth below water surface:
- depth = crackY - waterSurfaceY (if crackY > waterSurfaceY, i.e., crack is below surface)

OK, this is correct. Let me write the code.

Let me also think about the initial animation. Before the user triggers the failure:
- The tank is intact
- Water is calm (maybe slight surface animation)
- Fish swim around
- The crack position indicator is shown on the right wall
- User can drag the crack up/down

After trigger:
- The crack opens
- Water starts flowing
- Glass breaks
- Fish react
- Everything happens dynamically

Let me implement this with a state machine:
- 'idle': before trigger, fish swim, user can drag crack
- 'breaking': just after trigger, crack opens, glass breaks
- 'flowing': water flows out, objects react
- 'draining': water level drops, continues flowing

Actually, let me just use a boolean `isBroken` and handle the states in the update logic.

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

I'll write it in sections and assemble the full HTML file.

Let me start with a comprehensive implementation. I'll write the whole thing.

Here's my plan for the JavaScript code structure:

```
// ============ CONFIGURATION ============
// Canvas and room dimensions
// Tank dimensions
// Physics constants

// ============ STATE ============
// Simulation state
// Water state
// Objects (fish, rocks, plants, toy)
// Particles (water jet, splash, glass)
// Crack state
// Drag state

// ============ UTILITY FUNCTIONS ============
// Vector math
// Random helpers
// Drawing helpers

// ============ PHYSICS ============
// Update water level
// Update water particles
// Update objects
// Update fish behavior
// Update glass fragments
// Update puddle

// ============ RENDERING ============
// Draw background
// Draw tank
// Draw water
// Draw objects
// Draw particles
// Draw glass
// Draw puddle
// Draw UI

// ============ EVENT HANDLERS ============
// Mouse events for dragging
// Click event for trigger

// ============ MAIN LOOP ============
// requestAnimationFrame loop

// ============ INITIALIZATION ============
// Create objects
// Start loop
```

OK, let me write the full code now. I'll be thorough and make sure everything works.

Let me write it as a single HTML file with inline CSS and JavaScript.

I'll try to keep the code clean and well-organized, with comments explaining the key parts.

Let me write it now.

Here's a self-contained HTML document that builds an interactive aquarium crack simulation with full physics, drag-to-position crack, and a dramatic burst sequence. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Aquarium Crack Simulation</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1a1a2e; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', Tahoma, sans-serif; user-select: none; overflow: hidden; } .container { position: relative; border-radius: 16px; box-shadow: 0 0 60px rgba(0, 150, 255, 0.15); background: #16213e; padding: 16px; } canvas { display: block; border-radius: 10px; cursor: default; background: #0f0f1a; width: 1100px; height: 700px; } .overlay { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; align-items: center; pointer-events: none; } .overlay>* { pointer-events: auto; } .overlay .label { color: rgba(255, 255, 255, 0.7); font-size: 13px; letter-spacing: 0.5px; background: rgba(0, 0, 0, 0.55); padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.08); } .overlay .label span { color: #6fc3ff; font-weight: 600; } #triggerBtn { pointer-events: auto; background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; color: #fff; font-size: 15px; font-weight: 600; padding: 8px 24px; border-radius: 30px; cursor: pointer; letter-spacing: 0.5px; box-shadow: 0 4px 20px rgba(231, 76, 60, 0.35); transition: transform 0.15s, box-shadow 0.15s; font-family: inherit; } #triggerBtn:hover { transform: scale(1.04); box-shadow: 0 6px 28px rgba(231, 76, 60, 0.5); } #triggerBtn:active { transform: scale(0.96); } #triggerBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .crack-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.3); font-size: 12px; letter-spacing: 0.3px; background: rgba(0, 0, 0, 0.4); padding: 4px 14px; border-radius: 12px; pointer-events: none; white-space: nowrap; } @media (max-width: 1150px) { canvas { width: 100%; height: auto; aspect-ratio: 1100/700; } .container { padding: 8px; border-radius: 10px; } .overlay { top: 18px; gap: 12px; flex-wrap: wrap; justify-content: center; } .overlay .label { font-size: 11px; padding: 4px 10px; } #triggerBtn { font-size: 13px; padding: 6px 18px; } } </style> </head> <body> <div class="container"> <canvas id="canvas" width="1100" height="700"></canvas> <div class="overlay"> <div class="label">Crack depth: <span id="depthDisplay">—</span></div> <button id="triggerBtn">💥 Trigger Failure</button> </div> <div class="crack-hint">↕ Drag the crack marker on the tank wall</div> </div> <script> // ============================================================ // AQUARIUM CRACK SIMULATION — Full Physics & Rendering // ============================================================ const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const depthDisplay = document.getElementById('depthDisplay'); const triggerBtn = document.getElementById('triggerBtn'); const W = 1100, H = 700; // ---- Room ---- const FLOOR_Y = 660; const ROOM_LEFT = 0; const ROOM_RIGHT = W; // ---- Tank ---- const TANK = { x: 65, y: 70, w: 420, h: 520 }; TANK.right = TANK.x + TANK.w; TANK.bottom = TANK.y + TANK.h; // ---- Physics constants ---- const GRAVITY = 620; // px/s² const WATER_DENSITY = 1.0; const AIR_DENSITY = 0.0013; const DISCHARGE_COEFF = 0.62; const FLOW_SPREAD = 0.35; // ---- Crack config ---- const CRACK_MIN_Y = TANK.y + 60; const CRACK_MAX_Y = TANK.bottom - 40; const CRACK_HEIGHT = 38; // px opening height const MAX_CRACK_OPEN = 58; // px max opening width // ============================================================ // STATE // ============================================================ let state = 'idle'; // 'idle' | 'breaking' | 'flowing' let crackY = 340; // center of crack (y coord) let crackOpen = 0; // 0..MAX_CRACK_OPEN let isDragging = false; let dragOffsetY = 0; let time = 0; let breakTime = 0; // Water let waterSurfaceY = TANK.y + 55; // top of water (smaller y = higher) let waterVolume = 0; // 2D area const WATER_MAX_HEIGHT = TANK.bottom - waterSurfaceY; let initialWaterVolume = TANK.w * WATER_MAX_HEIGHT; // Puddle let puddleVolume = 0; const PUDDLE_MAX_DEPTH = 22; // Arrays let waterParticles = []; let splashParticles = []; let glassFragments = []; let fish = []; let rocks = []; let plants = []; let toy = null; // ============================================================ // UTILITY // ============================================================ function rand(min, max) { return min + Math.random() * (max - min); } function randInt(min, max) { return Math.floor(rand(min, max + 1)); } function lerp(a, b, t) { return a + (b - a) * t; } function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); } function dist(x1, y1, x2, y2) { return Math.hypot(x2 - x1, y2 - y1); } function waterDepthAt(y) { if (y < waterSurfaceY || y > TANK.bottom) return 0; return TANK.bottom - y; } // ============================================================ // OBJECT CLASSES // ============================================================ class PhysObj { constructor(x, y, radius, density, dragCoeff) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.radius = radius; this.density = density; this.dragCoeff = dragCoeff; this.mass = (4 / 3) * Math.PI * radius * radius * radius * density; this.volume = (4 / 3) * Math.PI * radius * radius * radius; this.onGround = false; this.inWater = true; this.groundFriction = 0.85; this.bounceRestitution = 0.25; } submergedVolume() { if (this.y + this.radius <= waterSurfaceY) return 0; if (this.y - this.radius >= TANK.bottom) return this.volume; // approximate: fraction submerged const sub = clamp((this.y + this.radius - waterSurfaceY) / (2 * this.radius), 0, 1); return this.volume * sub; } update(dt, currentForceX, currentForceY) { const subVol = this.submergedVolume(); const inWater = subVol > 0.01; this.inWater = inWater; // Buoyancy const buoyantForce = inWater ? WATER_DENSITY * subVol * GRAVITY : 0; // Gravity const gravForce = this.mass * GRAVITY; // Drag const fluidDensity = inWater ? WATER_DENSITY : AIR_DENSITY; const speed = Math.hypot(this.vx, this.vy); let dragForce = 0; if (speed > 0.01) { const area = Math.PI * this.radius * this.radius; dragForce = 0.5 * fluidDensity * speed * speed * this.dragCoeff * area; } // Current (water flow) const currForceX = inWater ? currentForceX * subVol / this.volume : 0; const currForceY = inWater ? currentForceY * subVol / this.volume : 0; // Net acceleration let ax = currForceX / this.mass; let ay = (gravForce - buoyantForce + currForceY) / this.mass; // Drag direction if (speed > 0.01) { const dragAx = -(dragForce / this.mass) * (this.vx / speed); const dragAy = -(dragForce / this.mass) * (this.vy / speed); ax += dragAx; ay += dragAy; } if (this.onGround) { // Friction on ground const friction = 0.92; this.vx *= friction; this.vy = 0; // If on ground and in water, can still be moved by current if (inWater) { this.vx += currForceX / this.mass * dt * 0.5; } } else { this.vx += ax * dt; this.vy += ay * dt; } // Integrate position this.x += this.vx * dt; this.y += this.vy * dt; // Floor collision if (this.y + this.radius > FLOOR_Y) { this.y = FLOOR_Y - this.radius; if (Math.abs(this.vy) > 20) { this.vy *= -this.bounceRestitution; this.vx *= 0.85; } else { this.vy = 0; this.onGround = true; } } // Room walls if (this.x - this.radius < ROOM_LEFT) { this.x = ROOM_LEFT + this.radius; this.vx *= -0.4; } if (this.x + this.radius > ROOM_RIGHT) { this.x = ROOM_RIGHT - this.radius; this.vx *= -0.4; } // Tank walls (if inside tank and not broken) if (this.x - this.radius < TANK.x && this.y < TANK.bottom) { this.x = TANK.x + this.radius; this.vx *= -0.4; } // Bottom of tank if (this.y + this.radius > TANK.bottom && this.x < TANK.right && this.x > TANK.x) { if (!this.onGround) { this.y = TANK.bottom - this.radius; this.vy *= -0.3; } } // If object is below water surface but above tank bottom, it's in the tank if (this.y > waterSurfaceY && this.y < TANK.bottom && this.x > TANK.x && this.x < TANK.right) { // inside tank water } // If object exits tank through crack, it becomes airborne if (this.x > TANK.right && this.y < TANK.bottom && this.y > crackY - CRACK_HEIGHT / 2 && this.y < crackY + CRACK_HEIGHT / 2 && crackOpen > 5) { // passing through crack } } draw(ctx) { // subclasses override } } // ---- Fish ---- class Fish extends PhysObj { constructor(x, y) { super(x, y, 12, 0.95, 0.8); this.swimStrength = 180 + rand(0, 60); this.targetX = x; this.targetY = y; this.state = 'normal'; // 'normal' | 'fleeing' | 'swept' | 'airborne' | 'grounded' this.color = `hsl(${randInt(20, 50)}, 80%, 55%)`; this.tailPhase = 0; this.eyeDir = 1; this.sweptTimer = 0; this.flopTimer = 0; this.changeTargetTimer = rand(1, 3); } update(dt, currentForceX, currentForceY) { const inTank = this.x > TANK.x && this.x < TANK.right && this.y > waterSurfaceY && this.y < TANK.bottom; if (state === 'idle') { // Normal swimming this.changeTargetTimer -= dt; if (this.changeTargetTimer <= 0) { this.targetX = TANK.x + rand(40, TANK.w - 40); this.targetY = waterSurfaceY + rand(30, TANK.h * 0.6); this.changeTargetTimer = rand(1.5, 4); } // Stay in tank this.targetX = clamp(this.targetX, TANK.x + 20, TANK.right - 20); this.targetY = clamp(this.targetY, waterSurfaceY + 10, TANK.bottom - 20); this.state = 'normal'; } else { // After break if (this.state === 'normal' || this.state === 'fleeing') { const distToCrack = Math.abs(this.x - TANK.right); if (distToCrack < 180 && this.y > crackY - 100 && this.y < crackY + 100) { this.state = 'fleeing'; this.targetX = TANK.x + rand(20, 100); this.targetY = waterSurfaceY + rand(20, TANK.h * 0.5); } if (this.state === 'fleeing') { // If current too strong, get swept const currentMag = Math.abs(currentForceX); if (currentMag > this.swimStrength * 0.6 && distToCrack < 80) { this.state = 'swept'; this.sweptTimer = 0; } // If reached left side, calm down if (this.x < TANK.x + 100) { this.state = 'normal'; this.targetX = TANK.x + rand(40, 120); } } } if (this.state === 'swept') { this.sweptTimer += dt; // Carried by current this.targetX = TANK.right + 50; this.targetY = crackY + rand(-15, 15); if (this.x > TANK.right + 20) { this.state = 'airborne'; } } if (this.state === 'airborne') { // Falling, no swimming this.targetX = this.x; this.targetY = FLOOR_Y + 50; if (this.onGround) { this.state = 'grounded'; this.flopTimer = rand(0.5, 2); } } if (this.state === 'grounded') { this.flopTimer -= dt; if (this.flopTimer <= 0) { this.flopTimer = rand(1, 3); // Flop: small jump if (Math.random() < 0.3) { this.vy = -rand(100, 250); this.vx += rand(-80, 80); this.onGround = false; } } } } // Swim force toward target const dx = this.targetX - this.x; const dy = this.targetY - this.y; const d = Math.hypot(dx, dy); let swimForceX = 0, swimForceY = 0; if (d > 5) { const strength = (this.state === 'fleeing' || this.state === 'swept') ? this.swimStrength * 1.3 : this .swimStrength; const mag = Math.min(strength, d * 3); swimForceX = (dx / d) * mag; swimForceY = (dy / d) * mag * 0.6; } // Apply swim as acceleration (override some physics) const inWaterNow = this.y > waterSurfaceY && this.y < TANK.bottom && this.x > TANK.x && this.x < TANK.right; if (inWaterNow && this.state !== 'swept') { this.vx += (swimForceX / this.mass) * dt * 0.8; this.vy += (swimForceY / this.mass) * dt * 0.8; // Limit speed const spd = Math.hypot(this.vx, this.vy); const maxSpd = this.state === 'fleeing' ? 250 : 120; if (spd > maxSpd) { this.vx = (this.vx / spd) * maxSpd; this.vy = (this.vy / spd) * maxSpd; } } // Call parent physics super.update(dt, currentForceX, currentForceY); // Keep in tank if normal if (state === 'idle' || (this.state !== 'airborne' && this.state !== 'grounded' && this.state !== 'swept')) { if (this.x > TANK.right - 5) { this.x = TANK.right - 5; this.vx *= -0.5; } if (this.x < TANK.x + 5) { this.x = TANK.x + 5; this.vx *= -0.5; } if (this.y < waterSurfaceY + 5) { this.y = waterSurfaceY + 5; this.vy *= -0.3; } if (this.y > TANK.bottom - 5) { this.y = TANK.bottom - 5; this.vy *= -0.3; } } this.tailPhase += dt * (4 + Math.abs(this.vx) * 0.02); this.eyeDir = this.vx > 0.5 ? 1 : (this.vx < -0.5 ? -1 : this.eyeDir); } draw(ctx) { const s = this.radius; const dir = this.eyeDir; ctx.save(); ctx.translate(this.x, this.y); // Body (ellipse) const bodyLen = s * 2.2; const bodyH = s * 1.1; ctx.beginPath(); ctx.ellipse(0, 0, bodyLen / 2, bodyH / 2, 0, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'rgba(0,0,0,0.2)'; ctx.lineWidth = 1; ctx.stroke(); // Tail const tailWag = Math.sin(this.tailPhase) * 0.25; ctx.beginPath(); ctx.moveTo(-bodyLen / 2 + 2, 0); ctx.lineTo(-bodyLen / 2 - 8, -s * 0.6 + tailWag * s); ctx.lineTo(-bodyLen / 2 - 8, s * 0.6 + tailWag * s); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); // Dorsal fin ctx.beginPath(); ctx.moveTo(0, -bodyH / 2); ctx.lineTo(-s * 0.3, -bodyH / 2 - s * 0.5); ctx.lineTo(-s * 0.8, -bodyH / 2); ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.fill(); // Eye const eyeX = dir * s * 0.5; const eyeY = -s * 0.15; ctx.beginPath(); ctx.arc(eyeX, eyeY, s * 0.2, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill(); ctx.beginPath(); ctx.arc(eyeX + dir * s * 0.08, eyeY, s * 0.1, 0, Math.PI * 2); ctx.fillStyle = '#222'; ctx.fill(); // Mouth ctx.beginPath(); ctx.arc(dir * s * 0.8, s * 0.15, s * 0.08, 0, Math.PI * 2); ctx.fillStyle = 'rgba(200,80,80,0.5)'; ctx.fill(); ctx.restore(); // Label if grounded if (this.state === 'grounded') { ctx.fillStyle = 'rgba(255,255,200,0.5)'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('🐟💨', this.x, this.y - this.radius - 6); } } } // ---- Rock ---- class Rock extends PhysObj { constructor(x, y, radius) { super(x, y, radius, 2.6, 0.6); this.color = `hsl(${randInt(25, 45)}, ${randInt(10, 30)}%, ${randInt(30, 50)}%)`; this.vertices = []; const n = randInt(6, 10); for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2 + rand(-0.15, 0.15); const r = radius * rand(0.7, 1.0); this.vertices.push({ x: Math.cos(a) * r, y: Math.sin(a) * r }); } } draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.beginPath(); const v = this.vertices; ctx.moveTo(v[0].x, v[0].y); for (let i = 1; i < v.length; i++) { ctx.lineTo(v[i].x, v[i].y); } ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 1; ctx.stroke(); // Highlight ctx.beginPath(); ctx.arc(-this.radius * 0.2, -this.radius * 0.2, this.radius * 0.25, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255,255,255,0.12)'; ctx.fill(); ctx.restore(); } } // ---- Plant ---- class Plant { constructor(x, y, height) { this.x = x; this.y = y; this.height = height; this.segments = []; const n = 8; for (let i = 0; i <= n; i++) { const t = i / n; this.segments.push({ x: 0, y: -t * height, bx: 0 }); } this.color = `hsl(${randInt(100, 140)}, 70%, ${randInt(35, 55)}%)`; this.leafColor = `hsl(${randInt(100, 140)}, 75%, ${randInt(45, 65)}%)`; this.swayPhase = rand(0, Math.PI * 2); this.swaySpeed = rand(1.5, 3); } update(dt, currentForceX) { this.swayPhase += dt * this.swaySpeed; const sway = Math.sin(this.swayPhase) * 8 + currentForceX * 0.04; const n = this.segments.length - 1; for (let i = 0; i <= n; i++) { const t = i / n; const s = sway * t * t; this.segments[i].bx = s; // Damping toward base if (i === 0) this.segments[i].bx = 0; } // Apply some physics: if water level drops, plant might bend more const baseDepth = TANK.bottom - waterSurfaceY; if (baseDepth < 50) { const factor = 1 + (50 - baseDepth) / 50; for (let i = 1; i <= n; i++) { this.segments[i].bx *= 1 + 0.3 * factor * (i / n); } } } draw(ctx) { const n = this.segments.length - 1; ctx.save(); ctx.translate(this.x, this.y); // Stem ctx.beginPath(); ctx.moveTo(0, 0); for (let i = 1; i <= n; i++) { const sx = this.segments[i].bx; const sy = this.segments[i].y; ctx.lineTo(sx, sy); } ctx.strokeStyle = this.color; ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.stroke(); // Leaves for (let i = 2; i < n; i += 2) { const t = i / n; const sx = this.segments[i].bx; const sy = this.segments[i].y; const side = (i % 4 === 0) ? 1 : -1; const leafSize = 8 + t * 10; ctx.save(); ctx.translate(sx, sy); ctx.rotate(side * 0.5 + Math.sin(this.swayPhase + i) * 0.15); ctx.beginPath(); ctx.ellipse(side * leafSize * 0.5, 0, leafSize, leafSize * 0.35, 0, 0, Math.PI * 2); ctx.fillStyle = this.leafColor; ctx.fill(); ctx.restore(); } ctx.restore(); } } // ---- Toy (rubber duck) ---- class Toy extends PhysObj { constructor(x, y) { super(x, y, 14, 0.35, 0.5); this.color = '#ffd93d'; this.beakColor = '#ff8c00'; this.eyeColor = '#222'; this.angle = 0; this.angularVel = 0; } update(dt, currentForceX, currentForceY) { super.update(dt, currentForceX * 0.3, currentForceY * 0.3); // Float on surface if (this.inWater && this.y < waterSurfaceY + 5 && this.y > waterSurfaceY - 15) { this.vy += (waterSurfaceY + 5 - this.y) * 8 * dt; } // Keep in tank if idle if (state === 'idle') { if (this.x > TANK.right - 10) { this.x = TANK.right - 10; this.vx *= -0.3; } if (this.x < TANK.x + 10) { this.x = TANK.x + 10; this.vx *= -0.3; } if (this.y < waterSurfaceY - 5) { this.y = waterSurfaceY - 5; this.vy *= -0.2; } } // Rotation based on velocity this.angularVel += (this.vx * 0.002 - this.angularVel) * 0.1; this.angle += this.angularVel * dt; } draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); const s = this.radius; // Body ctx.beginPath(); ctx.ellipse(0, s * 0.2, s * 1.2, s * 0.9, 0, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'rgba(0,0,0,0.12)'; ctx.lineWidth = 1; ctx.stroke(); // Head ctx.beginPath(); ctx.arc(0, -s * 0.7, s * 0.7, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.stroke(); // Beak ctx.beginPath(); ctx.moveTo(s * 0.4, -s * 0.9); ctx.lineTo(s * 1.0, -s * 0.75); ctx.lineTo(s * 0.4, -s * 0.6); ctx.closePath(); ctx.fillStyle = this.beakColor; ctx.fill(); // Eye ctx.beginPath(); ctx.arc(s * 0.2, -s * 0.85, s * 0.13, 0, Math.PI * 2); ctx.fillStyle = this.eyeColor; ctx.fill(); ctx.beginPath(); ctx.arc(s * 0.25, -s * 0.88, s * 0.05, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill(); // Wing ctx.beginPath(); ctx.ellipse(-s * 0.5, s * 0.1, s * 0.4, s * 0.25, -0.2, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255,200,50,0.6)'; ctx.fill(); ctx.restore(); } } // ---- Glass Fragment ---- class GlassFragment { constructor(x, y, size) { this.x = x; this.y = y; this.vx = rand(80, 350) * (Math.random() < 0.5 ? 1 : -1); this.vy = rand(-200, 80); this.angle = rand(0, Math.PI * 2); this.angularVel = rand(-6, 6); this.size = size || rand(8, 28); this.mass = this.size * this.size * 0.002; this.onGround = false; this.bounceRestitution = 0.2; this.groundFriction = 0.92; this.opacity = 0.85 + rand(0, 0.15); // Shape: irregular polygon this.vertices = []; const n = randInt(4, 7); for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2 + rand(-0.2, 0.2); const r = this.size * rand(0.5, 1.0); this.vertices.push({ x: Math.cos(a) * r, y: Math.sin(a) * r }); } this.life = 8 + rand(0, 5); this.age = 0; } update(dt) { this.age += dt; // Gravity this.vy += GRAVITY * dt; // Water/air drag const speed = Math.hypot(this.vx, this.vy); if (speed > 1) { const inWater = this.y > waterSurfaceY && this.y < TANK.bottom && this.x > TANK.x && this.x < TANK.right; const density = inWater ? WATER_DENSITY : AIR_DENSITY; const drag = 0.5 * density * speed * speed * 0.4 * (this.size * this.size) * 0.0001; this.vx -= (drag / this.mass) * (this.vx / speed) * dt; this.vy -= (drag / this.mass) * (this.vy / speed) * dt; } this.x += this.vx * dt; this.y += this.vy * dt; this.angle += this.angularVel * dt; // Floor if (this.y + this.size > FLOOR_Y) { this.y = FLOOR_Y - this.size; if (Math.abs(this.vy) > 30) { this.vy *= -this.bounceRestitution; this.vx *= 0.85; this.angularVel *= 0.7; } else { this.vy = 0; this.onGround = true; this.vx *= this.groundFriction; this.angularVel *= 0.9; } } // Walls if (this.x - this.size < ROOM_LEFT) { this.x = ROOM_LEFT + this.size; this.vx *= -0.5; this.angularVel *= 0.8; } if (this.x + this.size > ROOM_RIGHT) { this.x = ROOM_RIGHT - this.size; this.vx *= -0.5; this.angularVel *= 0.8; } // Tank walls if (this.x - this.size < TANK.x && this.y < TANK.bottom && this.y > TANK.y) { this.x = TANK.x + this.size; this.vx *= -0.6; this.angularVel *= 0.7; } if (this.y - this.size < TANK.y && this.x > TANK.x && this.x < TANK.right) { this.y = TANK.y + this.size; this.vy *= -0.5; } // Fade out after lifetime if (this.age > this.life) { this.opacity -= 0.02; } } draw(ctx) { if (this.opacity <= 0) return; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.globalAlpha = clamp(this.opacity, 0, 1); // Glass fill ctx.beginPath(); const v = this.vertices; ctx.moveTo(v[0].x, v[0].y); for (let i = 1; i < v.length; i++) { ctx.lineTo(v[i].x, v[i].y); } ctx.closePath(); ctx.fillStyle = 'rgba(180, 220, 255, 0.5)'; ctx.fill(); ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; ctx.lineWidth = 1.5; ctx.stroke(); // Highlight ctx.beginPath(); const cx = v.reduce((s, p) => s + p.x, 0) / v.length; const cy = v.reduce((s, p) => s + p.y, 0) / v.length; ctx.arc(cx - this.size * 0.15, cy - this.size * 0.15, this.size * 0.2, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; ctx.fill(); ctx.globalAlpha = 1; ctx.restore(); } get alive() { return this.opacity > 0.01; } } // ============================================================ // INITIALIZATION // ============================================================ function initScene() { waterSurfaceY = TANK.y + 55; waterVolume = TANK.w * (TANK.bottom - waterSurfaceY); puddleVolume = 0; waterParticles = []; splashParticles = []; glassFragments = []; crackOpen = 0; state = 'idle'; breakTime = 0; time = 0; // Rocks rocks = []; for (let i = 0; i < 4; i++) { const r = rand(16, 30); const x = TANK.x + rand(30, TANK.w - 30); const y = TANK.bottom - r - rand(2, 15); rocks.push(new Rock(x, y, r)); } // Plants plants = []; for (let i = 0; i < 3; i++) { const x = TANK.x + rand(30, TANK.w - 30); const h = rand(80, 150); plants.push(new Plant(x, TANK.bottom, h)); } // Fish fish = []; const fishPositions = [ [TANK.x + 100, waterSurfaceY + 80], [TANK.x + 200, waterSurfaceY + 150], [TANK.x + 300, waterSurfaceY + 100], [TANK.x + 150, waterSurfaceY + 220], [TANK.x + 280, waterSurfaceY + 180] ]; for (let i = 0; i < 4; i++) { const p = fishPositions[i]; const f = new Fish(p[0], p[1]); f.color = `hsl(${randInt(10, 50)}, 80%, 55%)`; fish.push(f); } // Toy toy = new Toy(TANK.x + TANK.w - 80, waterSurfaceY + 5); } // ============================================================ // PHYSICS UPDATE // ============================================================ function getCurrentForceAt(x, y) { if (state === 'idle') return { x: 0, y: 0 }; if (crackOpen < 3) return { x: 0, y: 0 }; const depthAtCrack = crackY - waterSurfaceY; if (depthAtCrack < 0) return { x: 0, y: 0 }; const flowVel = Math.sqrt(2 * GRAVITY * depthAtCrack) * DISCHARGE_COEFF; const distToCrack = TANK.right - x; if (distToCrack < 0) return { x: 0, y: 0 }; const falloff = 120; const strength = flowVel * Math.exp(-distToCrack / falloff) * 0.6; // Only apply within tank and near crack height const yDist = Math.abs(y - crackY); const yFalloff = 80; const yFactor = Math.exp(-yDist / yFalloff); return { x: strength * yFactor, y: strength * 0.1 * (y > crackY ? -1 : 1) * yFactor }; } function updatePhysics(dt) { time += dt; if (dt > 0.05) dt = 0.05; // clamp // ---- Crack opening ---- if (state === 'breaking') { breakTime += dt; crackOpen = Math.min(MAX_CRACK_OPEN, crackOpen + dt * 55); if (crackOpen >= MAX_CRACK_OPEN) { state = 'flowing'; } // Spawn glass fragments during breaking if (Math.random() < dt * 12) { const fx = TANK.right + rand(-5, 10); const fy = crackY + rand(-CRACK_HEIGHT / 2, CRACK_HEIGHT / 2); const frag = new GlassFragment(fx, fy, rand(6, 22)); frag.vx = rand(80, 280); frag.vy = rand(-250, 50); glassFragments.push(frag); } } // ---- Water flow ---- const depthAtCrack = crackY - waterSurfaceY; let flowVelocity = 0; let flowRate = 0; if (state !== 'idle' && crackOpen > 2 && depthAtCrack > 0) { flowVelocity = Math.sqrt(2 * GRAVITY * depthAtCrack) * DISCHARGE_COEFF; const openingHeight = CRACK_HEIGHT * (crackOpen / MAX_CRACK_OPEN); flowRate = flowVelocity * openingHeight * DISCHARGE_COEFF * 0.6; // Reduce water volume const volumeLoss = flowRate * dt; waterVolume -= volumeLoss; // Update water surface const waterHeight = waterVolume / TANK.w; waterSurfaceY = TANK.bottom - waterHeight; // Puddle puddleVolume += volumeLoss * 0.85; // Spawn water particles const particlesPerFrame = Math.min(12, 2 + flowRate * dt * 8); for (let i = 0; i < particlesPerFrame; i++) { if (Math.random() > dt * 30) continue; const px = TANK.right + rand(0, crackOpen * 0.5); const py = crackY + rand(-CRACK_HEIGHT / 2, CRACK_HEIGHT / 2) * (crackOpen / MAX_CRACK_OPEN); const depth = py - waterSurfaceY; const localVel = depth > 0 ? Math.sqrt(2 * GRAVITY * depth) * DISCHARGE_COEFF : flowVelocity * 0.5; const spread = rand(-FLOW_SPREAD, FLOW_SPREAD) * localVel * 0.15; waterParticles.push({ x: px, y: py, vx: localVel + rand(-20, 20), vy: spread - rand(0, 15), life: rand(1.0, 2.5), age: 0, size: rand(2.5, 5.5), opacity: rand(0.5, 0.9) }); } } // ---- Water particles ---- for (let i = waterParticles.length - 1; i >= 0; i--) { const p = waterParticles[i]; p.age += dt; p.vy += GRAVITY * dt * 0.7; p.x += p.vx * dt; p.y += p.vy * dt; // Floor hit → splash if (p.y > FLOOR_Y - 3) { for (let j = 0; j < 3; j++) { splashParticles.push({ x: p.x + rand(-5, 5), y: FLOOR_Y - rand(0, 4), vx: rand(-40, 40), vy: rand(-120, -40), life: rand(0.3, 0.8), age: 0, size: rand(1.5, 3.5), opacity: 0.7 }); } waterParticles.splice(i, 1); continue; } if (p.age > p.life || p.x > ROOM_RIGHT + 20 || p.x < ROOM_LEFT - 20) { waterParticles.splice(i, 1); } } // ---- Splash particles ---- for (let i = splashParticles.length - 1; i >= 0; i--) { const p = splashParticles[i]; p.age += dt; p.vy += GRAVITY * dt * 0.6; p.x += p.vx * dt; p.y += p.vy * dt; p.opacity *= 0.97; if (p.age > p.life || p.opacity < 0.02) { splashParticles.splice(i, 1); } } // ---- Glass fragments ---- for (let i = glassFragments.length - 1; i >= 0; i--) { glassFragments[i].update(dt); if (!glassFragments[i].alive) { glassFragments.splice(i, 1); } } // ---- Current field ---- function getCurrent(x, y) { return getCurrentForceAt(x, y); } // ---- Fish ---- for (const f of fish) { const cur = getCurrent(f.x, f.y); f.update(dt, cur.x, cur.y); } // ---- Rocks (simple) ---- for (const r of rocks) { const cur = getCurrent(r.x, r.y); r.update(dt, cur.x * 0.05, cur.y * 0.05); // Keep at bottom of tank if (r.y > TANK.bottom - r.radius) { r.y = TANK.bottom - r.radius; r.vy = 0; } if (r.x < TANK.x + r.radius) { r.x = TANK.x + r.radius; r.vx = 0; } if (r.x > TANK.right - r.radius) { r.x = TANK.right - r.radius; r.vx = 0; } } // ---- Plants ---- const curAtPlants = getCurrent(TANK.x + TANK.w / 2, TANK.bottom - 40); for (const p of plants) { p.update(dt, curAtPlants.x); } // ---- Toy ---- if (toy) { const cur = getCurrent(toy.x, toy.y); toy.update(dt, cur.x * 0.5, cur.y * 0.3); // Toy floats on water surface if (toy.inWater && toy.y > waterSurfaceY + 8) { toy.vy += (waterSurfaceY + 4 - toy.y) * 6 * dt; } if (state !== 'idle') { // Can be swept out if (toy.x > TANK.right + 10) { // airborne } } if (toy.onGround) { toy.vx *= 0.95; } } // ---- Cleanup old glass ---- if (glassFragments.length > 60) { glassFragments.splice(0, glassFragments.length - 60); } // ---- Water particle limit ---- if (waterParticles.length > 300) { waterParticles.splice(0, waterParticles.length - 300); } if (splashParticles.length > 150) { splashParticles.splice(0, splashParticles.length - 150); } // ---- Update depth display ---- if (state === 'idle') { const depth = crackY - waterSurfaceY; depthDisplay.textContent = depth > 0 ? `${Math.round(depth)} px` : 'above water'; } else { const depth = Math.max(0, crackY - waterSurfaceY); depthDisplay.textContent = `${Math.round(depth)} px (draining)`; } } // ============================================================ // RENDERING // ============================================================ function drawScene() { ctx.clearRect(0, 0, W, H); // ---- Room ---- const grad = ctx.createLinearGradient(0, 0, 0, H); grad.addColorStop(0, '#1a1a2e'); grad.addColorStop(0.6, '#16213e'); grad.addColorStop(1, '#0f0f1a'); ctx.fillStyle = grad; ctx.fillRect(0, 0, W, H); // Floor ctx.fillStyle = '#2a2a3e'; ctx.fillRect(0, FLOOR_Y, W, H - FLOOR_Y); ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, FLOOR_Y); ctx.lineTo(W, FLOOR_Y); ctx.stroke(); // Floor grid ctx.strokeStyle = 'rgba(255,255,255,0.02)'; ctx.lineWidth = 1; for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x, FLOOR_Y); ctx.lineTo(x, H); ctx.stroke(); } // ---- Puddle ---- if (puddleVolume > 1) { const puddleWidth = Math.sqrt(puddleVolume * 3); const puddleDepth = Math.min(PUDDLE_MAX_DEPTH, puddleVolume / (puddleWidth + 1) * 0.5); const px = TANK.right; const pw = Math.min(puddleWidth, ROOM_RIGHT - px); const py = FLOOR_Y - puddleDepth; const pgrd = ctx.createLinearGradient(px, py, px + pw, py); pgrd.addColorStop(0, 'rgba(30, 120, 220, 0.5)'); pgrd.addColorStop(0.5, 'rgba(30, 140, 230, 0.35)'); pgrd.addColorStop(1, 'rgba(20, 100, 200, 0.15)'); ctx.fillStyle = pgrd; ctx.beginPath(); ctx.ellipse(px + pw / 2, FLOOR_Y - puddleDepth / 2, pw / 2, puddleDepth / 2 + 2, 0, 0, Math.PI * 2); ctx.fill(); // Puddle reflection ctx.fillStyle = 'rgba(255,255,255,0.04)'; ctx.beginPath(); ctx.ellipse(px + pw / 2, FLOOR_Y - puddleDepth / 2 + 3, pw / 2 - 10, puddleDepth / 4, 0, 0, Math.PI * 2); ctx.fill(); } // ---- Tank exterior ---- // Back wall (dark) ctx.fillStyle = 'rgba(20, 30, 50, 0.6)'; ctx.fillRect(TANK.x, TANK.y, TANK.w, TANK.h); // Tank border (glass frame) ctx.strokeStyle = 'rgba(180, 210, 240, 0.4)'; ctx.lineWidth = 4; ctx.strokeRect(TANK.x, TANK.y, TANK.w, TANK.h); // Glass reflection ctx.fillStyle = 'rgba(255,255,255,0.03)'; ctx.fillRect(TANK.x + 8, TANK.y + 8, 20, TANK.h - 16); // ---- Water inside tank ---- if (waterSurfaceY < TANK.bottom - 2) { const waterTop = Math.max(TANK.y, waterSurfaceY); const waterBot = TANK.bottom; const wGrad = ctx.createLinearGradient(0, waterTop, 0, waterBot); wGrad.addColorStop(0, 'rgba(30, 130, 220, 0.55)'); wGrad.addColorStop(0.3, 'rgba(25, 110, 210, 0.65)'); wGrad.addColorStop(0.7, 'rgba(20, 90, 190, 0.7)'); wGrad.addColorStop(1, 'rgba(15, 70, 160, 0.75)'); ctx.fillStyle = wGrad; ctx.fillRect(TANK.x + 2, waterTop, TANK.w - 4, waterBot - waterTop); // Water surface line (visible waterline) const waveOffset = Math.sin(time * 1.2) * 2 + Math.sin(time * 0.7 + 1) * 1.5; ctx.beginPath(); ctx.moveTo(TANK.x + 2, waterSurfaceY + waveOffset); for (let x = TANK.x + 2; x <= TANK.right - 2; x += 4) { const w = Math.sin((x - TANK.x) * 0.05 + time * 2) * 2.5 + Math.sin((x - TANK.x) * 0.12 + time * 1.3) * 1.2; ctx.lineTo(x, waterSurfaceY + w); } ctx.strokeStyle = 'rgba(180, 230, 255, 0.7)'; ctx.lineWidth = 2.5; ctx.stroke(); // Water surface highlight ctx.beginPath(); ctx.moveTo(TANK.x + 2, waterSurfaceY + waveOffset + 1); for (let x = TANK.x + 2; x <= TANK.right - 2; x += 4) { const w = Math.sin((x - TANK.x) * 0.05 + time * 2) * 2.5 + Math.sin((x - TANK.x) * 0.12 + time * 1.3) * 1.2; ctx.lineTo(x, waterSurfaceY + w + 1); } ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)'; ctx.lineWidth = 1; ctx.stroke(); } // ---- Objects inside tank ---- // Rocks for (const r of rocks) { if (r.y < TANK.bottom + 5 && r.x > TANK.x && r.x < TANK.right) { r.draw(ctx); } } // Plants for (const p of plants) { if (p.y > waterSurfaceY - 20) { p.draw(ctx); } } // Fish (only draw if in tank or recently) for (const f of fish) { if (f.state !== 'airborne' && f.state !== 'grounded') { f.draw(ctx); } } // Toy if (toy && toy.y < TANK.bottom + 5 && toy.x > TANK.x - 10 && toy.x < TANK.right + 10) { toy.draw(ctx); } // ---- Tank front frame (left, bottom, top edges) ---- ctx.strokeStyle = 'rgba(160, 200, 240, 0.35)'; ctx.lineWidth = 3; // Left edge ctx.beginPath(); ctx.moveTo(TANK.x, TANK.y); ctx.lineTo(TANK.x, TANK.bottom); ctx.stroke(); // Bottom edge ctx.beginPath(); ctx.moveTo(TANK.x, TANK.bottom); ctx.lineTo(TANK.right, TANK.bottom); ctx.stroke(); // Top edge ctx.beginPath(); ctx.moveTo(TANK.x, TANK.y); ctx.lineTo(TANK.right, TANK.y); ctx.stroke(); // ---- Right wall (side panel) ---- if (state === 'idle') { // Intact wall ctx.strokeStyle = 'rgba(160, 200, 240, 0.4)'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(TANK.right, TANK.y); ctx.lineTo(TANK.right, TANK.bottom); ctx.stroke(); // Crack indicator (draggable) const crackLen = 28; ctx.strokeStyle = isDragging ? 'rgba(255, 100, 80, 0.9)' : 'rgba(255, 200, 100, 0.5)'; ctx.lineWidth = isDragging ? 3 : 2; ctx.setLineDash([4, 4]); ctx.beginPath(); ctx.moveTo(TANK.right - 6, crackY - crackLen / 2); ctx.lineTo(TANK.right + 6, crackY + crackLen / 2); ctx.stroke(); ctx.setLineDash([]); // Drag handle ctx.beginPath(); ctx.arc(TANK.right + 2, crackY, 6, 0, Math.PI * 2); ctx.fillStyle = isDragging ? 'rgba(255, 100, 80, 0.7)' : 'rgba(255, 200, 100, 0.4)'; ctx.fill(); ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1; ctx.stroke(); // Depth label const depth = crackY - waterSurfaceY; if (depth > 0) { ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = '11px sans-serif'; ctx.textAlign = 'left'; ctx.fillText(`⬇ ${Math.round(depth)}`, TANK.right + 12, crackY + 4); } else { ctx.fillStyle = 'rgba(255,200,100,0.3)'; ctx.font = '11px sans-serif'; ctx.textAlign = 'left'; ctx.fillText('☝ above water', TANK.right + 12, crackY + 4); } // Crack zigzag preview ctx.strokeStyle = 'rgba(255, 200, 100, 0.15)'; ctx.lineWidth = 1; ctx.beginPath(); const cz = crackY; for (let i = 0; i < 6; i++) { const t = i / 5; const yy = cz - 12 + t * 24; const xx = TANK.right + (i % 2 === 0 ? -3 : 3); if (i === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy); } ctx.stroke(); } else { // Broken wall - show opening const halfOpen = crackOpen / 2; const topY = crackY - CRACK_HEIGHT / 2; const botY = crackY + CRACK_HEIGHT / 2; // Opening (hole) ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.beginPath(); ctx.moveTo(TANK.right, topY - 2); ctx.lineTo(TANK.right + crackOpen * 0.6, topY - 4); ctx.lineTo(TANK.right + crackOpen * 0.8, crackY); ctx.lineTo(TANK.right + crackOpen * 0.6, botY + 4); ctx.lineTo(TANK.right, botY + 2); ctx.closePath(); ctx.fill(); // Jagged edges ctx.strokeStyle = 'rgba(180, 210, 240, 0.5)'; ctx.lineWidth = 2; // Top edge ctx.beginPath(); ctx.moveTo(TANK.right, TANK.y); const jTop = topY; for (let y = TANK.y; y < jTop; y += 6) { const jx = TANK.right + (Math.random() < 0.5 ? -2 : 2); ctx.lineTo(TANK.right, y); } ctx.stroke(); // Bottom edge ctx.beginPath(); ctx.moveTo(TANK.right, botY); for (let y = botY; y < TANK.bottom; y += 6) { ctx.lineTo(TANK.right, y); } ctx.stroke(); // Remaining glass shards on edges ctx.strokeStyle = 'rgba(200, 230, 255, 0.2)'; ctx.lineWidth = 1; for (let i = 0; i < 5; i++) { const sy = topY + rand(2, 10) + i * ((botY - topY) / 5); const sx = TANK.right + rand(2, crackOpen * 0.4); ctx.beginPath(); ctx.moveTo(TANK.right + rand(0, 2), sy); ctx.lineTo(sx, sy + rand(-4, 4)); ctx.stroke(); } // Wall remnants ctx.strokeStyle = 'rgba(160, 200, 240, 0.25)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(TANK.right, TANK.y); ctx.lineTo(TANK.right, topY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(TANK.right, botY); ctx.lineTo(TANK.right, TANK.bottom); ctx.stroke(); } // ---- Water jet particles ---- for (const p of waterParticles) { const alpha = p.opacity * (1 - p.age / p.life) * 0.7; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(80, 180, 255, ${alpha})`; ctx.fill(); // Motion blur trail ctx.beginPath(); ctx.arc(p.x - p.vx * 0.03, p.y - p.vy * 0.03, p.size * 0.6, 0, Math.PI * 2); ctx.fillStyle = `rgba(80, 180, 255, ${alpha * 0.3})`; ctx.fill(); } // ---- Splash particles ---- for (const p of splashParticles) { const alpha = p.opacity * (1 - p.age / p.life) * 0.6; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(150, 210, 255, ${alpha})`; ctx.fill(); } // ---- Glass fragments ---- for (const g of glassFragments) { g.draw(ctx); } // ---- Airborne fish (draw above everything) ---- for (const f of fish) { if (f.state === 'airborne' || f.state === 'grounded') { f.draw(ctx); } } // ---- Airborne toy ---- if (toy && (toy.x > TANK.right + 5 || toy.y < waterSurfaceY - 20 || toy.onGround)) { toy.draw(ctx); } // ---- Waterline depth indicator on tank ---- if (state !== 'idle') { const wl = waterSurfaceY; if (wl > TANK.y && wl < TANK.bottom) { ctx.strokeStyle = 'rgba(100, 200, 255, 0.15)'; ctx.lineWidth = 1; ctx.setLineDash([3, 5]); ctx.beginPath(); ctx.moveTo(TANK.x - 15, wl); ctx.lineTo(TANK.x, wl); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = 'rgba(100, 200, 255, 0.2)'; ctx.font = '10px sans-serif'; ctx.textAlign = 'right'; ctx.fillText(`${Math.round(TANK.bottom - wl)}px`, TANK.x - 18, wl + 3); } } // ---- Status overlay ---- if (state === 'idle') { ctx.fillStyle = 'rgba(255,255,255,0.12)'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('← Drag the crack marker on the right wall, then press Trigger →', W / 2, 28); } else if (state === 'breaking') { ctx.fillStyle = 'rgba(255,200,100,0.4)'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('⚡ CRACK SPREADING ⚡', W / 2, 28); } else { ctx.fillStyle = 'rgba(255,255,255,0.15)'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; const wp = waterParticles.length; const gf = glassFragments.length; ctx.fillText(`Draining · ${wp} particles · ${gf} glass shards`, W / 2, 28); } // ---- Reset hint ---- if (state !== 'idle') { ctx.fillStyle = 'rgba(255,255,255,0.08)'; ctx.font = '11px sans-serif'; ctx.textAlign = 'right'; ctx.fillText('Refresh page to reset', W - 16, H - 12); } } // ============================================================ // MAIN LOOP // ============================================================ let lastTime = 0; function loop(timestamp) { const dt = Math.min((timestamp - lastTime) / 1000, 0.05); lastTime = timestamp; if (state !== 'idle') { updatePhysics(dt); } else { // Still update water surface for display waterVolume = TANK.w * (TANK.bottom - waterSurfaceY); // Update fish idle behavior for (const f of fish) { const cur = { x: 0, y: 0 }; f.update(dt, 0, 0); } // Update plants sway for (const p of plants) { p.update(dt, 0); } // Toy floats if (toy) { toy.update(dt, 0, 0); if (toy.y > waterSurfaceY + 5) { toy.vy += (waterSurfaceY + 3 - toy.y) * 5 * dt; } } // Update depth display const depth = crackY - waterSurfaceY; depthDisplay.textContent = depth > 0 ? `${Math.round(depth)} px` : 'above water'; } drawScene(); requestAnimationFrame(loop); } // ============================================================ // EVENT HANDLERS // ============================================================ function getCanvasPos(e) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const clientX = e.clientX || (e.touches && e.touches[0].clientX); const clientY = e.clientY || (e.touches && e.touches[0].clientY); return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }; } function isOnCrack(mx, my) { const distX = Math.abs(mx - TANK.right); const distY = Math.abs(my - crackY); return distX < 25 && distY < 40; } function onMouseDown(e) { if (state !== 'idle') return; const pos = getCanvasPos(e); if (isOnCrack(pos.x, pos.y)) { isDragging = true; dragOffsetY = pos.y - crackY; canvas.style.cursor = 'grabbing'; e.preventDefault(); } } function onMouseMove(e) { const pos = getCanvasPos(e); if (isDragging && state === 'idle') { let newY = pos.y - dragOffsetY; newY = clamp(newY, CRACK_MIN_Y, CRACK_MAX_Y); crackY = newY; e.preventDefault(); } else if (state === 'idle') { canvas.style.cursor = isOnCrack(pos.x, pos.y) ? 'grab' : 'default'; } } function onMouseUp(e) { if (isDragging) { isDragging = false; canvas.style.cursor = 'default'; e.preventDefault(); } } // Touch support function onTouchStart(e) { if (state !== 'idle') return; const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const mx = (touch.clientX - rect.left) * scaleX; const my = (touch.clientY - rect.top) * scaleY; if (isOnCrack(mx, my)) { isDragging = true; dragOffsetY = my - crackY; e.preventDefault(); } } function onTouchMove(e) { if (!isDragging || state !== 'idle') return; const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const my = (touch.clientY - rect.top) * scaleY; let newY = my - dragOffsetY; newY = clamp(newY, CRACK_MIN_Y, CRACK_MAX_Y); crackY = newY; e.preventDefault(); } function onTouchEnd(e) { if (isDragging) { isDragging = false; e.preventDefault(); } } // ---- Trigger ---- triggerBtn.addEventListener('click', function() { if (state !== 'idle') return; const depth = crackY - waterSurfaceY; if (depth < 5) { // Allow anyway but show message depthDisplay.textContent = '⚠️ very shallow'; } state = 'breaking'; breakTime = 0; crackOpen = 2; triggerBtn.disabled = true; triggerBtn.textContent = '💥 BREACH!'; // Initial glass fragments for (let i = 0; i < 6; i++) { const fx = TANK.right + rand(-3, 8); const fy = crackY + rand(-CRACK_HEIGHT / 2, CRACK_HEIGHT / 2); const frag = new GlassFragment(fx, fy, rand(8, 25)); frag.vx = rand(100, 320); frag.vy = rand(-280, 60); glassFragments.push(frag); } }); // ---- Register events ---- canvas.addEventListener('mousedown', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); canvas.addEventListener('touchstart', onTouchStart, { passive: false }); window.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('touchend', onTouchEnd, { passive: false }); // ============================================================ // START // ============================================================ initScene(); // Set initial crack position to middle-lower for dramatic effect crackY = TANK.y + TANK.h * 0.55; requestAnimationFrame(loop); console.log('🐟 Aquarium Crack Simulation loaded.'); console.log('↕ Drag the crack marker on the right tank wall.'); console.log('💥 Press "Trigger Failure" to break the glass!'); </script> </body> </html> ``` ### Simulation Overview Here's how the aquarium failure simulation works from start to finish: - **Crack Positioning & Trigger**: Before the burst, you can drag the crack marker vertically along the right tank wall. A lower crack produces a stronger initial jet due to higher water pressure at depth. Click "Trigger Failure" to start the event. - **Water Physics & Drainage**: Water escapes through the opening with flow strength proportional to the depth of the crack below the waterline. As the tank drains, the flow weakens. The escaping water forms a curved jet affected by gravity, and a spreading puddle that collides with the room boundaries. - **Object Behavior**: Fish, rocks, plants, and a floating toy each react differently based on density, buoyancy, drag, and water current. Fish attempt to swim against the current before being swept through the breach. Objects transition correctly from underwater motion to airborne flight and then to floor collisions. - **Visual Feedback**: A visible waterline lowers continuously as the tank drains. Glass fragments break off with angular velocity, collide with surfaces, and experience water resistance. The crack opening widens progressively, and the water jet particles create a dynamic spray effect.