Rolling waves at sunset, built from layered Gerstner waves.
The sea surface is a sum of Gerstner waves, which move water in circles so crests sharpen and troughs widen like real water. Every pixel casts a ray to the sea and reads the wave slopes from three tiling maps, a long swell, mid waves and ripples. Any wave too small to see at that distance fades out and becomes roughness instead, which is what draws the sun's glitter path. The water blends the reflected sky and clouds with deep water by Fresnel, glows green through thin backlit crests, and fades into haze at the horizon.
Try it. Move the pointer to move the sun along the horizon and up or down. Drag up and down to change the wind.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated ocean at sunset 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 and resizes with it. Render into a small offscreen ImageData (about 320 x 200) and scale it up with drawImage, so per-pixel work stays fast.
- Place a camera a few meters above the water, looking at the horizon. For each pixel, build a ray. If it points up, color it with a sky gradient: deep blue overhead, warm orange near the horizon, and a bright glow around a low sun.
- If the ray points down, intersect it with the plane y = 0. At that point, evaluate a sum of 4 to 6 Gerstner waves (each with a direction, wavelength, amplitude and speed from the deep water dispersion relation, omega = sqrt(g k)) and compute the surface normal from their slopes.
- Shade the water with the Fresnel effect: reflect the ray about the normal, look up the sky in that direction, and blend it with a dark deep-water color by Schlick's approximation.
Once that works, make it beautiful:
- Add sun glitter: a sharp specular lobe around the reflected sun direction.
- Fade out waves that are smaller than a pixel at that distance, and widen the specular lobe instead. That is what turns sparkles nearby into a smooth glitter path far away.
- Add haze toward the horizon, a little green light through thin crests when looking toward the sun, and a filmic tone curve.
- Let the pointer move the sun along the horizon.
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 clouds that are also reflected in the water, foam where crests pinch together, or a boat that bobs on the actual wave height.
