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.
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.
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.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install