Glass| Orbital Sky
Orbital Sky
Look Out the Window
Summary
We made a website (http://look-out-the-window.surge.sh/) in order to inform people about satellites. The user can choose a specific location to view the sky from. The user can then see a realistic view of space from their chosen location on Earth. All of the visible satellites will be shown and will follow their orbital paths. The user also has the ability to view from a satellite's camera view.
How We Addressed This Challenge
impact satellites have in our everyday lives are often overlooked. From our research, we have learned that satellites are integral in services we use every day: from communication services like television and telephone networks, to climate and weather which allow us to see and predict large scale phenomenon on earth(such as climate change) to navigation services like GPS, we indirectly use satellites every day.
We hope to inform more people about satellites by creating a web application that simulates looking out one's window and up at the sky. Based on the specific location that the user has chosen as well as the current time, the application will display the appropriate view of space and the accurate relative locations of the visible satellites.
By providing a highly interactive experience with our satellites, we hope that we can increase knowledge and interest in satellites and in space in general.
How We Developed This Project
To develop our project, we used a three pronged approach: brainstorming, design and implementation.
BRAINSTORMING:
When we first got exposed to the problem, we sat in a call discussing the features we wanted to implement in our application. We wanted to create a visual application with three main views: Space View (looking at satellites from the edge of earth), Satellite View (the view from inside a satellite), and Earth View (looking at our location on earth from space). We looked at the resources and decided on heavily using the TLE NASA data set as it best matched the needs of our project. Lastly, in this stage, we decided that a web application would be best suited to match our needs.
DESIGN:
Next we began the design stage. We talked about how we wanted our application to look ideally and we had some team members make a mock-up of the final product we would want. Thus, we made several templates for what we wanted our web application to look like and how it would function. Here are the templates we made for what the application would initially look like:
Some of the features did not make it to the final version as we were constantly adapting and changing to make our user experience as seamless as possible.
IMPLEMENTATION:
In our final implementation, we kept the focus of the previous stages, however had to inevitably make some changes. One change we made was the use of UI buttons rather than sliders to switch between modes as it seemed to be more seamless in the context of a website(rather than having text and sliders moving through the screen, we thought a static button we be cleaner). We also decided to use 3d models of the satellite in Space View to be able to have a more immersive experience. Lastly, we scrapped the refocus camera button and implemented physically dragging the screen to reposition it as the user wants.
We built the website using HTML/CSS and JavaScript, utilizing various libraries/APIs such as p5.js, tle.js, ecef-projector, Bootstrap, and Popper.js, as well as data resources such as TLE NASA data, celestrak.com, an Earth texture from NASA, and the 3D satellite model from NASA.
PROBLEMS OVERCAME:
One initial technical problem that took us a while to figure out was orbit control and being able to rotate around a fixed point for the initial drag-able globe view. We had to re-implement some library functions (such as the p5 orbit and projector methods)to fit the specific needs of our program and get the desired functionality.
Another technical problem was making our application quick and efficient. We constantly struggled with lag and slow run-times when moving through space and rendering models. We used the p5 JavaScript library to implement our visuals, thus constantly computing and drawing model positions was intensive and had to be heavily optimized.
Outside of technical problems, we had to learn to communicate virtually, use git and repositories, split up into sub-teams, and keep track of time in order to succeed to reach our goal.
List of Tools:
(JavaScript, CSS, HTML, Microsoft VisualStudio Code, p5.js, Babel, tle.js, ecef-projector, Node.js, Bootstrap, Popper.js, browserify)
How We Used Space Agency Data in This Project
We utilized the TLE API containing satellite information found on api.nasa.gov for determining satellite locations. We also used data from Nasa to texture the Earth model present in our application.
Project Demo
https://docs.google.com/presentation/d/10IIp52Z0mBrJkMczT69pYwIzH0WVvsCe86xKbcm7Rjs/edit?usp=sharing
Data & Resources
- TLE API dataset from api.nasa.gov
- http://www.celestrak.com/
- Earth texture from NASA
- 3D Satellite Model from NASA