In Spain, when we were little we used to play Finger Chess, a very fun game where you have to win so you can do a siesta! We decided to re-create this game virtually so we can play even when we are far apart.
What it does
This is a real-time peer-to-peer game that will read the data from your webcam and simulate your hands in the web browser. It will allow you to connect with a friend and see their hands in real-time too. The movements of your hand will translate to virtual hands as if they were part of your real body!
Check instructions on how to play here.
How we built it
We've used Handsfree.js to track the movement of your hands in real-time. This allows us to control a pair of virtual hands, modelated and animated using Blender. The hands are displayed using Three.js and rendered in real time.
On the other hand, we used Node.JS to build a server that handles WebSocket connections in real-time in order to receive and send the users' transactions.
All this is hosted in the Google Cloud Platform, and automated with CircleCI.
Challenges we ran into
- Making deployments in GCP, it was our first time.
- Also, using Three.js was challenging as it is a very complex library and we had a few time to learn.
- The most challenging part was understanding how to translate movements from the webcam using the Handsfree.js library into the Three.js scene.
Accomplishments that we're proud of
We are very proud of the result! 😄
We've managed to build and deploy the whole system and it works pretty well and smooth 🎉
What we learned
What's next for Finger Chess
To support more than two players simultaneously, as well as implement some UI.