Orbitune

Phase 4: It’s Done!
(Animations, Bug Fixes, & README)

What I Added:

Orbitune is officially complete! I focused on adding extra visuals whenever sounds play, removing the last bugs, cleaning up the UI, and writing the readme documentation.

How I Coded It:

Sound Animations: I thought just having a basic ring was kind of boring, so I added more animations to the canvas. Now, whenever a planet finishes an orbit and plays a note, a wave expands. And I now spawn some extra glowing trails.

No More Prespawned Stars Bug:

There was a bug where stars would automatically spawn in right when the page loaded. Now the sky start totally empty and clean, waiting for your first tap.

Toolbar Layout Fix:

On smaller screens or when the browser window was resized, the text labels under the bottom buttons were clipping out of their borders. I adjusted the absolute positioning and added a few fixes. Now the text wraps and shrinks perfectly.

Documentation:

I wrote a detailed README.md file. It lists out all the features, explains how the gravitational integration works, documents. The project is completely finished, running, and looks amazing!

Phase 3:

Space FX, The Gravity Grid, & Adding Sound (Web Audio API)

What I Added:

The canvas looked super basic with just plain circles, so I spent this phase making it look like an actual sandbox. Plus, I finally hooked up the Web Audio API so the simulation isn’t completely silent and can actually play music based on the orbits!

How I Coded It:

The Synthesizer & Scales:

I set up a pentatonic scale array based around a 220Hz note. I coded it so that whenever a star is placed, its base pitch is determined by how high up it is on the screen (the Y-axis). For the actual sound, I combined a sine wave and a triangle wave and gave them a quick exponential volume drop so they fade out smoothly.

Making It Play:

I didn’t want sounds firing constantly, so I wrote code to track the planet’s angle relative to the star it’s orbiting. Every single frame, it calculates the change in angle and if it moved a full rotation it triggers a tone. I also used the planet’s X-position to adjust the stereos so you can hear the note move left or right in your headphone depending on where the orbit finished.

Visual Polish:

Along with the music shockwaves, I added a background with floating clouds and random stars so the screen has depth. I also coded a particle system from scratch so you get an awesome burst of sparks whenever a planet crashes into a star.

Now I need to polish everything, add animations, and the project is ready for shipping!

The Gravity Grid, Way More Orbits, & Bottom Buttons

What I Added:

I wanted to make the physics actually look cool, so I coded a visible gravity grid that connects the stars. I also upgraded the code to support multiple orbits at the same time and added a bottom control toolbar so you don’t have to reload the page to change settings.

How I Coded It:

The Spacetime Grid:

I wrote a function that loops through rows on the canvas. For every single point, it checks how far away it is from each star and calculates a vector to pull the grid line closer to the mass. It looks sick because the lines warp around the stars.

Upgraded Physics:

I rewrote the integration loop so it can handle a ton of planets and multiple stars all pulling on each other at once. It figures out which star has the strongest gravitational pull on a planet and tracks its angle around it to reset and handle smooth transitions if it gets yanked away by a bigger star.

Bottom Toolbar:

I put together a HTML/CSS toolbar at the bottom. I coded buttons to toggle the grid on/off and turn on light trails (trailsEnabled) so the planets leave glowing streaks behind them as they fly around.

Up Next:

Music FINALLY!

Building Orbitune

What is Orbitune?

Orbitune is a browser based musical instrument that uses a 2D orbital physics engine to translate the gravitational interactions into real-time ambient music.

Phase 1: Core Orbital Physics & Canvas Setup

I started working on the project: I created the HTML Canvas environment handling responsive viewport scaling. Built a 2D Euler integration loop to run the orbital physics engine. Core Logic: Implemented Newton’s law of universal gravitation with a distance softening factor to prevent infinite forces during tight encounters. Defined the parent attractors (suns) and orbiting particles (planets), coding a collision system where planets merge into suns to dynamically increase their mass and physical radius over time.