Tech Mondays #3
Pong + Handtrack.js
So… holidays came and went, but right before enjoying our food-centric Italian traditions we worked on another experiment in the series.
This time our team was very small.
In fact, because of vacations, we were just 3 people.
We wanted to explore body-based UIs.
Some of us have prior experience doing pose estimation with Kinect, but we wanted to see how far we could get on our most loved (and hated) platform: the browser.
We used a handy (badum, tss…) hand-detection library on top of tensorflow: Handtrack.js
This kickstarted our development, gifting us with ready-made hand tracking! Now, that’s something!
We just needed to:
- map hand coordinates to screen-space
- draw the paddles and the ball
- write some game logic
We also wrote some code on top of that library to only pick the best hand in both sides of the scene.
Soon we realized that waving your hand around for a long time is quite tiresome.
So we reduced the actual physical space which controlled the paddle, limiting it around the center of the scene.
This increased sensitivity of the controls and also resulted in higher stability.
After playing around for a while with some magic numbers, we found a balance, which allowed us to play a full game.
The Aftermath
We’re quite happy with the result.
It’s poor-man style, but it works, and it took between 3 and 4 hours to accomplish this.
While this is definitely NOT what we would do in production, we now know it is doable indeed!
If we had to bring this into a real world application we would most probably write our own logic on top of tensorflow + body-pix.
This was the last one for 2019.
Let’s see what we’ll come up with in 2020!
Tech Mondays is a series of events spontaneously organized at Caffeina’s HQ in Parma by the Technology Department and (for the time being) aimed towards its employees only. Never Sleep.
