An interactive real-time 3-Body Physics Sandbox built using React + HTML5 Canvas.
This project simulates gravitational interactions between multiple bodies using Newtonian gravity and Velocity Verlet Integration, allowing chaotic orbital systems, stable orbits, binary systems, and emergent gravitational behavior.
Features a modern dark-space UI with:
- Real-time gravity simulation
- Long orbital trails
- Interactive body dragging
- Velocity launch mechanics
- Collision merging
- Physics stats
- Multiple presets
- Adjustable simulation parameters
This simulator is based on the classical Three-Body Problem.
The Three-Body Problem studies how three massive objects interact gravitationally over time.
Unlike simple two-body orbits, three-body systems are usually:
- Chaotic
- Highly sensitive to initial conditions
- Difficult to predict long-term
Even tiny velocity changes can completely alter trajectories.
The simulation uses Newton’s Law of Universal Gravitation:
[ F = G \frac{m_1 m_2}{r^2} ]
Where:
- (F) = gravitational force
- (G) = gravitational constant
- (m_1, m_2) = masses
- (r) = distance between bodies
Every body attracts every other body.
This creates emergent orbital behavior.
The simulator uses Velocity Verlet Integration instead of Euler integration.
Why?
Because Verlet integration is:
- More stable
- Better for orbital mechanics
- Conserves energy more accurately
- Produces smoother trajectories
The update equations are:
[ x_{t+dt} = x_t + v_t dt + \frac{1}{2} a_t dt^2 ]
[ v_{t+dt} = v_t + \frac{1}{2}(a_t + a_{t+dt})dt ]
This is commonly used in:
- Astrophysics
- Molecular dynamics
- Orbital simulations
- Physics engines
A softening factor is used in gravity calculations:
[ r^2 + \epsilon ]
This prevents:
- Infinite forces
- Numerical explosions
- Instability when bodies get extremely close
Without softening, simulations become unstable very quickly.
When two bodies collide:
- They merge into a single body
- Mass is combined
- Radius increases
- Momentum is approximately conserved
Momentum conservation:
[ p = mv ]
Merged velocity is computed using weighted momentum averages.
- Newtonian Gravity
- Pairwise gravitational interactions
- Velocity Verlet Integration
- Collision detection + merging
- Softening factor stabilization
- Emergent chaotic motion
- HTML5 Canvas rendering
- Glowing celestial bodies
- Long orbital trails
- Real-time labels
- Smooth animation loop
- FPS optimized rendering
- Pause / Resume simulation
- Step simulation
- Reset system
- Clear trails
- Drag bodies
- Create new bodies
- Drag-release velocity launching
- Adjustable gravity
- Adjustable simulation speed
Each body supports:
- Position
- Velocity
- Mass
- Radius
- Color
A mostly stable orbital configuration.
Chaotic gravitational interactions with unstable trajectories.
Two large bodies orbiting each other with a smaller third body.
- React
- Vite
- HTML5 Canvas API
- JavaScript
No Three.js used.
Entire simulation is 2D.
src/
├── App.jsx
├── main.jsx
├── styles.css
├── physics/
│ ├── physics.js
│ └── presets.js
├── components/
│ ├── SimulationCanvas.jsx
│ ├── ControlsPanel.jsx
│ └── StatsPanel.jsxgit clone <your-repo-url>npm installnpm run dev| Action | Control |
|---|---|
| Pause Simulation | Pause Button |
| Resume Simulation | Resume Button |
| Drag Body | Mouse Drag |
| Create Body | Click Empty Space |
| Give Velocity | Drag + Release |
| Clear Trails | Clear Trails Button |
| Load Presets | Preset Buttons |
The simulation complexity is:
[ O(n^2) ]
because every body interacts with every other body.
For small body counts this is very fast.
Large numbers of bodies may reduce FPS.
Possible upgrades:
- Barnes-Hut optimization
- Zoom and pan camera
- Infinite world coordinates
- GPU acceleration
- Adaptive timestep
- Save / Load systems
- WebGL rendering
- Black hole mode
- Relativistic corrections
- Mobile touch controls
This project demonstrates:
- Numerical integration
- Orbital mechanics
- Chaos theory
- Emergent systems
- N-body simulations
- Physics engine architecture
- Real-time rendering
- Canvas optimization
It is a good beginner/intermediate project for learning:
- Physics simulations
- React architecture
- Game loops
- Canvas rendering
- Performance optimization
The real Three-Body Problem has no general closed-form solution.
Small differences in starting conditions can create completely different outcomes.
This is one of the most famous chaotic systems in physics.
MIT License