Be A Star (Frontend)

Addressing the Mixed Reality Solar System Challenge

Created by the All-Stars

• Vivien Ngo / vivngo
• Peggy Li / peggyxli
• Anna Leonenko / meinou
• Cameron Yick / hydrosquall

Solution Description

This is a cross-platform mobile AR app built on ViroReact, which can target Android or Apple (iOS) phones. In this AR game, users play as stars that try to grow large enough to steal other players' planets! The game aims to teach players about two main topics from the high school science standards, namely intuitions about gravity, and facts about the lifecycle of a star as it ages and grows.

In our prototype, we were able to make a very basic proof of concept in a two-body system which calculates distance using positions assigned with a QR code. The accuracy of this wayfinding method varies based on lighting conditions and some luck. In order for users to build correct intuitions about how gravity works, we might need to formulate a more

One thing that was challenging was striking the balance between scientific realism and having interesting game mechanics. If the force of gravity was scaled to real life, the game would not be interesting. If there were more time, we would like to tune the physics engine more carefully.

• Video
• Slides

The backend counterpart to this repo can be found here

Installation Instructions

1. Follow steps 1 through 3 on the ViroReact site
2. Clone this repository to your computer, and switch to that folder

   git clone https://github.com/HackTheSolarSystem/beAStar-front.git
   cd beAStar-front

3. Create a file under ./credentials.js with your API key that looks like this, except with your real credentials filled in. You can get a key from here for free.

export const VIRO_API_KEY = "MY_SECRET";

4. Run the following command to install all the project dependencies.

   npm install

5. Run the following command to start the app

   npm start

6. To view the app, you'll need to use the ViroMedia app, available in both Android and Apple app stores. Documentation about how to navigate that process is here.

7. Currently, the server running our node.js backend is hardcoded as the variable BASE_URL inside js/ARCarDemo.js. Replace that variable with your current server address for the application to operate as expected.