Raked gravel in low morning sun, its furrows flowing around mossy stones.
The gravel is a height field lit per pixel. Raking stamps a five-tooth cosine profile along the rake's path, using each cell's distance to the whole stroke so far, so the furrows are true offset curves of the path: round at the outside of a turn, and passes laid side by side join because each ends on a trough. Near the stones the same profile is applied to a signed distance field of their outlines, joined with a smooth minimum, so concentric rings wrap each stone and merge between neighbours, and since the rings come from the field every frame they re-form instantly when a stone moves. Normals from the furrows, stones and pebble grain are lit by a low sun with shadows marched through the stone heights, a sky term and trough occlusion, under the swaying shade of a maple whose leaves drift down. Left alone, a monk rakes the bed pass by pass in waves and straight lines.
Try it. Drag across the gravel to rake your own furrows, drag a stone to move it and watch the rings follow, and double-click to set a new stone. The buttons pause the monk, change his pattern, add a stone or smooth the gravel flat. Keys: M monk, P pattern, A add a stone, S smooth.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a top-down Japanese zen garden with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
The idea: the gravel is a height field, the raked furrows are a cosine of some distance, and lighting the height field makes it look three-dimensional.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens. Work on a grid at half the screen resolution, render it into an ImageData, and draw it scaled up.
- Place three stones as circles with a wobbly radius (add a few cosines of the angle).
- For each cell compute d, the distance to the nearest stone's edge. Near the stones (d less than four furrow spacings) the furrow height is cos(2 * pi * d / spacing), which makes concentric rings. Everywhere else use cos(2 * pi * y / spacing) for straight lines.
- Inside a stone, the height is a dome.
- Light it: estimate the normal from the height differences with the neighbouring cells, and shade with a low sun from the upper left, so every furrow has a bright side and a shadowed side. Pale granite for the gravel, dark grey for the stones.
Once that works, make it beautiful:
- Combine the stones' distances with a smooth minimum so rings around nearby stones merge into one flowing outline.
- Let me drag the stones around; recompute the distance field and watch the rings follow.
- Add a speckle of individual pebbles, moss on top of the stones, and soft shadows cast by the stones.
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 raking my own furrows by dragging, an animated monk who rakes the garden, or falling maple leaves and dappled shade.
