Gravity
Gravity · Solar System Simulator
A browser-based interactive solar system simulator built with Three.js that teaches how gravity works through a 24-step guided tour.
Gravity is an interactive solar system simulator that runs in a web browser. It is built with TypeScript, Three.js (a 3D graphics library for the web), and Vite (a build tool). The project uses real astronomical data for planet sizes, orbital shapes, and positions, with the only deliberate inaccuracy being the visual scale, which you can adjust so everything is visible at once.
The main feature is a 24-step guided walkthrough that explains how gravity works, starting from two objects attracting each other and building up step by step to the full solar system with all eight planets, Pluto, and major moons. Each step animates a concept: why the Earth does not fall into the Sun, how the Moon stays in orbit, what happens when you add a third dimension, and how every planet's path through space is actually a helix because the Sun itself is also moving. You can jump between steps, deep-link to any step by pasting a URL fragment, and read the narration in either English or Polish. After the tour, a free-explore mode lets you control the camera and toggle settings yourself.
The physics runs in two modes you can switch between. The Keplerian mode uses pre-calculated orbital formulas that are perfectly stable and always accurate. The N-body mode simulates gravity directly by computing the gravitational pull between every pair of objects on every animation frame, using a numerical integration method called leapfrog. This is slower but shows gravity actually working rather than following a prescribed path; the interface shows how much energy the simulation drifts over time, which is a measure of numerical accuracy.
Planet and moon surfaces are drawn using procedurally generated textures, meaning no image files are needed. The visual style is described in the README as SpaceX-style: black background, thin borders, monospace numbers. To run it locally, you install dependencies with npm and start a development server.
Where it fits
- Take the 24-step guided tour to learn how orbital gravity works from the ground up.
- Switch to N-body physics mode to watch gravity simulated directly instead of following fixed paths.
- Explore the solar system freely with camera controls after finishing the guided tour.