---

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!