Space Debris Tracker

• 

  A picture of each orbit of debris

I've always been interested in satellites and how debris is becoming a huge problem with defunct satellites. Last year, I learned gravitational mechanics to understand the orbits, so I thought it would be a great project to do. I built this project using vanilla JavaScript, HTML5, CSS3, and three.js for 3D rendering. The simulator randomly generates debris in low Earth orbit, updates their positions using circular orbit equations, and continuously checks for potential collisions. When two objects are predicted to collide within a given look-ahead window, their orbits gradually change color, gray to yellow to red, before the impact occurs. The simulation speed is adjustable, allowing users to visualize fast or slow dynamics in real time.

One major challenge I faced was that a bit before the collision, the orbit changes from gray to yellow to red, and then it collides. If the orbit turned yellow, and then the simulation speed was changed, the speed at which it changed from yellow to red did not scale accordingly. This was an edge case I missed in my original testing, but fixed later on.

Through this project, I learned how to combine physics, 3D graphics, and interactive UI design into a single cohesive tool. It taught me the importance of edge-case testing in simulations and gave me deeper insight into orbital dynamics and collision prediction.

Built With

• 3js
• css3
• html5
• javascript