For this week’s assignment, I want to create a simple version of Fruit Ninja with PoseNet, where the player will use their hands to cut the fruit directly.
Try it on p5 web editor:
https://editor.p5js.org/RonanChang/sketches/u5s3HUpyN
Steps and Difficulties that I’ve met:
1. The first step is to create a Fruit class and generate some fruits to cut. In order to make the game similar to the real Fruit Ninja game, the fruits should shoot up from the bottom of the screen and then drop down because of the gravity. However, when I was playing around with acceleration, the objects never slow and drop down to the bottom. Since the acceleration is just a simple one pointing to the y-direction, I didn’t use the applyForce() function. Instead, I hard-coded a number in the constructor of the class. After close examination, I’ve found that I mistakenly multiplied the acceleration with zero every time the location is updated.
2. Second of all, when a fruit is cut, it should disappear from the canvas. In order to achieve this, I created a variable called “isCut” in the Fruit class. Whenever the mouse/hand’s position is within the circle, the fruit will disappear and be removed from the ArrayList.
Maybe in the future, I will try to create a better cutting effect instead of just letting the fruit disappear. For example, maybe I will generate two triangles to represents the cut and then make the circle disappear.
3. After I finished with the Fruit class, I started to create the three circles on the top right corner of the screen to indicate the number of fails in the game. Every time the player fails to cut a fruit, one circle will turn to red. In order to achieve this, I added another variable called “hitBottom” in the Fruit class to check the location of the circle. Besides, since all fruits are generated from the bottom of the canvas originally, we should be careful to check the location when the fruit starts to fall.
One thing that bothered me for a long time is that no matter how many fruits are failed to cut, all three circles will turn to red at the end. After trying to console.log out the number of the fails, I found that the status of the fruits was still being checked even when the user can’t see anything on the screen, which means I should’ve deleted the fruits when they dropped to the bottom as well.
4. The next step is to generate new fruits. New fruits should be generated when the fails are less than 5 and there are no objects in the ArrayList. Therefore, I created another function called generateFruits() for this. And when the fails are equal to 5, the player will see a “game over” message on the screen. However, when the game is over, I still want the rest of the fruits to fall until they disappear. Therefore, I checked whether the fails are larger than or equal to 5 because when the game is over, the rest of the fruits are still falling and the number of fails is also increasing.
5. The next step is to add poseNet in the game. I watched Daniel Shiffman’s video for help.
One difficulty that I met is that the image in the webcam is opposite from reality and I didn’t really find a solution on the Internet.
6. For future development, I will add the sound effect!