-
-
A cinematic introduction featuring a procedurally rendered Sun, live physics, and immersive 3D scrolling through orbital mechanics.
-
Explore elliptical planetary orbits with labeled foci, perihelion, aphelion, and the Sun positioned at one focus.
-
Watch equal orbital areas swept in equal time, demonstrating changing planetary speed through interactive animation.
-
Compare planetary orbits to visualize how orbital period increases with distance from the Sun.
-
Control spacecraft velocity to maintain a stable orbit with live telemetry and real-time orbital physics.
-
Increase velocity beyond escape speed to transition from a bound orbit to a hyperbolic escape trajectory.
-
A cinematic conclusion bringing together orbital mechanics, procedural visuals, smooth animations, and replay support.
Inspiration
Space is often taught through static diagrams and dense textbook equations. But when Johannes Kepler and Isaac Newton figured out how planets orbit the Sun, they uncovered the cosmic rhythm of the universe.
We built ORBITS to bring space physics to life — turning orbital mechanics into an immersive, visually stunning 3D web experience where users can feel, hear, and interact with the invisible forces that keep planets and spacecraft in motion.
What it does
ORBITS takes you on an interactive 3D journey through 5 captivating acts of space mechanics:
- 🪐 Act 1 — The Ellipse (Kepler's 1st Law): Watch planetary orbits curve around gravitational focal points with real-time 3D annotations for perihelion, aphelion, and focal axes.
- 📐 Act 2 — Equal Areas in Equal Times (Kepler's 2nd Law): See live orbital sectors sweep across space, proving visually that planets speed up when close to the Sun so that swept areas remain equal: Area A1 = Area A2.
- ⏱️ Act 3 — The Cosmic Rhythm (Kepler's 3rd Law): Experience an interactive dual-planet orbital race demonstrating the harmonic period law: T² ∝ a³.
- 🚀 Act 4 — Telemetry Velocity Gauge: Take control of a spacecraft! Click speed presets (Sub-orbital, Bound Orbit, Escape Velocity, Hyperbolic) to watch the ship's 3D path dynamically morph from falling loops to escaping into deep space.
- ☀️ Act 5 — The Grand Finale: A glowing procedural Sun scene with an infinite replay loop so you can experience the journey again anytime.
How we built it
We designed ORBITS using modern web graphics and WebGL technologies:
- 3D Graphics & Scene Lighting: Built with Three.js and React Three Fiber, featuring procedural sun shaders, volumetric bloom, and 3-layer parallax starfields.
- Header Flight Channel: Designed a custom glowing neon Saturn logo alongside an animated high-definition sci-fi shuttle with a glowing plasma thruster stream.
- Synthesizer Sound Engine: Created a 0MB procedural sound engine using the native Web Audio API to produce deep-space drone atmospheres and interactive UI click sounds.
- Glassmorphism UI: Crafted a dark cosmic theme with smooth cursor glows and responsive controls for all screen sizes.
Challenges we ran into
- Seamless 3D Camera Storytelling: Transitioning smoothly between 5 distinct physics acts while keeping the central Sun and 3D labels perfectly framed required careful camera keyframing.
- Interactive Trajectory Morphing: Making the spacecraft’s path instantly morph between closed orbital loops and open escape trajectories when clicking speed presets without interrupting the smooth 3D animation.
- Clear Label Positioning: Placing mathematical labels and leader lines in 3D space so they never overlap the orbiting planets or central Sun.
Accomplishments that we're proud of
- Visual WOW Factor: Creating a sleek, dark space environment with glowing neon Saturn rings, starfields, and smooth lighting.
- Zero-Asset Audio Engine: Generating rich space audio procedurally without requiring users to download heavy sound files.
- Fun, Hands-On Physics: Making orbital velocity intuitive and fun for anyone to experiment with through the interactive telemetry gauge.
What we learned
- How to combine WebGL 3D graphics with spatial Web Audio to craft an immersive web experience.
- How to design clean, non-cluttered 3D overlays that guide the user's focus naturally.
- The beauty of planetary physics and how interactive design can turn science into art.
What's next for ORBITS
- 🌌 Solar System Planet Selector: Add Earth, Mars, and Jupiter presets with their real physical mass and orbital speeds.
- 🛸 Custom Rocket Launcher: Allow users to drag and launch their own satellite into custom orbits around the Sun.
- 🥽 Virtual Reality Mode: Enable WebXR so users can step into full 3D room-scale space and walk around the planetary orbits.
Log in or sign up for Devpost to join the conversation.