I created the classic pong game but with a small twist. Instead of using the tradition keys to move the paddle to the left or right, you can use the webcam and use your hands to move the paddle. I thought this would have been much easier to do but the teachable machine was very sensitive with analyzing images.
I initially had several ideas that I thought of but the other ideas would only work if a large amount of samples were taken and the samples had to be individual images that were saved. This is why I thought of other ways to do this project. I went off of the Shiffman video on the snake game and made the pong game version of it. First thing I did was code the pong game without considering the teachable machine and then implemented the ml5 library.
Here are the samples I used on the teachable machine:
Here is a video of testing those samples until the response is good enough to play the game:
https://teachablemachine.withgoogle.com/models/m6HPpSi_3/
I encountered a lot of problems with the sample images and they were all solved through hours of testing. The best outcome came from the hand gestures used on the final product. I tried just raising my hand, pointing fingers, different fingers lifted, papers with letters, and the best results came from a variation of hand gestures shown in the video.
Here is a test run of playing the game:
It is not perfect but it is playable when it is played under the same conditions as the sample images. The instructions under the canvas read : “To move right, move both your hands to make an arrow pointing upwards above your head. To move left, show all 10 fingers and your palm to the webcam. PLAY PONG!”
The final code is linked here