Astrograph

• 

  Home

• 

• 

• 

• 

Inspiration

We know a lot about our solar system. We know how planets look, how planets rotate, and the order of the planets-- well, we don't know it that well. Even though we can read about space and learn facts about it, we can never truly see our solar system with our own eyes, until now! We wanted to explore our solar system and look at each of the planets, but instead of using our mouse/touchpad, with our hands. Astrograph does just that.

What it does

When you click "Start Exploring", you are led to an immersive simulation of our solar system. Each planet orbits the Sun with the same time ratios as our solar system. Even the rotation speeds of the planets are the same. The sizes of the planets, however, are not to scale.

With your hands, you can pan around the solar system by closing both hands and then moving them around. With your right hand, you can rotate your view by pinching your thumb and index finger, and then moving them left and right. With your left hand, you can zoom in/out by pinching your thumb and index finger, and then moving them up and down.

How we built it

We built our website and 3d model using React and Typescript. We used Three.js to produce our 3d model, and we used an online source for our planet textures.

We built our hand tracker with MediaPipe and Python.

Challenges we ran into

Initially, we wanted to make it so that you could explore all of space, but we realized that we did not have any reliable API's to give us the entirety of space. We ended up using Three.js to create a model our our solar system. We had to learn Three.js. There were also some issues with combining the website code with the hand tracker.

Accomplishments that we're proud of

We are proud of learning how to use Three.js. We were able to create a very clean solar system without having to use any APIs.

What we learned

We learned how to use Three.js and how to implement the hand tracker into a website.

What's next for Astrograph

Our next steps for Astrograph are to implement more solar systems that we have access to. Maybe we could put in the Milky Way...

Built With

• css
• next
• python
• react
• tailwind
• typescript