AstroPhysX

Home page
About Section
Physics Info
Game Page

Inspiration

Several educative websites and platforms engage students in a concept while providing information and making the user learn. We were all experienced with web development languages, such as HTML, CSS, and Javascript, and we liked the idea of dedicating our website to physics, thus we decided to become the founders of AstroPhysX.

What it does

AstroPhysX contains a game where a rocket must rotate around and avoid collision with obstacles. If the rocket is hit, a message is displayed that the player has collided and the game will restart. Additionally, our website contains and about section and physics section. The about section explains the role of the 4 crewmates in the game. The physics sections teaches the physics mechanics and concepts used in the game, thus the players are taught physics and given some familiarity with the subject.

How we built it

To create the website, we used HTML, CSS, and the Selecao Bootstrap Template for layout and styling. We also used the Python Flask Module to render the templates of the HTML file and display the results of the code within them. For the game, we used Three JS, which is a Javascript 3D rendering library. We implemented physics equations into the javascript code to program the collisions and gave the rocket a mostly rectilinear motion calculated based in the rocket's rotation and trigonometry, which velocity vector can be modified by the player by rotating it with the A and D keys or by modifying the speed with the W and S keys. The asteroids, planets, and rocket model were designed by us through creating shapes in Javascript.

Shivam Suri

I worked mainly on the website, using the Selecao Bootstrap Template, rendering the data in index.html and game.html in a Python file using Flask, and styling the pages of the website. I also worked with Aarya on designing the logo for our project/organization and creating the about section of the website. I helped a little bit on the game by rendering the geometric models created by Gary.

Aarya Srikanth

I worked mainly on the website with Shivam, using the Selecao Bootstrap Theme to style our site and keep it professional. I also created the physics section of the website after scaling the planet and asteroid models in the game to make it easier for the user to dodge them. I assisted Gary a little bit by rendering the models and modifying their size and location. Finally, I decided on the name of our project with Shivam and also contributed in creating the website's logo.

Gary Hilares

I worked mainly on the Javascript game. I created the spherical models for the planets and asteroids and the rocket model for the player to use. I also helped Nicolas Casey in implementing the physics equations that we used in Three JS to rotate the rocket with rectilinear motion and adding collision from the enemy objects.

Nicolas Casey

I worked on the Javascript game with Gary. We created the retro geometric models that would be displayed on the players' screens and I implemented the physics equations needed for the rocket's rotational motion and the asteroids and planets' motions. Due to my knowledge of physics and mathematics, we could complete the theoretical portion of the project without any confusion, and our only recurring challenge in the process was the time constraint, which we were able to work through in the end.

Challenges we ran into

One major challenge that we ran into was rendering the 3D Models that we found onto the game screen. None of us knew what to do even after research, and since there was a time factor that needed to be kept in mind, we decided to create our own spherical models for the planets and asteroids, and a custom rocket model. This would give it a "retro" look.

Accomplishments that we're proud of

We are proud of both doing the Website and the game. This is because none of us had prior experience with Bootstrap Templates nor with Three JS. We ran into a lot of problems, but we could overcome them. We are also proud of the effective communication and collaboration we had decided, allowing us to decide on a project idea fairly quickly and make a lot of progress with AstroPhysX.

What we learned

We learned about rendering bootstrap templates for websites and styling these templates, along with using three.js, rendering shape objects, and implementing physics equations for rocket rotation(rectilinear motion) and more. We also learned about how to code collisions in javascript game development and improved our time utilization, which is an essential skill.

What's next for AstroPhysX

As is now, AstroPhysX is just a prototype of something that we think that can be much bigger. In the future, we want to enhance our game by improving the models that we rendered and adding the planet's rotation, ideas that we had during the original development but could not be done because of the limited time we had. We also want to give it more features such as additional planets, terrains, rocket's movement and a role for each member of the crew into the game to make it even more dynamic experience.

Built With

Submitted to

ULHacks

Created by

I had a great time helping out with the physics simulation and developing the prototype game.

Nicolas Casey
I worked a lot on the website such as the styling aspect of it, and filling out information such as on the Physics section. Shivam Suri and I worked together to come up with the name and logo of our website. I also rendered the spherical models made by Gary Hilares and Nicolas Casey and modified them such as changing the radius and location to make each model and the distance between them different. This was my first hackathon and the majority of this project revolved behind JS and I definitely learned a lot.

Aarya Srikanth
I helped a bit on the website and worked a lot in the game. It was hard because this was my first hackathon and also my first time working with Three JS. I definitely learned a lot.

Gary Hilares
Software development student and open source enthusiast.
I worked on rendering the html files with flask in main.py and coding the frontend/styling of the website by implementing the Selecao Bootstrap Template. I also helped on the game by rendering the planet objects that were created by Gary Hilares and Nicolas Casey, designing the logo with Aarya Srikanth, and writing the about section of the website. This was my first devpost hackathon and I had a lot of fun plus I learned a lot of information about programming, especially in javascript!

Shivam Suri