Zen Garden Ripples (2D)
Top-down raked-sand simulation: height at every point is the sum of a decaying travelling ripple from each stone, shaded live from the local slope — click the sand to add stones.
This 2D companion renders the 3D zen garden's exact height field from directly overhead: each placed stone radiates a sine wave whose amplitude decays exponentially with distance, and every point of sand sums the contribution of all stones currently on the board. Instead of a 3D scene, the surface is shaded from its own slope — a simple lighting model applied to the height field itself — so the raked-sand look comes straight out of the same formula that drives the animation, not a separate texture. Click anywhere on the sand to drop a new stone and watch its ripple set interfere with the ones already there.
Top-down Canvas2D zen garden: h(x,y) = Σ sin(d·frequency − t·speed)·e^(−0.09·d)·amplitude summed over every stone, rendered via a shaded low-resolution height-field buffer scaled up to the canvas.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install
Sand height at each point is the sum, over every placed stone, of a travelling sine wave whose amplitude decays exponentially with distance from that stone: h = sin(distance × frequency − time × speed) × e^(−0.09 × distance) × amplitude.
The simulation takes the local slope of the height field at each point and lights it like a bump map from an adjustable angle, which is what makes the flat number field read as raised and lowered sand.
Yes — click or tap anywhere on the sand to drop a new stone (up to 12); its own ripple set immediately starts interfering with the existing ones.