Gravity Simulation
An interactive, web-based gravity simulator that visualizes gravitational physics in real-time. Create celestial bodies and watch them orbit, collide, and interact according to Newtonian gravity.
Tech Stack
What is Gravity Simulation?
Gravity Simulation is an interactive web-based physics simulator that demonstrates gravitational attraction between celestial bodies. Built with vanilla JavaScript and HTML5 Canvas, it provides a hands-on way to explore Newtonian gravity.
Create stars, planets, and asteroids, then watch them orbit, slingshot, and collide in real-time based on the universal law of gravitation.
Key Features
- Interactive Creation: Click to spawn celestial bodies with custom properties
- Real-time Physics: Accurate gravitational calculations between all bodies
- Random Properties: Generate bodies with randomized mass, velocity, and color
- Collision Detection: Bodies can merge or collide based on proximity
- Orbital Mechanics: Watch stable orbits, binary systems, and chaotic multi-body interactions
The Physics
The simulation implements Newton’s Law of Universal Gravitation:
F = G × (m₁ × m₂) / r²
Where:
- F = Gravitational force between two bodies
- G = Gravitational constant
- m₁, m₂ = Masses of the two bodies
- r = Distance between their centers
Each frame, the simulator:
- Calculates the gravitational force between every pair of bodies
- Updates velocities based on accumulated forces
- Updates positions based on velocities
- Renders all bodies on the canvas
What You Can Explore
- Two-Body Problem: Create a sun and planet to observe stable orbits
- Three-Body Chaos: Add a third body and watch chaotic behavior emerge
- Gravitational Slingshots: Launch small bodies past larger ones
- Binary Star Systems: Create two similar-mass bodies orbiting each other
- Galaxy Formation: Spawn many small bodies around a central mass
Controls
| Control | Action |
|---|---|
| Click | Create new celestial body |
| Main Controls | Adjust simulation parameters |
| Random Properties | Randomize new body attributes |
Technical Implementation
- Rendering: HTML5 Canvas for smooth 60fps animation
- Physics Loop: Optimized n-body gravitational calculations
- No Dependencies: Pure vanilla JavaScript
- Responsive: Works on desktop browsers
Why This Project?
This simulation was created to:
- Visualize abstract physics concepts
- Explore n-body gravitational dynamics
- Practice Canvas-based animation
- Build an interactive educational tool