Pond

A koi pond seen from above. Trail a finger through the water, feed the fish, let it rain, or wait for evening and the fireflies.

Pond is a quiet place to spend a minute. Koi drift over a pebble floor between lily pads. Trail your finger and the water ripples, tap to scatter food and watch them come for it, start a rain shower, or let evening fall until fireflies come out over the water.

How it works

The surface runs a classic wave equation on a coarse grid, cheap enough for the CPU, and a small WebGL shader does the rest. It refracts the pond floor through the waves, brightens the floor where the waves focus light into caustics, and adds the sky's highlight on top. Every ripple bends the koi and the pebbles beneath it, just as real water does.

Each koi is a chain of points pulled along by its head, so its body bends through every turn. The head wanders, keeps off the walls and the other fish, and heads for food when there is some, with a soft gulp when it eats. All sounds are synthesised: drops and food landing, the trickle of your finger in the water, rain, and crickets in the evening. Without WebGL, the floor is drawn flat.

Built with

WebGL 2 fragment shader (refraction, caustics, specular highlight)
A two-buffer wave equation simulation
Canvas 2D for the koi, pads and fireflies
Web Audio API for water, rain and crickets