An interactive browser-based simulation that makes the chaotic behaviour of a double pendulum intuitive and explorable, not just a textbook curiosity.
pendulum.williamragnarsson.com
The site includes a How It Works tab that goes deep on the equations of motion, Lagrangian mechanics, and the numerics. This README focuses on the code instead.
Three views, one app:
- Pendulum: simulate up to 50 pendulums with tiny differences in initial angle and watch them diverge. Drag to set starting conditions; live phase portraits and time-series plots update alongside the animation.
- Phase Map: a GPU-rendered 2D slice of the 4D phase space (θ₁ × θ₂), coloured by final angle or flip time (how quickly chaos sets in). Click any point to probe its trajectory.
- Technical: embedded walkthrough of the physics and numerics, rendered with KaTeX.
- TypeScript + Vite
- Canvas 2D: pendulum animation, phase portraits, time-series plots
- WebGPU + WGSL shaders: parallel RK4 integration across the entire phase map grid, rendered via a custom compute → fragment pipeline
- KaTeX: equation rendering in the Technical tab
src/
├── core/ # Types, default config, math utilities
├── physics/ # RK4 integrator (equations.ts) + Simulation state manager
├── rendering/
│ ├── *.ts # Canvas 2D renderers (pendulum, phase portrait, time series)
│ └── phaseMap/ # WebGPU pipeline: compute shaders, renderer, high-res exporter
├── views/ # PendulumView and PhaseMapView (top-level controllers)
└── tutorial/ # First-run guided hints
The physics lives entirely in src/physics/equations.ts: derivatives() evaluates the coupled ODEs and rk4Step() advances the state. The WebGPU path in src/rendering/phaseMap/ runs the same integration in parallel across hundreds of thousands of initial conditions using compute.wgsl.
npm install
npm run devWebGPU is required. Chrome 113+ or Edge 113+ recommended.