Confront yourself against the posehand TensorflowJS model at Rock Paper Scissors game
Rock Paper Scissors Pose Hand is a webapp to play the classic game "Rock Paper Scissors".
It uses the TensorflowJS model posehand developed with Gatsby with CharkraUI and deployed on Azure Static Web Apps.
This project is still experimental and under development. So when using it you may endure issues or bugs.
The main goal here is to provide users some fun when interacting with an ML model which is here the TensorflowJS model posehand.
Feel free to open issues to increase the efficiency and the of this projet 😀.
You wanna know how this project works? Here's how!
The ALGO is and algorithm which is your opponent.
He knows all the hand shapes available (and no the water well shape isn't correct 😇) for a rock paper sciossors game.
His own logic is very simple :
It will take this array as input:
['rock', 'paper', 'scissors']And then shuffle it with a basic shuffle algorithm to finish with a random selection into the shuffled array.
As you can see for now it's very pretty basic, but maybe in futur I will complexify the logic to try to define the pattern of the player to block him 😜
Here the things are a little more complex 😁
First, when the incantation READY?, ROCK!, PAPER!, SCISSORS! the webapp has to take a capture of your hand from the camera stream.
Then, the capture is rendered into a <canvas /> html tag to provide you preview of your hand.
After, to make the prediction of which shape is reprensented by your hand, the canvas his analysed by the posehand from TensorflowJS.
This will give the landmarks' coordinates of each fingers from your hand.
When the model has computed the coordinates I apply a logic to calcutate which fingers are open or not.
Each fingers are reprensented by four three-dimensionals points (x, y, z).
The logic to apply here is a mathematic formula to determnie if the angle in degrees between the first and the last point is more than 130deg or not
If we have and angle is more than 130deg so I suppose that your finger is open.
Based on this the logic determines which shape is represente by your hand 😀.
As this webapp needs a stream from the webcam's user, he must give consent for the webapp use the camera.
And another requirement is that a network connection to internet required because of TensorflowJS specifications.
I'd like to thanks Jen Looper which has gave an amazing talk about PoseDance at #AskTheExpert.
Her talk gave me the desire, the inspiration and the strength to carry out this project 😊.
Made with ❤ by SugarDarius