Human Tetris is a web game based on the Japanese game show called Brain Wall that users can play on a website. The player sees their body on the monitor using a webcam, where the objective is to try and fit their body into a “safe zone” before an eight-second timer ends. If the player is able to fit their whole body inside, they move onto the next level with a differently shaped “safe zone”. If they fail to do this, the game ends and their score is recorded to a database. The player's bodies are tracked via PoseNet, the safe zones are rendered to the screen by p5.js, and to check if the player's body is fully in the safe zone we use p5.collide2D. We used Firebase for storing and retrieving information, authentication, and game score.
We had to find ways to integrate various technologies in order to get our game fully functional. Each one provided a specific part of the game and all together they allowed us to transform Brain Wall into web form!
PoseNet is a javascript library that was built on top of ML5 in order to constantly improve the accuracy of the technology. It tracks 17 key points across people's bodies.
p5.js is a javascript library that allows for the creation of graphic experiences and has various sub libraries. The parts of p5 that were integral to our game were canvas, p5.collide2d.js and p5.sound.js.
p5.createCanvas function creates a canvas element in the document, and sets the dimensions of it in pixels. We used created canvas to draw a video on it and then shapes with directions for the game process to create a unique UI.
p5.Collide2D.js is a collision algorithm that allowed us to check if the user’s body is within the current shape by calculating collision between the window shape and all 17 player’s body keypoints.
p5.Sound.js is a library that allowed us to play music during the game process to help players get a full game experience.
Firestore is a NoSQL document database that this project uses to store signed up users and their scores. Two collections are stored in the database, the high scores leaderboard collection and and a collection of all users and their scores.
Run ‘npm install’ within the website folder Run ‘npm run start dev’ to run the website locally In order to run this repository locally, you will need to setup your own firebase hosted project, with firestore cloud database enabled. Please see instructions at [https://firebase.google.com/docs/web/setup] and ensure API keys are saved in a gitignored secrets file.
#Presentation Please, feel free to checkout the project presentation (HERE)[https://youtu.be/TcYCWliA7PI]
You can play the game at https://humantetris.web.app