**Planning simulation mechanics**

I’m figuring out how to create a single index.html that includes CSS and JS without any external resources. The simulation will be complex, but I can use canvas 2D physics approximations. I’ll represent water as a particle system, although it’s performance-heavy, so I might also opt for a polygon mesh for the tank. If there's a breach, jets will flow with velocity based on head height. I also need to simulate puddles and incorporate objects like fish and rocks. The user interaction will involve dragging a crack line on the tank.**Refining water simulation**

I need to account for water escaping through an opening, which will cause the waterline to lower continuously. As water mass is lost, the water level updates dynamically. For implementing physics, simple Euler integration seems like a good approach. I'm thinking of representing water with many small particles, but SPH might be too heavy. Instead, I could model water as two components: bulk water with particles for jets, and objects as rigid bodies with buoyancy computed by counting overlapping water particles. The lowering waterline presents a challenge too!**Streamlining water dynamics**

I’m simplifying the simulation by keeping the waterline height variable, defined by the average y of the particles. For buoyancy, I’ll approximate the submerged fraction of each object by sampling points and seeing if they're below the waterline. When a breach happens, nearby water particles will exert forces to carry objects, and I'll apply hydrodynamic drag based on their velocities. I’ll also calculate the buoyant force using water density, displaced volume, and gravity. Glass fragments will be treated as polygons with angular velocity, and I’ll make the canvas full-screen too!**Simulating water breach effects**

When the crack breaks, it will create a small vertical opening around 8-12 pixels wide. I’ll remove the right wall in that section to let water particles escape. I can simulate this by allowing particles to pass outside the tank when their x position exceeds the tank's right boundary. They’ll continue to fall under gravity, with initial velocity based on hydrostatic pressure: v = sqrt(2*g*h_head). I can also give escaping particles an extra boost based on the height from the opening to the water surface. Adjusting the crack’s height will affect the strength of the resulting jet.**Finalizing water simulation details**

I need to ensure that the rate of water escaping decreases as the water level lowers since there are fewer particles near the opening. The water jet should be curved, with particles ejected at varied angles and gravity bringing them down. When particles hit the floor, they’ll convert into puddles, which spread through diffusion. Objects transitioning between air and water will experience drag and collisions. I’ll define different object types, like buoyant toys and heavy rocks, and calculate their submerged area for buoyancy. With a limit on water particles for performance, I’ll use requestAnimationFrame to keep things running smoothly. The user can drag the crack vertically to control the opening, and my code will be contained in a single index.html for manageability. Let's get coding!

