I was inspired while looking through NASA's API page and found they had an API (JPL Sentry) to track asteroids with a non-zero probability of hitting us in the near future. I thought this was fascinating, especially since recently a comet is visible above the Earth.

What it does

AIV uses the API in two different ways. On the main page, it displays a subset of asteroids in the database with their name, diameter, and threat level on hover. The asteroids have physics programmed in and will move away from the borders of the screen and from other asteroids to keep them all in view. The bigger the asteroid drawn, the bigger the actual diameter. The shape of the asteroids are also randomly generated. The background is automatically generated from NASA's APOD API. After clicking on an asteroid, it will show all the "Virtual Impactors" of that asteroid (the possible trajectories/timeframes it could take). On this screen, each asteroid's distance to the earth is a measure of how many days away its possible impact date is. Hovering over these VIs shows the name, impact date, impact probability, and impact energy (expressed in megatons of TNT and the equivalent number of atomic bombs). Asteroids close to the Earth have a fiery trail behind them. The ISS is also shown above the Earth and uses open-notify API to get the astronauts currently on the ISS.

How I built it

I built it on the Javascript library p5.js, which has a much simpler canvas drawing syntax and runs on a loop to draw. This is the main engine behind all of the graphics. To interpret the API date values, I used moment.js for date formatting and converting. The APIs were simple GET requests and JSON data parsing.

Challenges I ran into

I ran into a couple of challenges, the main one being how to generate the random asteroids. At first I attempted using the QuickHull algorithm, however it created shapes far too rectangular. I used my own algorithm of just generating random successive points around the circle until a point got too close to the initial, and then the shape was closed. Another challenge I ran into was displaying the asteroid radii. If I used a linear scale, some asteroids were way too small and others were much too big. To solve this, I used a log scale to set the radius of each asteroid.

Accomplishments that I'm proud of

I am proud of what I was able to do by myself in the short amount of time I had, and it was my first time making a visualization with an API like this. It was rewarding seeing the animation and the hover effects play out, since I had to build it all from the ground up.

What I learned

I learned that organizing and developing a mental model for your code is very important, as the files in this project cross-referenced a lot and it was easy to get mixed up. I also learned how multiple APIs can come together into one project because I usually only use one at a time.

Built With

Share this project: