High-Level Project Summary
Do you know where is the Space Station? Because we know it, We are currently developing a web application that tracks the Space Station in real time while having the function to reverb in time and see where is it going to be in the future, it manages to solve the challenge because it has a 3D View and a function of 2D View if you would want to see it in a map, with this and the previous functions it solves the challenge and makes it a very simple but versartile app, the importance of this app relies on helping the afficionates of space to have a way to know where the Station is in real time, and also we can encourage new generations to have curiosity about the topics of Science and space
Link to Final Project
Link to Project "Demo"
Detailed Project Description
WhereIsAlpha is a Web Application that applies all kind of resources that our team have at hand to make our best to create a live time representation of the International Space Station in real time and have a very close track of it in any moment while adding a lot more of features to improve the experience of each potential user that uses for example:
Time Travel
The main objective of our app is to have track of the space app, and that's what we did but we wanted to take that to the next level, so instead of just knowing where is it in real-time, we though of what about to implement the future of knowing of where it was and where is going to be so the app has the option of being able to travel through time in a lapse of 24hrs, for the moment it only support one day difference, but we have plans of traveling all aroud time since the launch of the space station
3D & 2D View
Our project support a 3D & 2D, that's because we wanted to give to different points of view to the user's and also in the case that the 3D is too dizzy to someone they would always have the 2D option, now talking in a more technical way about the 3D port, it is quite simple, because the earth is just a ball with a texture of the that we added and with the programation of the orbit it was so easy to add the ISS model that we got from the NASA Solar system exploration page, it also has the feature of always having the center point of view in the ISS, so if you don't find it you would just need to zoom in and you will find it, and for the 2D View it's a worldwide map where you can zoom as you want in any point of the world and it has a draw line that shows the exact orbit of where the ISS is going to pass, while having a precise real-time location of your position to make more easy to see if you are close to it
Historic Modules
Have you wondered how the space station was 2 years ago? well now you have the posibility to do see it by yourself, that's because we are currently developing a function in our app where depending in the point of time that you travel the ISS is going to look exactly the same as it was at that time in the real life, also some pop information is going to show if you hover your mouse over the different modules, also they are going to be classified in different colors to identify which nation sned them, United States modules are going to be Blue, Russian modules are Red, Japanese modules Pink and the Different European countries are going to be Green
Sightings
We are sure that you would like to see the space station sometime in the night with your own eyes, but maybe you don't know in which time, so that's not a issue anymore, our project has an implemented function that tell you at which moment and for how many time the ISS is going to be visible, but for the moment we only have avaible one location that is Chihuahua, Chihuahua, that is because we are using a Embed provided by the NASA, but the version that is going to tell you when is posible to see it is currently being tested
Function
The main function of our project is its web interface, which is fully built using the JavaScript programming language and HTML with Svelte, a library that allows modularity and making our application dynamic by only having a single page with multiple tabs. THREE.js is the library in charge of handling the 3d rendering on the browser, which is mostly used on the 3d visualization of the ISS above the 3d Earth. Orbital data is gotten from the NASA Open API, which gives us TLE (two line element) data about the orbit of the ISS. TLE consists of a set of numbers that include the first and second derivative of mean motion. radiaton pressure coefficient, etc. These numbers are enough to calculate the ISS orbit at any given time, looking up past trajectories, where it currently, or even predicting future orbits with really good accuracy. For example, here's the TLE of the ISS (more specifically, its NAUKA module) as of October 2, 2022:
ISS (NAUKA)
1 49044U 21066A 22274.46188292 .00014869 00000+0 26380-3 0 9992
2 49044 51.6447 170.0519 0002623 316.7478 215.0466 15.50450812361669
Another two libraries, satellite.js and TLE.js, are in charge of reading the TLE data gotten from the NASA API and converting it to latitude and longitude when we input a given time in milliseconds, while also predicting past and future trajectories for us.
At the bottom of the page, there's a slider input control that can be dragged with the mouse back and forth to see the past and future 24 hours of the ISS, starting from the current time. This simply works by taking the current time and subtracting or adding to it accordingly, and then using the aforementioned TLE.js library to get the position and orbit of the ISS at the specified time.
Leaflet is another library that makes it easier to show maps in webpages, allowing us to draw images or lines on top of it using latitude and longitude directly, which we use to display the ISS position along with its trajectory curves. For the 3d visualization we then convert the latitude and longitude gotten from TLE to another format called ECF (earth-centered, earth-fixed coordinate system), which is based off a Cartesian plane, with its center being at the center of the Earth, giving us 3d x, y and z components from a given latitude and longitude. This allows us to accurately show the position of the ISS on our 3d visualization, converting units correspondingly. Lastly, we use a NASA Spot the Station embed to be able to show at which day, angle and time the ISS will be visible for the user. NASA is in charge of making the necessary calculations to determine when a sighting will happen in a given city.
The full source code for our webpage is available here on GitHub.
Benefits
- It's simple but versatile
- It's an inclusive app, because it can be used by a little kid and be as interesting to an expert of the topic
- You can see the ISS at any point of time and not only in real time
- When traveling through time you can see the diferent modifications and modules of the ISS and find information about it
- it support movile and desktop devices thanks to it's a web app
- The app don't need too many resources so almost every device can run it
Hopes about the Project
We hope that our project will reach the right people and by right people means anyone that is interested in Sciences, Technology or Space, because our app combines all of those 3 topics, and what we will want to achieve is just to have the support to make this web application more recognized or some kind of publicity to make people know about it and show them ways to experience the astronomy in a proper way
Resources used in this project
The resources that were used to make this web application are:
- Visual Studio Code
- Svelte
- svelte-tabs
- vite
- Node.js
- Three.js
- TLE.js
- satellite.js
- Google Chrome DevTools
- Netlify
- GitHub
- Canva
- Blender
Space Agency Data
All the data and models that we got were from the NASA open APIs, NASA goverment page and the NASA solar system exploration page, here are all the resources listed and classified from where we got them:
NASA Open APIs
From the NASA APIs, we got the TLE (two line element) information about the ISS, which is enough to calculate the trajectory of its orbit at any given time, past and future. The information is fetched from this page recommended by the NASA.
NASA Goverment page
From the NASA official page we got all the models of the diferent ISS versions and different modules that it got through the time
NASA solar system exploration
And finally from the NASA solar system exploration page we got the official ISS 3d model to use it in our application as a glb format
Hackathon Journey
We only have 4 words to describe our experience: Tears, Joy, Excitement and Food; talking more seriously it was such a roller coaster experience, because in this competition we met so much people and we learn a lot about them, how they work and they can offer to us, for example the mentors that we had helped us a lot with some questions that we had and thanks to them we could make our orbit calculator more precise and add some new features to the app.
Obviously going back in time we just didn't pick the challenge randomly, for this our partner Sebastian was really interested in picking a programing related challenge, so we choose this because it combined things that everyone in the team like, for example, the Space, the Mathematics and the astronauts so that was the main reason that we come up with this challenge
Also we though in the best way to do our challenge, so we took a direct approach, we started by collecting the data that we will need to put the ISS in the right orbit of our app and after that we started the modeling of our earth to finally mix all them up to be improve in the day of the Space Apps Challenge
How it was expected we have some setbacks and problems in the competition day, for example our app was lagging a lot and sometimes the web was experience weird bugs, but we focused in thinking in the simplest way possible to solve like when the ISS was out of orbit, but in the end the center of the ISS was in one edge of it, so it seemed like it was wrong but it was a visual problem
And finally we have to give the thanks to a person that inspired us to look for more and showed us how to improve a lot, his name is Abelardo Márquez part of the "Liga Astronomica de Chihuahua", without him our app and ideas would be a lot more simpler and not creative, pasing an hour with him made us to take another point of view that in our opinion changed everything, Thanks Abelardo!
References
- NASA Science. (April 22, 2019). International Space Station 3D Model. SOLAR SYSTEM EXPLORATION. https://solarsystem.nasa.gov/resources/2378/international-space-station-3d-model/
- NASA APIs. (n.d.). NASA APIs. NASA. https://api.nasa.gov/
- Ivan Stanojevic. (n.d.). TLE API. CelesTrak. https://tle.ivanstanojevic.me/#/
- Mark Garcia. (January 8, 2019). Space Station. NASA TV. https://www.nasa.gov/mission_pages/station/structure/elements/integrated-truss-structure
- NASA. (September 2015). International Space Station. NASA. https://www.nasa.gov/sites/default/files/atoms/files/np-2015-05-022-jsc-iss-guide-2015-update-111015-508c.pdf
- NASA Elements. (2022). ISS Expanded. NASA. https://www.nasa.gov/sites/default/files/thumbnails/image/iss_expanded_view_large_text_2022b.png
- NASA. (September 15, 2022). Space Station Assembly. NASA TV. https://www.nasa.gov/mission_pages/station/structure/elements/space-station-assembly
- NASA. (November 4, 2021). International Space Station Facts and Figures. NASA TV. https://www.nasa.gov/feature/facts-and-figures
- Leaflet (https://leafletjs.com/)
Tags
#ISS, #orbit, #software, #blender, #3D, #maps, #rendering, #2D, #timetravel, #modules

