Raindrops on a koi pond, with ripples that bend the scene below.
Two height buffers hold the water surface now and one step ago. Each step, a point's new height is the average of its neighbors minus its old height, a cheap discrete wave equation, with slight damping. The slope of the surface offsets which pixel of the background shows through, which fakes refraction over a procedurally drawn pond bed.
Try it. Move or drag across the water to make ripples. Tap to call the koi over.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive water ripple effect over a pond 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.
Start simple:
- Make a canvas that fills the window. Run the simulation at half resolution (one cell per 2 CSS pixels) and scale the result up with drawImage.
- Paint a pond bed procedurally into an offscreen canvas at the grid size: a dark teal gradient with a few hundred pebbles drawn as ellipses with radial gradients, then read it once with getImageData.
- Keep two Float32Array height buffers, current and previous. Each step, for every interior cell: next = (left + right + up + down) / 2 - previous, then multiply by 0.985 for damping. Write next into the previous buffer and swap.
- To render, compute the slope at each cell (left minus right, up minus down), offset the pixel you read from the pond image by the slope times about 8 (fake refraction), and add the slope to the brightness for glints.
- Make the mouse disturb the water when it moves, and drop a raindrop at a random spot every few hundred milliseconds.
Once that works, make it beautiful:
- Add caustics: brighten pixels where the surface curvature (the discrete Laplacian of height) focuses light.
- Draw a few koi fish swimming over the bed each frame before you sample it, so they wobble under the ripples. Bend each body along a trail of the head's recent positions.
- Float some lily pads on top that are not refracted, and add a soft vignette.
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 reflecting ripples off the lily pads, using a photo as the pond bed, or letting the fish react to splashes.
