Fishing Game with ML5 PoseNet
Brief
I am very interested in the interaction of body tracking, so in this project I want to do a project about human can interact with the screen by moving their body. In this project, I finally decided to use ML5 Posenet as a tool to complete this game of catching fish. In this small game, I set ten creatures in the sea to swim at different speeds. When the player stands in front of the screen, a barrel will appear on the wrist in the left hand, and the fish will disappear after touching the barrel. The right hand is a net that traps creatures in the net when encountering slower sea animals.
Process
Step 1：Add random floating objects in PosNet ML Model
In this step, I mainly define the variables of the floating ball, starting position of the shape, and their speed. First, set the starting position of the shape, and then test to see if the shape exceeds the boundaries of the screen. From the codes, in order to detect or track our body I also need to add a function to draw the skeletons and ellipses over the detected key points.
(Parts of coding)
Step 2：Let the floating balls interact with real-time human pose estimation
In the second step, I also set the variable of the ball and added the color and variable of the left paddle and right paddle in the Pos of the wrist, so that the result of the user's interaction with the screen is more obvious. When the user touches the floating ball with the left and right wrists, the ball will change direction obviously.
(Parts of coding and explanations)
Step 3：Debug
When I let the paddle recognize the wrist, the two square paddles will vibrate strongly, which will make the wrist insensitive to the floating ball, and the ball will not change direction quickly. The floating ball will even get stuck in the paddle and shake. This result is not what I want, so I try to change the speed of the ball and incorporate the movement speed of the wrist so that a faster movement would lead to more impact on the ball's speed.
When I try to place two paddles on the left and right wrists, the paddles are not displayed on the screen. The code shows that two objects can be detected, but the paddle is not displayed. So I reduced the width of the left and right paddles, and the red and blue paddles appeared.
Step 4：Add 10 floating balls
Step 5：Change ten balls for different sea creatures
Step 6：Change the movement speed according to the characteristics of sea animals, for example, the speed of the turtle will be very slow, and the hermit crab will be faster, and add the function of eliminating when the bucket touch the fish.
(Bounce when touching the image captured by the lens or the border)