Home▸Physics & Mechanics▸Lily Pond Ripples (2D)

Lily Pond Ripples (2D)

Top-down Canvas2D pond: raindrops spawn Gaussian-windowed ring waves, up to 8 superposed at once, and lily pads bob on the real height field directly beneath them.

Physics & Mechanics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-lily-pond-ripples ↗ Open standalone

This 2D companion reuses the same Gaussian-windowed ring-wave formula as the 3D shader — each raindrop starts a ring whose radius grows at the ripple-speed setting and whose amplitude decays with age, with up to eight rings superposed per point. Instead of a shaded 3D mesh, the height field is rendered directly as a top-down color field, and the lily pads bob using the real local height beneath them rather than an unrelated idle animation.

⚙ Under the hood

Canvas2D pond built on the same Gaussian-ring wave superposition as the 3D version: raindrops spawn decaying rings, up to 8 concurrent, rendered as a live top-down height field with pads coupled to the real water surface.

ripple propagationwave superpositionwave interferencesurface waves

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)