I created a single self-contained HTML file implementing the requested aquarium break simulation. Save the following content as index.html and open it in a modern browser (no network required). Features included: - Draggable vertical crack (drag up/down). The lower the crack when you trigger the break, the stronger the jet (hydrostatic pressure). - Click the "Break" button to burst the side panel at the crack. - Water simulated with particles (bulk inside tank + jet particles when escaping). - Jet curvature from gravity; initial jet strength based on water head above the crack. - Continuous lowering waterline (computed from remaining water mass) — visible and moves smoothly. - Puddle forms on the floor when water particles hit floor; puddle spreads and collides with room boundaries. - Fish, rocks, plants and a floating toy with different density/buoyancy/drag. Fish attempt to swim against the current; they can be swept through the breach. - Objects transition from underwater to airborne correctly and collide with floor/walls. - Glass fragments of the broken panel are created with angular velocity, collisions, and drag. - Water escapes from opening and draining rate decreases as tank drains. - All assets embedded (no external resources). Paste into index.html: ```html <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Aquarium Break Simulation</title> <style> html,body { height:100%; margin:0; background:#111; color:#ddd; font-family:sans-serif; overflow:hidden; } #ui { position: absolute; left:12px; top:12px; z-index:20; background: rgba(0,0,0,0.45); padding:10px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.6); } button { margin-right:6px; padding:6px 10px; } #hint { margin-top:6px; font-size:12px; color:#bbb; } canvas { display:block; width:100vw; height:100vh; } .small { font-size:12px; color:#9cf; } </style> </head> <body> <div id="ui"> <button id="breakBtn">Break</button> <button id="resetBtn">Reset</button> <span class="small">Drag the crack line vertically then press Break</span> <div id="hint">Crack Y: <span id="crackY">—</span></div> </div> <canvas id="c"></canvas> <script> (() => { const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); let W = innerWidth, H = innerHeight; canvas.width = W; canvas.height = H; window.addEventListener('resize', ()=>{ W = innerWidth; H = innerHeight; canvas.width = W; canvas.height = H; }); /* Simulation parameters */ const sim = { g: 1200, // gravity px/s^2 (visually scaled) waterDensity: 1.0, // relative timeScale: 1.0, maxParticles: 1200, particleRadius: 3, tank: { x: 80, y: 80, w: Math.min(720, W-220), h: Math.min(420, H-200) } }; /* State */ let particles = []; // water particles (inside and outside) let puddle = []; // discretized floor puddle cells let bodies = []; // fish, rocks, plants, toy let shards = []; // glass fragments let broken = false; let crack = { x: sim.tank.x + sim.tank.w, y: sim.tank.y + sim.tank.h*0.5, dragging:false }; const puddleCells = 200; let time = 0; /* Utility */ function rand(a,b) { return a + Math.random()*(b-a); } function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); } /* Initialize tank, water particles, objects, puddle */ function reset() { sim.tank = { x: 80, y: 80, w: Math.min(720, W-220), h: Math.min(420, H-200) }; particles = []; const pr = sim.particleRadius; const cols = Math.floor((sim.tank.w - 16) / (pr*2)); const rows = Math.floor((sim.tank.h - 40) / (pr*2) * 0.9); // initial fill ~90% for (let r=0;r<rows;r++){ for (let c=0;c<cols;c++){ if (particles.length >= sim.maxParticles) break; const x = sim.tank.x + 8 + pr + c*pr*2 + rand(-0.2,0.2); const y = sim.tank.y + sim.tank.h - 8 - pr - r*pr*2 + rand(-0.6,0.6); particles.push({ x,y,vx:0,vy:0, r:pr, mass:1, inside:true }); } } // puddle cells across bottom width of room puddle = new Array(puddleCells).fill(0); // bodies bodies = []; // Add fish (lighter, active) for (let i=0;i<6;i++){ bodies.push({ kind: 'fish', x: sim.tank.x + sim.tank.w*0.4 + rand(-40,40), y: sim.tank.y + sim.tank.h - 40 - i*8 + rand(-10,10), vx: rand(-10,10), vy:0, radius: 11, mass: 8, density: 0.7, drag:0.06, swimForce: 2800, angle: 0, color: '#FF9', alive:true }); } // floating toy (very buoyant) bodies.push({ kind:'toy', x: sim.tank.x + sim.tank.w*0.2, y: sim.tank.y + sim.tank.h - 50, vx:0, vy:0, radius:16, mass:5, density:0.5, drag:0.08, angle:0, color:'#F6A', bob:0}); // Rocks (heavy) for (let i=0;i<3;i++){ bodies.push({ kind:'rock', x: sim.tank.x + 60 + i*40, y: sim.tank.y + sim.tank.h - 18, vx:0, vy:0, radius:14, mass:30, density:2.5, drag:0.12, angle:0, color:'#888'}); } // Plants anchored to bottom - model as anchored body with spring for (let i=0;i<4;i++){ bodies.push({ kind:'plant', x: sim.tank.x + sim.tank.w*0.6 + i*18, y: sim.tank.y + sim.tank.h - 12, vx:0, vy:0, radius:8, mass:1.8, density:1.1, drag:0.15, anchorY: sim.tank.y + sim.tank.h-8, angle:0, color:'#3c3'}); } // shards reset shards = []; broken = false; // cliff crack middle crack.x = sim.tank.x + sim.tank.w; crack.y = sim.tank.y + sim.tank.h * 0.5; updateUI(); } /* Waterline: compute y coordinate representing top of water inside the tank */ function computeWaterline() { // compute average top-most y among inside particles const inside = particles.filter(p=>p.inside && p.x <= sim.tank.x+sim.tank.w); if (inside.length === 0) return sim.tank.y + sim.tank.h; // empty let minY = 1e9; inside.forEach(p => { if (p.y < minY) minY = p.y; }); // But waterline better from mass: compute approximate height from number of inside particles const cellArea = Math.PI*sim.particleRadius*sim.particleRadius; const totalVolume = inside.length * cellArea; const tankWidth = sim.tank.w - 16; const height = clamp(totalVolume / tankWidth, 0, sim.tank.h); const y = sim.tank.y + sim.tank.h - height; return y; } /* Break the tank at crack: create opening and shards, start allowing water to escape */ function doBreak() { if (broken) return; broken = true; // create shards from the right panel (vertical strip near crack) const cx = sim.tank.x + sim.tank.w; const cy = crack.y; const openingHalf = 26; const shardCount = 10; for (let i=0;i<shardCount;i++){ const h = rand(8,40); const y0 = cy + rand(-openingHalf-30, openingHalf+30); const shard = { x: cx - rand(0,8), y: y0, vx: rand(-200,-60), vy: rand(-120,80), angle: rand(-Math.PI,Math.PI), angVel: rand(-6,6), w: rand(6,14), h: h, mass: rand(2,8), col: `rgba(220,230,255,${rand(0.35,0.95)})`, inWater: true }; shards.push(shard); } } /* Physics step */ function step(dt) { time += dt; // compute waterline inside tank const waterline = computeWaterline(); // Particles step const openingY = crack.y; // center of opening const openingSize = 14; // vertical half-size for opening region // head height for pressure: distance from waterline to opening center (positive if waterline above) const head = Math.max(0, waterline - openingY); // pressure velocity scalar const pressureBoost = Math.sqrt(2 * sim.g * head) || 0; // Drain rate effect: scale ejection based on how many particles remain and head const drainFactor = clamp(head / sim.tank.h, 0, 1); // For each particle for (let i = particles.length-1; i>=0; i--){ const p = particles[i]; // Apply gravity p.vy += sim.g * dt; // simple water drag for particles (air/resistance) p.vx *= 1 - dt*0.06; p.vy *= 1 - dt*0.02; // If inside tank, constrain by walls unless broken region if (p.inside) { // collision with left/top/bottom walls if (p.x - p.r < sim.tank.x + 2) { p.x = sim.tank.x + 2 + p.r; p.vx = Math.abs(p.vx)*0.3; } if (p.y - p.r < sim.tank.y + 2) { p.y = sim.tank.y + 2 + p.r; p.vy = Math.abs(p.vy)*0.2; } if (p.y + p.r > sim.tank.y + sim.tank.h - 2) { p.y = sim.tank.y + sim.tank.h - 2 - p.r; p.vy = -Math.abs(p.vy)*0.25; } // right wall: if not broken allow to bounce; if broken allow escape within opening band const rightX = sim.tank.x + sim.tank.w; if (!broken) { if (p.x + p.r > rightX - 2) { p.x = rightX - 2 - p.r; p.vx = -Math.abs(p.vx)*0.2; } } else { // opening vertical interval: if (Math.abs(p.y - openingY) <= openingSize) { // push particle out with boost proportional to pressure and slightly random // only if it's very close to right wall if (p.x + p.r > rightX - 4) { // if head > 0, give a radial push outwards let boost = pressureBoost * (0.9 + Math.random()*0.3) * 0.9; // lower head -> less boost p.vx += boost * (0.8 + Math.random()*0.4); p.vy += rand(-70, 70) * (1 - drainFactor*0.6); // mark as escaping p.inside = false; } else { // softly push toward opening to flow out p.vx += (rightX - p.x) * 0.006; } } else { // solid panel otherwise if (p.x + p.r > rightX - 2) { p.x = rightX - 2 - p.r; p.vx = -Math.abs(p.vx)*0.25; } } } } else { // outside particles experience air drag and floor collision -> become puddle p.vx *= 1 - dt*0.12; p.vy *= 1 - dt*0.04; // when hitting floor (floor at sim.tank.y + sim.tank.h + floorOffset) const floorY = sim.tank.y + sim.tank.h + 10; if (p.y + p.r > floorY) { // add to puddle: map x to cell const idx = Math.floor(((p.x) / W) * puddleCells); if (idx >= 0 && idx < puddleCells) { puddle[idx] += 1; // mass increment } // remove particle particles.splice(i,1); continue; } } // integrate p.x += p.vx * dt; p.y += p.vy * dt; } // limit particle count (convert to puddle or remove oldest) if (particles.length > sim.maxParticles) { const extra = particles.length - sim.maxParticles; for (let i=0;i<extra;i++){ const p = particles.shift(); // convert to puddle if near floor/outside const idx = Math.floor(((p.x) / W) * puddleCells); if (idx >= 0 && idx < puddleCells) puddle[idx] += 1; } } // Puddle spread: simple diffusion & evaporation const newP = puddle.slice(); for (let i=0;i<puddleCells;i++){ const left = i-1, right = i+1; const spread = 0.3; if (left>=0) { const diff = (puddle[i]-puddle[left])*0.5; newP[i] -= diff*spread; newP[left] += diff*spread; } if (right<puddleCells) { const diff = (puddle[i]-puddle[right])*0.5; newP[i] -= diff*spread; newP[right] += diff*spread; } // small evaporation newP[i] *= 0.9997; } for (let i=0;i<puddleCells;i++) puddle[i] = clamp(newP[i],0,1e6); // Bodies physics const waterLevel = computeWaterline(); bodies.forEach(b => { // buoyancy: approximate submerged fraction based on waterLevel and body vertical extent const bottom = b.y + b.radius; const top = b.y - b.radius; const submerged = clamp((waterLevel - top) / (2*b.radius), 0, 1); // compute buoyant force = waterDensity * submerged_vol * g // use 2D proxy: area ~ radius*2 => use mass scale const displaced = submerged * (b.radius*2) * 1.0; const buoy = sim.waterDensity * displaced * sim.g * 0.9; // drag relative to local water velocity: average velocity of nearby particles const local = { vx:0, vy:0, n:0 }; for (let p of particles) { const dx = p.x - b.x, dy = p.y - b.y; const d2 = dx*dx + dy*dy; const influence = (d2 < (b.radius*4)*(b.radius*4)) ? 1/Math.max(1, Math.sqrt(d2)) : 0; if (influence>0) { local.vx += p.vx*influence; local.vy += p.vy*influence; local.n += influence; } } if (local.n>0) { local.vx/=local.n; local.vy/=local.n; } // drag force const relvx = b.vx - local.vx, relvy = b.vy - local.vy; const drag = -b.drag * submerged; const dragFx = drag * relvx * Math.abs(relvx); const dragFy = drag * relvy * Math.abs(relvy); // apply gravity, buoyancy, drag const weight = b.mass * sim.g; const fy = -weight + (buoy) - dragFy; const fx = -dragFx; // fish swim: attempt to swim left (against current) if underwater and alive if (b.kind === 'fish' && b.alive) { // swim direction: left, try to keep facing current head-on const swimDir = -1; // compute current magnitude locally const cur = Math.hypot(local.vx, local.vy); // force scaled: if current is stronger, fish may fail const swim = b.swimForce * (1 - clamp(cur/300,0,0.9)); const swimFx = swimDir * swim * submerged; // also apply a lateral wobble b.vx += swimFx * dt / b.mass; } // plants anchored: spring to anchorY if kind plant if (b.kind === 'plant') { const k = 2200; const dy = b.y - b.anchorY; const spring = -k * dy; b.vy += spring / b.mass * dt * submerged; } // integrate acceleration: approximate b.vx += (fx / b.mass) * dt; b.vy += (fy / b.mass) * dt; // water currents push when near opening/escaping jet - sample nearby escaping particles // done indirectly via local velocities above // integrate position b.x += b.vx * dt; b.y += b.vy * dt; // collisions with tank walls if inside and not broken area if (b.x - b.radius < sim.tank.x + 2) { b.x = sim.tank.x + 2 + b.radius; b.vx = Math.abs(b.vx)*0.3; } if (!broken) { if (b.x + b.radius > sim.tank.x + sim.tank.w - 2) { b.x = sim.tank.x + sim.tank.w - 2 - b.radius; b.vx = -Math.abs(b.vx)*0.2; } } else { // if over opening band and crosses right boundary they escape if (b.x - b.radius > sim.tank.x + sim.tank.w + 4) { // now in air; continue physics with gravity only } } // top and bottom if (b.y - b.radius < sim.tank.y + 2) { b.y = sim.tank.y + 2 + b.radius; b.vy = Math.abs(b.vy)*0.3; } // floor collision (room floor at sim.tank.y + sim.tank.h + 8) const floorY = sim.tank.y + sim.tank.h + 10; if (b.y + b.radius > floorY) { b.y = floorY - b.radius; if (Math.abs(b.vy) > 80) { b.vy = -b.vy*0.25; b.vx *= 0.85; } else { b.vy = 0; b.vx *= 0.96; } } // small rotation from vx b.angle += b.vx * 0.003 * dt; if (b.kind === 'fish') { // fish drag and swim orientation b.angle = Math.atan2(b.vy, b.vx) * 0.4; // fish attempt to counter being swept: if vx too positive, set alive=false eventually (swept out) if (b.x > sim.tank.x + sim.tank.w + 30) { // fish is through breach -> become airborne and swept } } // If rock or plant anchored, keep near bottom if (b.kind === 'rock') { // slight resting friction b.vx *= 0.996; } if (b.kind === 'toy') { // bobbing behavior: if partially submerged, add sinusoidal bob const submergedFrac = submerged; b.bob += dt * 2; const bobUp = Math.sin(b.bob)*6*submergedFrac; b.y += bobUp * dt*0.6; } }); // Shards physics for (let i=shards.length-1;i>=0;i--){ const s = shards[i]; // drag: more in water (if y < waterline) const inWater = s.y < computeWaterline() + 8; const drag = inWater ? 0.8 : 0.12; s.vx *= 1 - drag*dt; s.vy += sim.g * dt * (inWater ? 0.2 : 1.0); s.angVel *= 1 - drag*dt; s.x += s.vx * dt; s.y += s.vy * dt; s.angle += s.angVel * dt; // collide with floor const floorY = sim.tank.y + sim.tank.h + 10; if (s.y + s.h*0.5 > floorY) { s.y = floorY - s.h*0.5; s.vy = -s.vy * 0.25; s.vx *= 0.85; s.angVel *= 0.6; // small friction and eventual rest if (Math.abs(s.vx) < 5 && Math.abs(s.vy) < 10) { s.vx = 0; s.vy = 0; s.angVel = 0; } } // out of bounds removal if (s.x < -100 || s.x > W+100 || s.y > H+200) shards.splice(i,1); } // convert some inside particles to outside if internal pressure pushes them over threshold to right (simulate continuous flow) if (broken && head > 2) { // number of particles to nudge out depends on head const pushCount = Math.floor(6 * drainFactor); for (let k=0;k<pushCount;k++) { // find a particle near right wall within opening band let idx = particles.findIndex(p => p.inside && Math.abs(p.y - openingY) < openingSize+10 && p.x > sim.tank.x + sim.tank.w - 18); if (idx >= 0) { const p = particles[idx]; p.inside = false; p.vx += pressureBoost * (0.6 + Math.random()*0.6); p.vy += rand(-120,120) * (0.2 + Math.random()*0.8); } } } // spawn small number of outside particles from inside near opening to visually sustain jet if (broken && head > 1) { const spawn = clamp(Math.floor(6 * drainFactor),0,16); for (let i=0;i<spawn;i++){ if (particles.length > sim.maxParticles*0.98) break; const px = sim.tank.x + sim.tank.w - 6 + rand(-4,8); const py = openingY + rand(-openingSize, openingSize); const vx = pressureBoost * (0.4 + Math.random()*0.8) + rand(0,60); const vy = rand(-80,80); particles.push({ x:px, y:py, vx, vy, r:sim.particleRadius, mass:1, inside:false }); } } // lower waterline smoothly: waterline computed from particles so it will lower continuously. // Fish reactions: if fish experience strong rightwards current (local.vx), they try to swim // This was earlier in body loop. // time step end } /* Rendering */ function draw() { ctx.clearRect(0,0,W,H); // background room ctx.fillStyle = '#0e0f12'; ctx.fillRect(0,0,W,H); // draw tank (glass rectangle) const t = sim.tank; // shadow ctx.fillStyle = 'rgba(0,0,0,0.45)'; ctx.fillRect(t.x+6, t.y+6, t.w+28, t.h+40); // tank back panel ctx.fillStyle = '#07202b'; ctx.fillRect(t.x, t.y, t.w, t.h); // compute waterline const waterline = computeWaterline(); // draw water inside tank as filled rectangle up to waterline (smooth) const grad = ctx.createLinearGradient(0, waterline, 0, t.y+t.h); grad.addColorStop(0, 'rgba(60,160,190,0.7)'); grad.addColorStop(1, 'rgba(20,80,110,0.95)'); ctx.fillStyle = grad; const wlTop = clamp(waterline, t.y, t.y+t.h); ctx.fillRect(t.x+2, wlTop, t.w-4, t.y+t.h - wlTop); // draw waterline visually as a smooth line across tank ctx.strokeStyle = 'rgba(180,240,255,0.9)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(t.x+4, wlTop + 0.5); ctx.lineTo(t.x + t.w - 4, wlTop + 0.5); ctx.stroke(); // draw water particles (jet + splashes) for (let p of particles) { ctx.beginPath(); const alpha = p.inside ? 0.35 : 0.7; ctx.fillStyle = `rgba(180,220,255,${alpha})`; ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill(); } // draw glass (right and left) with crack overlay // left glass & top/bottom edges ctx.strokeStyle = 'rgba(200,220,240,0.04)'; ctx.lineWidth = 2; ctx.strokeRect(t.x, t.y, t.w, t.h); // draw the intact right panel glass with crack // if broken show a split at crack ctx.save(); ctx.translate(0,0); // draw crack line draggable ctx.beginPath(); const cx = t.x + t.w; ctx.moveTo(cx-1, t.y + 8); // crack zigzag small line centered at crack.y const crackLen = 28; const cy = crack.y; ctx.strokeStyle = '#9bd'; ctx.lineWidth = 2; // draw short vertical indicator where crack is ctx.moveTo(cx-6, cy - crackLen); for (let i=0;i<8;i++){ const yy = cy - crackLen + i*(crackLen*2/8); const offset = (i%2===0) ? -3 : 3; ctx.lineTo(cx+offset, yy + rand(-1,1)); } ctx.lineTo(cx-6, cy + crackLen); ctx.stroke(); ctx.restore(); // draw bodies (fish, rocks, plants, toy) for (let b of bodies) { ctx.save(); ctx.translate(b.x, b.y); ctx.rotate(b.angle || 0); if (b.kind === 'fish') { // body ellipse ctx.fillStyle = b.color; ctx.beginPath(); ctx.ellipse(0,0, b.radius, b.radius*0.6, 0, 0, Math.PI*2); ctx.fill(); // tail ctx.fillStyle = '#EFA'; ctx.beginPath(); ctx.moveTo(-b.radius*0.7,0); ctx.lineTo(-b.radius*1.2, -b.radius*0.5); ctx.lineTo(-b.radius*1.2, b.radius*0.5); ctx.closePath(); ctx.fill(); // eye ctx.fillStyle = '#112'; ctx.beginPath(); ctx.arc(b.radius*0.5, -b.radius*0.15, 2.2,0,Math.PI*2); ctx.fill(); } else if (b.kind === 'rock') { ctx.fillStyle = b.color; ctx.beginPath(); ctx.ellipse(0,0, b.radius, b.radius*0.8, 0, 0, Math.PI*2); ctx.fill(); } else if (b.kind === 'plant') { // simple stalk ctx.strokeStyle = b.color; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, 8); ctx.quadraticCurveTo(-8 - Math.sin(time*2+b.x)*6, -10 - Math.cos(time*1.8+b.y)*8, 0, -b.radius*2 - 8); ctx.stroke(); } else if (b.kind === 'toy') { // circular float toy with stripes ctx.fillStyle = b.color; ctx.beginPath(); ctx.arc(0,0,b.radius,0,Math.PI*2); ctx.fill(); ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.fillRect(-b.radius*0.9, -3, b.radius*1.8, 6); } ctx.restore(); } // draw puddle on floor as bluish smear const floorY = t.y + t.h + 10; ctx.save(); ctx.translate(0,0); for (let i=0;i<puddleCells;i++){ const v = puddle[i]; if (v>0.01) { const x0 = (i/puddleCells)*W; const w = (W/puddleCells); const h = clamp(Math.log(1+v)*3, 1, 30); const alpha = clamp(Math.log(1+v)*0.12, 0.06, 0.6); ctx.fillStyle = `rgba(80,150,180,${alpha})`; ctx.beginPath(); ctx.ellipse(x0 + w*0.5, floorY + h*0.5, w*0.6, h*0.6, 0, 0, Math.PI*2); ctx.fill(); } } ctx.restore(); // draw shards ctx.save(); for (let s of shards) { ctx.translate(s.x, s.y); ctx.rotate(s.angle); ctx.fillStyle = s.col; ctx.beginPath(); ctx.moveTo(-s.w*0.5, -s.h*0.5); ctx.lineTo(s.w*0.5, -s.h*0.3); ctx.lineTo(s.w*0.2, s.h*0.5); ctx.lineTo(-s.w*0.4, s.h*0.3); ctx.closePath(); ctx.fill(); ctx.rotate(-s.angle); ctx.translate(-s.x, -s.y); } ctx.restore(); // draw UI overlays (water volume %) const insideCount = particles.filter(p=>p.inside).length; const max = sim.maxParticles; const percent = Math.round( insideCount / max * 100 ); ctx.fillStyle = '#9cf'; ctx.font = '14px sans-serif'; ctx.fillText(`Water volume: ${insideCount} particles (${percent}%)`, 20, H - 20); } /* animation loop */ let last = performance.now(); function frame(now) { const dt = Math.min(0.033, (now - last) / 1000) * sim.timeScale; last = now; step(dt); draw(); updateUI(); requestAnimationFrame(frame); } /* Mouse interactions for dragging crack */ canvas.addEventListener('mousedown', (e)=>{ const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left, my = e.clientY - rect.top; const cx = sim.tank.x + sim.tank.w; if (Math.abs(mx - cx) < 20 && my > sim.tank.y + 20 && my < sim.tank.y + sim.tank.h - 20) { crack.dragging = true; crack.y = clamp(my, sim.tank.y + 20, sim.tank.y + sim.tank.h - 20); } }); window.addEventListener('mousemove', (e)=>{ if (crack.dragging) { const rect = canvas.getBoundingClientRect(); const my = e.clientY - rect.top; crack.y = clamp(my, sim.tank.y + 20, sim.tank.y + sim.tank.h - 20); } }); window.addEventListener('mouseup', ()=>{ crack.dragging = false; }); /* UI */ const breakBtn = document.getElementById('breakBtn'); const resetBtn = document.getElementById('resetBtn'); const crackYspan = document.getElementById('crackY'); breakBtn.addEventListener('click', ()=>{ doBreak(); // give shards some impulse relative to depth: deeper crack = more violent glass const depthFactor = clamp((computeWaterline() - crack.y) / sim.tank.h, 0, 1); for (let s of shards) { s.vx += rand(-80, -20) * (1 + depthFactor*2); s.vy += rand(-40, 40) * (1 + depthFactor*1.5); s.angVel += rand(-5,5) * (1 + depthFactor*1.6); } }); resetBtn.addEventListener('click', reset); function updateUI() { crackYspan.textContent = Math.round(crack.y - sim.tank.y) + "px"; } /* initial spawn */ reset(); requestAnimationFrame(frame); /* Improve UX: allow spacebar to break, R to reset */ window.addEventListener('keydown', (e)=>{ if (e.key === ' ') { e.preventDefault(); doBreak(); } if (e.key.toLowerCase() === 'r') reset(); }); })(); </script> </body> </html> ``` Notes and tips: - Drag the vertical crack indicator (near the right tank edge) up and down before pressing Break. The displayed "Crack Y" shows the vertical position relative to tank top. - Lower crack position yields a larger "head", producing a stronger initial jet and more violent ejection. - Simulation uses many approximations (2D particles + simplified buoyancy/drag) to keep it runnable in a browser without external libraries. - If performance is slow, reduce sim.maxParticles in the script. If you want any adjustments (more fish, bigger tank, different visual styles, more physical accuracy like SPH, or ability to re-seal the crack), tell me which and I can adapt the single-file HTML.