Home▸Nature & Climate▸Tidal Reef (2D)

Tidal Reef (2D)

Overhead Canvas 2D companion to the Tidal Reef Three.js scene: the same radial-swell plus directional-current wave field, colored by height, with a pointer-driven tide pulse.

Nature & Climate2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-tidal-reef ↗ Open standalone

This 2D companion renders the Tidal Reef scene from directly overhead on a plain canvas: each point of the pillar grid is colored and sized by the same wave-field formula as the 3D version — a radial swell traveling outward from the reef center combined with a directional current running across the grid — so the same oscillation is visible as a flat, readable height map instead of an orbiting 3D mesh. Moving the pointer over the field injects a local tide pulse that ripples outward from that point, exactly like the 3D scene's tide interaction.

⚙ Under the hood

Canvas 2D wave field: height(x,z,t) = base + sin(radial distance − wave·t + phase) · 0.85 + cos(directional term + current·t) · 0.3, plus a pointer-proximity tide pulse; each grid point's color and radius track its own height.

tidal reefwave fieldecosystemcanvas 2dwater

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

What did you find?

Add reproduction steps (optional)