How does the 2D version model the aurora without WebGL?

Each light ribbon is drawn as a set of stacked stroked curves on a plain Canvas2D context. The vertical displacement of each curve comes from the same two-term sine-wave formula the 3D version's vertex shader uses, and brightness follows the same edge-falloff times fold-density term the 3D fragment shader computes, so the visual behaviour matches even though nothing is rendered in WebGL.

What do the Activity, Speed and Glow controls change?

Activity scales how far each ribbon curls at its peak, Speed scales the rate of the underlying animation clock, and Glow scales the brightness multiplier applied to every ribbon pixel — the same three parameters the 3D shader exposes.

Home▸Space & Astronomy▸Aurora Sky (2D)

🧪 Aurora Sky (2D)

2D canvas companion to the WebGL Aurora Sky: layered sine-wave light ribbons over a star field, with the same activity, speed and glow parameters driving brightness and fold density.

Space & Astronomy2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

This 2D companion draws the same layered light-ribbon mechanic as the 3D Aurora Sky on a plain canvas: each ribbon's vertical displacement is a sine-wave fold term and its brightness follows an edge-falloff curve scaled by the Glow control, so the Activity, Speed and Glow sliders change the picture the same way they change the WebGL shader's uniforms in the 3D version.

⚙ Under the hood

2D canvas aurora with stacked sine-wave ribbons over a star field, driven by activity, speed, glow and ribbon-count controls with a live brightness and fold-density readout.

aurora borealisplasma physicsmagnetic fieldcanvas 2d

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