Projects / Gravity Simulation

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.

archived software May 2020 — August 2020
Gravity Simulation

Tech Stack

JavaScript HTML5 Canvas CSS GitHub Pages

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:

  1. Calculates the gravitational force between every pair of bodies
  2. Updates velocities based on accumulated forces
  3. Updates positions based on velocities
  4. 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

ControlAction
ClickCreate new celestial body
Main ControlsAdjust simulation parameters
Random PropertiesRandomize 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

Related Topics

# javascript # physics # simulation # canvas # interactive # web # visualization