Home▸Space & Astronomy▸Aurora Lake Reflection (2D)

🧪 Aurora Lake Reflection (2D)

A flat-canvas companion to the 3D scene: the aurora ribbons are drawn from real superposed travelling waves, and the lake reflection is rendered as a separately-buffered mirror image that gets displaced row by row to simulate water ripples — not a simple vertical flip.

Space & Astronomy2DModerate60 FPS📱 Mobile-adapted💧 Water⚡ Plasma⇄ 3D version
2d-aurora-lake-reflection ↗ Open standalone

This 2D companion keeps the same optical idea as the 3D Aurora Lake Reflection — light from the aurora borealis mirrored on a still lake — but builds it from plain Canvas2D math instead of a WebGL scene graph. Each aurora ribbon is the sum of two travelling sine waves at different wavenumbers and speeds (a real wave-superposition model, the same principle behind beating and interference patterns), and the reflection is not a static vertical flip: the upper scene is rendered once into an off-screen buffer, then copied into the lake row by row with a per-row horizontal offset driven by a third sine term, so the mirror image visibly ripples the way a real water surface would. Five sliders — wave speed, aurora intensity, ripple strength, band count and hue shift — let you push the system from a glassy, near-perfect mirror to a choppy, fast-moving one, while a live readout reports the primary band's wavelength, amplitude and current ripple offset in pixels.

⚙ Under the hood

2D Canvas companion: aurora ribbons as superposed travelling sine waves, and a lake reflection built from a separately rendered, row-distorted mirror buffer rather than a flat flip — with live controls for speed, intensity, ripple strength, band count and hue.

Aurora ReflectionRefraction Opticswave superpositionmirror reflection

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

What did you find?

Add reproduction steps (optional)