Inspiration

Inspiration The "Kessler Syndrome" is no longer just a theoretical plot point from Gravity; it is a looming reality. With over 27,000 pieces of orbital debris currently tracked by the Department of Defense, and millions of smaller fragments remaining untracked, the safety of our global communication and GPS infrastructure is at risk.

We were inspired by the need for a unified, accessible, and highly visual dashboard that doesn't just list objects, but categorizes their risk and proposes actionable mitigation strategies from laser ablation to harpoon capture.

What it does DebrisWatch is a high-fidelity orbital monitoring and risk assessment dashboard.

Real-time Orbital Tracker: A canvas-based visualizer that renders debris in LEO/MEO orbits, allowing users to hover and select specific objects like FENGYUN-1C or COSMOS 2251.

Debris Catalog: A searchable, filterable database of tracked objects with detailed metadata including altitude, mass, velocity, and country of origin.

Risk Calculator: A specialized tool where users can input mass, altitude, and diameter to calculate collision probability, kinetic energy (in GJ), and natural atmospheric decay timelines.

Mitigation Planner: A strategy evaluation suite that compares different technologies (Laser, Drag Sails, Harpoons, Foam) based on cost, efficacy, and ETA.

How we built it The application is built using a modern React.js stack with a focus on high-performance rendering:

Canvas API: Used for the primary orbital visualizer. We implemented a custom rendering loop with requestAnimationFrame to handle smooth satellite movement and "starfield" backgrounds without the overhead of heavy 3D libraries.

Deterministic Simulation: We used a seeded pseudo-random generator to ensure that orbital paths remain consistent across sessions while still providing a diverse dataset of 25+ major debris objects.

State Management: Leveraged React useState and useCallback for seamless tab switching and real-time calculation updates.

UI/UX: Styled with a "Sci-Fi HUD" aesthetic using CSS-in-JS, custom animations (scanlines, pulsing alerts), and Google Fonts like Orbitron and Space Mono.

Challenges we ran into Orbital Projection: Translating 3D orbital mechanics (inclination, altitude, and theta) onto a 2D HTML5 Canvas while maintaining a sense of depth and perspective was a significant math challenge.

Performance: Rendering multiple moving parts while simultaneously running a "Sparkline" SVG animation required careful optimization of React's re-render cycles to prevent frame drops.

Data Accuracy: Modeling the "Time to Lower Entry" (TLE) and kinetic energy required researching simplified versions of real-world aerospace formulas to ensure the "Risk Calc" felt grounded in physics.

Accomplishments that we're proud of Visual Fidelity: Creating a "command center" feel with CSS scanlines, CRT-style flickering, and a cohesive color palette.

Interactive Hit-Testing: Implementing a custom math-based "hover" detection on the canvas so users can precisely click on tiny, moving debris dots to pull up their data.

The Calculator Logic: Successfully building a tool that converts kg and km/s into meaningful data, like "Kiloton TNT equivalents," to emphasize the danger of space junk.

What we learned Canvas vs. SVG: We learned when to use Canvas (high-frequency movement) versus SVG (static sparklines and badges) for optimal web performance.

Aerospace Basics: Gained a much deeper understanding of Low Earth Orbit (LEO) vs. Geostationary Orbit (GEO) and the sheer scale of kinetic energy involved in orbital impacts.

UI Hierarchy: How to present dense, technical data (like inclination and collision probability) in a way that remains "scannable" for a user.

What's next for DebrisWatch TLE Data Integration: Transitioning from generated data to a live API feed from Space-Track.org to track real-world objects in real-time.

3D Transition: Moving from a 2D Canvas to Three.js to allow for a fully rotatable 3D globe and more complex orbital perturbations.

Multi-Object Collision Modeling: Adding a feature to simulate "what-if" scenarios showing how one collision could trigger a fragment cloud that affects other nearby satellites.

Built With

Share this project:

Updates