A dam fails above a miniature town and a muddy flood spreads through the valley.
A model valley with a reservoir, a concrete dam, a river between levees, a town, fields and wooded hills, cut out of the ground like a museum diorama. The water is a shallow-water heightfield solved with virtual pipes: flow between neighboring cells accelerates with the difference in surface height and is scaled back whenever a cell would give away more water than it holds, which makes wetting and drying robust. Fast water picks up mud and carries it, so a breach turns brown, and floodwater pours off the cut edges of the model. Everything is drawn with the painter's algorithm one isometric diagonal at a time, with translucent water blocks over the terrain.
Try it. Drag to heap up levees, Shift-drag or right-drag (or press D) to dig channels. Press B to breach the dam or refill the reservoir and R to reset the valley. Left alone it breaches the dam, refills, and every other time builds a levee for the town first.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an isometric flood simulation with JavaScript and the HTML canvas element: a small valley diorama where a dam breaks and water floods the land. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and is sharp on high-DPI screens.
- Store a 40 by 40 grid of terrain heights: a valley sloping toward the front, a basin at the back, and a wall of high cells (the dam) between them. Store a water depth per cell and fill the basin.
- Simulate the water with the virtual pipes method: keep a flow on every edge between neighbors. Each step, add gravity times dt times the difference in surface height (terrain plus water) to each flow, scale down a cell's outflows if together they would remove more water than it holds, then move the water. Dry cells have nothing to give, so wetting and drying come for free.
- Draw each cell as an isometric block (top face and the two front faces), diagonal by diagonal from the back corner, so nearer blocks cover farther ones. Draw the water as a translucent block on top.
- Press B to remove the middle of the dam.
Once that works, make it beautiful:
- Shade the faces differently (top light, left medium, right dark) and vary the grass with noise.
- Put little houses with pitched roofs on the floodplain and count how many stay dry.
- Let the visitor drag to raise levees and shift-drag to dig channels, picking the block under the pointer.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as rain, erosion that reshapes the terrain, or mud that turns the flood brown.
