Buoyant kelp sways in an ocean surge under god rays and live caustics.
Every frond of giant kelp is a buoyant elastic rod: a chain of Verlet nodes anchored by a holdfast, held up by the gas bladders at the base of each blade, with distance and bending constraints and water drag toward the local current. The current is an oscillating surge that is strongest near the surface and travels across the forest, plus noise turbulence, so fronds lean, curl and lay their tops along the surface as canopy while each blade streams with the flow behind it. The caustic web on the sand is computed every frame by refracting a grid of sunlight rays through an analytic wave surface and counting where they land, and the god rays flicker with the same waves. A school of fish follows boids rules and steers around the stipes.
Try it. Drag through the water to push a current through the forest. Tap to drop a pebble: it splashes, sinks and sends a pressure pulse through the kelp when it hits the sand.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an underwater kelp forest 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, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Fill it with a vertical gradient from bright teal at the top to deep blue at the bottom, with a strip of sand along the floor.
- Each kelp frond is a chain of about 25 points using Verlet integration (velocity is the current position minus the previous one). Pin the first point to the sea floor and join neighbors with distance constraints, relaxed a few times per frame.
- Instead of gravity, give every point a small upward buoyancy force, so the chain stands up. Stop points at the water surface so the tops float along it.
- Add a water current: a horizontal velocity that oscillates slowly with a sine of time, stronger near the surface. Each frame, nudge every point's velocity a little toward the water velocity (drag).
- Draw each frond as a smooth curve, with narrow leaf-shaped blades along it that point along the current.
Then make it beautiful:
- Use three depth layers of fronds, smaller and more blue-tinted the further away they are.
- Add slanted, softly fading light shafts from the surface with additive blending, and drifting specks of marine snow that move with the current.
- Add caustics on the sand: compute a wave height function, refract a grid of light rays through its slope, and count where they land on a small offscreen canvas. Draw it stretched over the sand with "lighter" blending.
- Let the mouse drag push the water, adding a short-lived jet to the current.
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 a school of fish with boids steering, pebbles that send pressure pulses through the forest, or a day and night cycle with bioluminescence.
