This is my most complete Full Stack project so far, and required applying knowledge and experience from many domains. I can outline them as follows:
- Front-end: React for handling client state, and by extension HTML, CSS and Javascript (including asynchronous programming)
- Back-end: Asp.net for storing and serving the client and providing a means for the client to fetch data
- Databases: I used SQLite because it’s simple and fast, especially for a database that will be used in an entirely “read-only” manner. The database was created from a csv file containing the combined Hipparcos, Gliese and Harvard databases. This process was easily achieved with Python.
At heart this program was an exercise in data visualisation. It uses a custom made 3d engine implemented with Javascript, HTML canvas and React to create an accurate map of all the stars visible with the naked eye on Earth. The user can manipulate the viewport and clicking a star will bring up a modal box containing various facts such as distance and spectrum. Data is called from an API implemented with C# ASP.NET, which itself uses a database I made from the publicly available star catalogues. I chose the 14,000 brightest stars which represents a collection of all the visible stars and more.
How do you project the stars to a 2d screen?
The heart of this project isn’t so much the technologies used, but the actual mathematics used to draw the spherical coordinates of the stars to a screen in a reasonably efficient and accurate manner.
After much experimentation I settled on using the Orthographic projection – a classic means of projecting sets of spherical coordinates to a 2d screen using the following equations:
x = R \cos(φ)\sin(λ - λ_0) \newline y =R (\cos(φ_0)\sin(φ) -\sin(φ_0) \cos(φ)\cos(λ - λ_0)
Where φ and λ correspond to the location of the star in spherical coordinates (latitude/longitude respectively) and φ0 and λ0 are the where the viewport is currently centred. This calculation can be repeated for every star in a given field of view to create a complete picture of the nightsky in any given direction. The performance is fine so long as I keep the total number of stars on screen at any time in the low hundreds. The radius R argument is used to scale the results to fit a screen canvas that can be thousands of pixels wide.
How do you keep performance up?
With the use of an API to query and call data from, the front-end client never has to deal with more than 300-400 stars at any given time, should the viewer look at a different part of the sky then the API will send a new collection of data centred on the current longitude, latitude and FOV (field of view) setting.