Lorenz Attractor Visualiser
Interactive chaotic-system visualisation based on the Lorenz attractor with real-time coefficient modulation. This simulation visualises the Lorenz attractor, a classic chaotic system where tiny parameter shifts can produce dramatically different trajectories over time.
OVERVIEW
A real-time visualisation of the Lorenz attractor — the canonical chaotic system — drawn as layered trajectory trails on a 2D canvas. Four live controls map directly onto the system's coefficients, so a small nudge to any of them visibly reshapes the butterfly. Butterfly view runs a second, almost-identical seed beside the first, turning sensitive dependence on initial conditions into something you watch rather than something you read about. Any configuration can be copied as a link, and the last one is restored on return.
ARCHITECTURE
The renderer is a Canvas 2D plugin registered against the shared generative-art runtime. A pure step function integrates the Lorenz equations while the plugin owns trail state, 3D-to-2D projection and palette mapping; the runtime owns the canvas, the animation loop, theme sync, a shared canvas budget and an adaptive quality controller. Stroke colours and alphas are quantised into a small number of buckets so a path batcher can draw thousands of segments across only a handful of canvas state changes. Control state lives in its own hook that hydrates from the URL query string, then local storage, then defaults, and mirrors every change back to both. The whole surface mounts lazily behind a deferred-mount boundary with chunk-load retry, and an error boundary degrades it to a static frame rather than a blank canvas.
SYSTEM ARCHITECTURE
┌────────────────────────────────────────────────────────────────────────────┐
│ SLIDERS · PRESETS · URL QUERY · SAVED STATE · REDUCED MOTION │
└────────────────────────────────────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────────────────────┐
│ GENERATIVE-ART RUNTIME (canvas 2D plugin) │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ CONTROL STATE │ │
│ │ Query then storage then defaults · presets · clamped params │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ INTEGRATION + PROJECTION │ │
│ │ ┌──────────────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ Pure Lorenz step │ │ Fixed-size sub-steps · │ │ │
│ │ │ sigma · rho · beta · dt │ │ state clamp · 3D to 2D │ │ │
│ │ └──────────────────────────┘ └─────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ PALETTE + PATH BATCHING │ │
│ │ Depth-mapped colour buckets · alpha quantisation · glow pass │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ ADAPTIVE QUALITY + FADE PASS │ │
│ │ Frame-rate-driven iteration budget · trail fade · canvas budget │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────────────────────┐
│ ANIMATED ATTRACTOR + SHAREABLE LINK + PNG EXPORT │
└────────────────────────────────────────────────────────────────────────────┘FUNCTIONALITY
VISUALISATION
- Eight seeded trajectories traced at once by default, coloured by depth and layered with a separate glow pass
- Butterfly view splits the canvas and runs a near-identical second seed against the first
- A translucent fade pass each frame keeps trail history legible without smearing the canvas
LIVE CONTROLS
- Four sliders mapped onto the system coefficients: Spread, Turbulence, Orbit Tightness and Speed
- Classic, Calm and Chaotic presets that jump straight to characterised parameter sets
- Pause, reset, and an optional pulse that modulates turbulence on its own
STATE & SHARING
- Every control change mirrored into the URL, so an exact configuration can be copied and sent
- Local persistence restores the last configuration on return with no server round trip
- PNG export captures the current frame straight from the canvas
PERFORMANCE & RESILIENCE
- Adaptive quality that trades per-frame iteration count against measured frame rate
- Reduced-motion damping and a shared canvas budget that caps concurrent heavy animations
- Lazy mount with chunk-load retry and an error boundary that falls back to a static frame
HOW IT WORKS
On mount the runtime sizes a canvas to its container and the device pixel ratio, then seeds a set of Lorenz trajectories offset slightly from one another in phase space. Each frame it reads the current coefficients, advances every trajectory through several fixed-size sub-steps so integration accuracy stays constant as speed changes, and clamps the state so numerical divergence never reaches canvas coordinates. The resulting 3D points are projected to 2D with a fixed depth weighting, coloured by depth through a quantised palette, and queued into a batcher that groups segments sharing a stroke style. A translucent fill drawn before each frame fades the previous one into trails. A frame-rate monitor raises or lowers the per-frame iteration budget to hold a smooth cadence, and the loop damps under reduced motion. Every control change is clamped to a safe range, written into both the URL and local storage, and applied on the next frame without restarting the simulation.
STEP-BY-STEP GUIDE
- Open the Lorenz tab and let the trails settle into the attractor's two lobes.
- Drag Spread and Turbulence, and watch the wings widen and the switching rate change.
- Try the Classic, Calm and Chaotic presets to jump between characterised parameter sets.
- Switch on Butterfly view to run a second, almost-identical seed beside the first.
- Watch the two paths track together, then separate — that divergence is sensitive dependence on initial conditions.
- Turn on the pulse to let turbulence modulate on its own, or pause to study a single frame.
- Copy the link to share the exact configuration, or save a PNG of the current frame.
OUTCOMES
- Lets visitors explore deterministic chaos by nudging coefficients and watching paths diverge.
- Shows how stable formulas can create unpredictable-looking motion in a memorable visual form.
- Adds a compact mathematical companion to the broader generative-art collection.
- Turns any configuration into a shareable link so a specific behaviour can be sent to someone else.