You are browsing as a guest. Sign up (or log in) to start making projects!

orbitview

By @gautamagrawal5067

  • 3 Devlogs
  • 11 Total hours

OrbitView: Real-time Tracking of Asteroids & Kinetic Impact Simulation OrbitView is a tool that converts raw data received from NASA’s NeoWs API to an interactive 3D solar system model, created solely with Vanilla JavaScript and Three.js, without any external libraries. OrbitView allows users to visualize potentially hazardous asteroids in real time, filtering asteroids according to size, velocity, or proximity, as well as scrubbing through 7 days of orbits. In addition to real-time asteroid tracking, OrbitView also provides a “What-If” kinetic impact simulation that calculates the TNT Megaton equivalence and craters generated by asteroid impacts.

Source
Ship #1 Pending review

@gautamagrawal5067 on orbitview

I have built a space explorer website called OrbitView that uses NASA APIs to show real-time information regarding asteroids close to our planet Earth. The project contains a modern space-themed design, a glassmorphism interface, responsive design, interactive data cards, and navigation. I wanted to build an educational yet fun space exploration website that would provide information from NASA APIs.

The hardest part of the work was implementing the NASA APIs and making sure that the data loading was done successfully in any circumstances. Moreover, the design of the user interface took a lot of time, as it needed to be both beautiful and readable, and fit the different screen sizes. Testing the working of JavaScript modules, as well as the loading of the API data was hard but necessary.

The thing that I am most proud of is turning the concept of the project into a working website. All the elements of the website were developed through the process of testing and improving.

OrbitView can be tested by opening the website in the modern web browser that is connected to the Internet, since the project uses NASA’s public APIs.

  • 3 devlogs
  • 11h
Try project → See source code →
Open comments for this post

@gautamagrawal5067 on orbitview

1h 57m 52s logged

This session brought about the completion of OrbitView. The work that I did included integration of the rest of the pieces together, bug fixing, and improving the overall experience. I was successful in getting the frontend working with the NASA APIs and hence live asteroid data. I also completed the responsive design, made improvements in animations, optimized the performance, and did extensive testing to ensure that all the functionality works perfectly well.

The problem: The challenges in this phase of the development were dealing with a couple of bugs such as API request errors, inconsistencies in the UI functionality on various screen sizes, and some JavaScript bugs that affected data rendering. Fixing these bugs involved a lot of testing and several revisions to get everything running.

The plan ahead: Now that OrbitView is complete, the way forward is to deploy it by improving the documentation and refining the README file and then deploying this latest build and submitting it as my project for the Hack Club Stardance challenge.

0
0
19
Open comments for this post

@gautamagrawal5067 on orbitview

4h 35m 52s logged

In this session, I was able to completely write the CSS code for the whole OrbitView website. Most of the time was dedicated to adjusting the dark-space inspired UI to ensure that all its elements conform to the general futuristic dashboard design style. I made sure that the styling of sidebars, navigation, modals, buttons, information blocks, and responsive design were done to the fullest. I also perfected glassmorphism, animations, spaces, and fonts in order to create an appealing user experience. At this point, with the frontend being completely styled, the website is ready for the functional part of development.

The problem: The process of fine-tuning glassmorphism turned out to be quite challenging, as finding the correct balance between transparency, blur effect, and readability involved many trials. In addition, there were some issues with the layout and responsiveness, when some elements overlapped each other or were misaligned at certain screen sizes, and therefore, I had to do several corrections.

The plan ahead: After the completion of the CSS code, the next step is the development of api.js file. In it, I am going to implement the NASA NeoWs API to show up-to-date information about asteroids in OrbitView.

0
0
13
Open comments for this post

@gautamagrawal5067 on orbitview

3h 56m 20s logged

This session saw me spend a lot of time setting up the frontend UI architecture. I created style.css to develop the dark space-themed UI where I used glassmorphism to build my sidebars and modals to make it look like a dashboard interface. Also, I began working on the Javascript architecture by splitting it into multiple files (ui.js, api.js, scene.js).

The problem: Getting the CSS backdrop-filter (blurring effect) working properly and not making everything too blurry was a pain in the neck. In addition to this, I had some difficulties while trying to test my JS modules because of CORS issues until I figured out that I had to use a Python HTTP server to test them.

The plan ahead: Now, the UI is done but it is still an empty shell. Next session, I am going to start working on api.js to get my asteroids from NASA NeoWs API endpoint.

0
0
39

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…