As programmers (and especially during the pandemic), we often find ourselves sitting down for too long. We were interested in a way for people to get active and to have fun at the same time as a little break in their work (like a "pomodoro game"). Since AR is a growing field and we were interested in seeing what we could make with AR, creating a game where the player has to get active by moving their head around to dodge things sounded fun and challenging, and so Sussy Balls was born! The game is Pokemon/Among Us/COVID-19 themed, since we were thinking of some of the most notable "themes" in the past year and how we could theme the falling projectiles (Pokeballs, Among Us astronauts, COVID-19).

What it does

Most games on the web are played with a keyboard and mouse. This game is played with your face! We use AI to track your face live and you will use that to play. Whether you want to avoid being trapped in a Pokeball prison like you're Pikachu in the tall grass, trying to avoid COVID-19 like the plague, or avoiding the sussy bakas in your crew in space, this game will allow you to do all of that! This is the game to play for everyone who wants to get up from their chairs, laugh a little and get in their daily exercise as students and coders. We hope you enjoy this humorous, unique game.

How we built it

Front-end: JavaScript, React API: Tensorflow.js Back-end: JavaScript, Node.js/Express, CockroachDB

Horace was in charge of the 2D physics engine. He got the projectiles to be tossed around the screen and painted them on the canvas.

Anthony worked on the UI/assets, with the Pokemon/Among Us/COVID-19 background, blurring effects, and the game menu with easy/medium/hard options and a how to play modal.

Tom was in charge of using Tensorflow to track head coordinates and transformed the outputted values into the ones we needed to implement collision.

Lawrence was in charge of the leaderboard system, utilizing Node.js/Express and CockroachDB to persist the leaderboard name/score entries and displaying that on the frontend.

We all worked together to connect the head tracking and projectile physics together on a single canvas to enable proper collision detection.

Challenges we ran into

It was challenging to let the projectiles interact user's head coordinates. At first, we had the projectiles be drawn on one HTML canvas and the head coordinates on another, but we soon realized the difficulty of managing state between two different components, especially when we had to consider the number of times they would be rerendered. Using only one canvas, we were able to get collisions work properly without causing too many rerenders.

Accomplishments that we're proud of

We're particularly proud of the fact that we were able to evenly split up the work among our different skillsets, and then be able to merge everything to create an amazing finished product. Getting collisions to work was a huge accomplishment since that defined most of our game functionality.

What we learned

  • A lot about JavaScript physics and the HTML canvas
  • The React lifecycle
  • Using ML libraries like Tensorflow to create augmented reality apps
  • Basic SQL with CockroachDB

What's next for Sussy Balls

  • More accurate collision detection
  • Improved leaderboard system
  • More interactive features during the game (to spice things up!)

Built With

Share this project: