Raindrops carve rivers and valleys into a mountain range.
The landscape starts as fractal noise. Thousands of simulated raindrops then roll downhill, picking up sediment when they speed up and dropping it when they slow, so over time they carve gullies and ridges and build fans of sediment at the coast. The height map is drawn as a shaded relief map with hypsometric tints, hillshading, contour lines and rivers wherever the recent flow of drops concentrates.
Try it. Drag to raise mountains. Press R to grow a new landscape.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a hydraulic erosion simulation with JavaScript and the HTML canvas element, drawn as a shaded relief map. 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:
- Keep a height map of about 300 by 200 cells in a Float32Array and render it into an ImageData buffer that you draw scaled up.
- Fill the height map with fractal noise: write a small 2D value or Perlin noise function yourself and add five or six octaves. Lower the edges so it becomes an island, and treat everything below 0.3 as sea.
- Color each cell by height (deep blue, shallow blue, green lowlands, tan, brown rock, white peaks) and multiply by a hillshade: the dot product of the surface normal with a light from the northwest.
- Simulate raindrops, a few hundred per frame. Each drop starts at a random spot and, for up to 30 steps, reads the height and gradient by bilinear interpolation, moves one cell downhill with a little inertia, and compares its new height with the old one. Its sediment capacity grows with slope, speed and water. If it carries more than it can hold, or it went uphill, it deposits; otherwise it erodes the ground under it. Water slowly evaporates.
Once that works, make it beautiful:
- Spread erosion over a small circular brush so channels stay smooth.
- Add contour lines where the height crosses a multiple of a fixed interval, with every fifth line darker.
- Keep a flow map that every drop adds to and that fades over time, and tint cells blue where the flow is far above average, so rivers appear.
- Let me drag to raise mountains and press R for a new landscape.
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 thermal erosion that crumbles steep slopes, an oblique 3D view, or seasons with snow on the peaks.
