Aquarium breach · grok-4.6
Create a large glass aquarium whose side panel develops a visible crack and then bursts. The simulation must include: - Water escaping through the opening with flow strength based on water depth and decreasing as the tank drains - A curved water jet affected by gravity - A spreading puddle that collides with the room boundaries - Fish, rocks, plants, and a floating toy reacting differently according to density, buoyancy, drag, and current - Objects transitioning correctly from underwater motion to airborne motion and then to floor collisions - Fish attempting to swim against the current before being swept through the breach - Glass fragments with angular velocity, collisions, and water resistance - A visible waterline that lowers continuously rather than disappearing all at once Let the user drag the crack vertically before triggering the failure. A lower crack should initially produce a stronger jet than a higher crack. Give me 1 html file
transcript · 6 messages
Create a large glass aquarium whose side panel develops a visible crack and then bursts. The simulation must include: - Water escaping through the opening with flow strength based on water depth and decreasing as the tank drains - A curved water jet affected by gravity - A spreading puddle that collides with the room boundaries - Fish, rocks, plants, and a floating toy reacting differently according to density, buoyancy, drag, and current - Objects transitioning correctly from underwater motion to airborne motion and then to floor collisions - Fish attempting to swim against the current before being swept through the breach - Glass fragments with angular velocity, collisions, and water resistance - A visible waterline that lowers continuously rather than disappearing all at once Let the user drag the crack vertically before triggering the failure. A lower crack should initially produce a stronger jet than a higher crack. Give me 1 html file
thinking
The user wants a single-page web app that simulates a glass aquarium bursting with water, fish, objects, etc. I need to create a self-contained index.html file with all CSS and JS inline, no external ...```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aquarium Burst</title>
<style>
body { margin:0; background:#111; overflow:hidden; font-family:Arial; }
canvas { display:block; margin:40px auto; border 2px solid #333; box-shadow:0 0 40px #000; }
#ui {
position:absolute; top:20px; left:20px; color:#fff; background:rgba(0,0,0,0.6);
padding:15px; border-radius:8 px; pointer-events:none;
}
button {
margin-top:10px; padding:8px 16px; background:#c33; color:#fff; border:none;
border-radius:4px; cursor:pointer;
}
button:hover { background:#f33; }
</style>
</ head>
<body>
<canvas id="c" width="1000" height="600"></canvas>
<div id="ui">
<div>Drag the crack on the right wall</div>
<button onclick="burst()">BURST TANK</button>
</div>
<script>
// =============== AQUARI UM BURST SIMULATION ===============
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
let tankX = 180, tankY = 80, tankW = 520, tankH = 380;
let waterLevel = 0.92;
let crackY = 280;
let crackOpen = 0;
let burstTime = 0;
let isBursting = false;
let waterParticles = [];
let puddle = {x: 0, y: 0, w: 0, h: 0, vol: 0};
let objects = [];
let shards = [];
let time = 0;
let mouseDown = false;
let mouseX = 0, mouseY = 0;
const G = 1650;
const WATER_DENSITY = 1;
const AIR_DENSITY = 0.I'll build a self-contained canvas simulation: a draggable crack, pressure-based jet, draining waterline, and objects that react with buoyancy, drag, and collisions.
/tmp/ws/index.html (45942 bytes)Successfully wrote 45942 bytes to /tmp/ws/index.html
thinking
There's a leftover junk line in the code I should clean up:
Fixing a leftover junk line, a hole that punched through the whole canvas, and gravel that flickered every frame.
{"path":"/tmp/ws/index.html","edits":[{"oldText":" ctx.fillStyle = \"#6b pent\".includes(\" \") ? \"#3d4540\" : \"#3d4540\";\n ctx.filSuccessfully replaced 4 block(s) in /tmp/ws/index.html.
thinking
The file is written and cleaned up. The user asked for a single HTML file with all the simulation features. Let me summarize what was delivered.
`index.html` is a self-contained aquarium breach sim (no network, all CSS/JS inline). **Before the break** - Drag the glowing scratch on the right pane to set crack height - **Tap the glass** / Space to fail it, **R** to reset - A lower crack starts with more head pressure and a harder jet **What happens** - The pane spider-cracks, then opens; shards fly with spin, bounce, and slow in water - Water leaves through the hole with Torricelli-style speed from depth above the crack - The jet arcs under gravity; the waterline drops continuously instead of vanishing - A puddle spreads across the floor and stops at the room walls - Fish fight the current, then get pulled through; rocks stay heavy; plants sway (and can rip free); the toy floats until the surface drops - Bodies switch from submerged buoyancy/drag, to airborne ballistic motion, to floor collisions Open `index.html` in a browser to run it.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Aquarium with fish, plants, crack, burst jet, draining waterline, and spreading puddle all render correctly on space trigger.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.