Ship
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.
Ship
In this update, I focused on improving the visual design of the project and making the website feel more polished. I added custom fonts to give the site a more futuristic look and added several animations, including fade-in effects, image transitions, and hover animations. I also added the footer and a link to my GitHub profile. And I think the project is done!
Update: I mainly focused on improving the styling and overall feel of the project. The interface now looks more polished, with better spacing, shadows, and an effect that makes the content stand out more clearly against the animated star background.I also improved the refresh button so it properly re-triggers the API request and shows the loading state again. On top of that, I added an error handling so the app now displays a message. Overall, the project now feels visually refined. Up next is adding a footer, and animations (probably some fonts too).
I started working on this mission: The main functionality of the site is fetching real-time data from NASA’s API and displaying it. Each day, the site automatically loads the space image along with its title and a detailed explanation written.
The JavaScript handles async API requests using fetch(), processes the response, and updates. It also includes basic error handling for failed requests (need to fix it next) and a loading state so users know when data is loading.
UI:
I designed a custom UI. A refresh button was added so users can manually load the latest APOD data.
Up next
Next step is creating the styling adding animations, and polishing the layout to make it feel more like a dashboard.
Ship
Added the last feature, which is a random number generator “app”. The project is finished, and ready for submission.
I added a terminal window. You can type help for available commands. I will add one more final feature.
I started working on the WebOS 2 Mission. I added a Change Background button, which changes the background color randomly. I also made some improvements to some of the movable windows. I will add 2 more new features
Ship
Devlog 3 & Final:
The project is done! Improved draggable window system with better focus and z-index handling. Added 2 more windows with an extra functionality as stated in the guide. Finished the UI.
Following up on the desktop layout in WebOS, I’ve added real interactivity to my project. Windows are now fully draggable across the screen, and the red close buttons successfully close them. With three apps completely done, the core window management works. Next up, I’ll be making some more apps!
Started the project today.
Got the basic structure down — a desktop div, a window div, and a title bar. Wrote my first bit of CSS to make it sit in the middle of the screen. Then the fun part: making it actually drag.
The first attempt sent the window flying off the screen immediately. Fixed that, and suddenly it was working.
One moveable window. That’s it. I will add more features!
Ship
Project done! A simple flappy bird style video game!
Started working on a retro game
