Eroded terrain printed as a survey sheet with labeled contours, streams and hillshade.
The terrain starts as warped fractal noise creased with meandering valleys, then tens of thousands of simulated raindrops erode it: each picks up sediment as it speeds downhill and drops it as it slows. A priority flood fills depressions (deep ones stay as lakes), and D8 flow accumulation decides where streams run: they start only where water gathers in a real valley, then are drawn along the smooth fall line so they cross the contours at right angles and merge with their neighbors. Contours come from marching squares, stitched into long lines by hashing the grid edges they cross and smoothed with Chaikin corner cutting, and index contours carry elevation labels set into gaps on their straightest stretches. The engraved style turns the hillshade into a line screen, stamps tree marks and draws waterlines from a distance transform.
Try it. Click to raise a peak, right-click or Shift-click to sink a basin, or drag to carve a valley along your path; a little rain then settles the new landform and the whole sheet redraws. Hover for spot elevations. Press T or the button for the engraved style and N for new terrain.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a procedural topographic map with JavaScript and the HTML canvas element: generated terrain drawn as contour lines over a hillshade, like a printed survey sheet. 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, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Write a small 2D Perlin or value noise function yourself, and fill a grid of about 200 by 130 heights with a few octaves of it. Treat heights below a threshold as sea.
- Hillshade: for each cell, estimate the slope from its neighbors, compute how much it faces a light from the northwest, and paint a small image with that brightness (sea in pale blue). Draw it scaled up to fill the canvas.
- Contours: use marching squares. For every grid cell and every contour level that passes through it, work out which edges the level crosses, interpolate the crossing points, and draw a short line segment between them. Use thin brown lines.
Once that works, make it beautiful:
- Make every fifth contour an index contour: thicker, with its elevation printed along it, rotated to follow the line.
- Add a simple hydraulic erosion pass: drop a few thousand raindrops that roll downhill, carry sediment and deposit it when they slow down, so valleys sharpen.
- Compute where water flows (each cell drains to its lowest neighbor), count how much water passes through every cell, and draw blue streams where that count is large.
- Add a neatline frame, a scale bar and a title in the margin.
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 stitching segments into smooth polylines, an engraved antique style, or clicking to raise mountains and redraw.
