Ship
Devlog 5 — Final Styling and README
I finished the project by working on the style.css and making the website look cleaner. I added more styling to the buttons, headings, layout and overall page. I also created a README.md file explaining what the project is, how to use it and what technologies I used. The main game is now finished and everything works! Have fun playing! :)
Devlog 4 — Scoring and Fixes
I added the scoring system and some headers to make the website clearer. I also went through the events and fixed some that had dates in their titles (so it would be very easy to guess them). The score now updates properly after each guess, showing the number of correct answers and the percentage. Now I will work on style.css
Devlog 3 — Making the Game Work
Today I made the game actually playable.
You can now click one of the two events to guess which one happened first. The game checks the dates and tells you if your answer was correct. I also added a Next button, so after making a guess you can move on to the next question instead of having to refresh the page. It appears after you guessed, then disappears when pressed.
Up next: Add the score that updates after each guess, showing how many you got right out of the total and your percentage.
Devlog 2 — Making the options
I started building the actual webpage using HTML. I added two buttons where the random events will appear. I added the list of 200 events and made the game randomly choose two of them. I made sure that it doesn’t choose the exact same event twice. I also added two images (one for each option) which are randomly generated.
I’m keeping the HTML quite basic because there isn’t really a need for anything complicated in this project.
Devlog 1 — JSON
Today I started planning my website project. Funny, because I started working on something else, but I got this idea and throw that project away to start working on this: I decided to make a game where the player gets two random world events and has to guess which one happened first.
I made 200 events in total (json), ranging from 1976 to 2026. Each event has a name and a year, and an image query.
I want to keep the website really simple, so there won’t be a menu or loads of different pages. It will basically just have the two event buttons, two images, the result, and the score. I’m using HTML for the structure, CSS for the design and Javascript for the game.
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
Loading more…