Code: https://drive.google.com/drive/folders/1iYzpoaUQ30HNqOw04meyBtWoBm53cihh?usp=sharing
I really liked the Posenet examples we went through in class so I wanted to experiment a bit with those. I especially liked the week03-5-PosenetExamples-1 example where you could draw with your nose, and initially wanted to adapt this example so that you could draw with a different body part. I started off searching for the word “nose” within the ml5.min.js code in order to see what the other options are. However, after experimentation with other body parts, the nose was still the most fun to create shapes with.
So, I decided to create a very simple game where the user gets to use this nose movement but in a game format:
Essentially, there are a set of five circles, and the user must “boop” each circle with their nose to change the circle’s color.
Of course, I ran into a couple of challenges while doing this assignment. The main challenge was getting the ellipse to change once the nose reached it. I initially constructed the if statement like this:
However, nothing was happening when I touched my nose to the ellipse. Eventually, I ended up widening the range of the positioning values for the nose to be in in order to get a result:
After broadening the range, it started working properly. I ended up narrowing it by half later, as the above screenshot had too wide of a range. Once this essential part of the game was working, I worked on the user interaction part of the game. This included adding more ellipses and having the ellipses change color once the user touches them in order to indicate they have been touched.
If I were to build upon this project, I would want to add more UI components such as a timer or some kind of score-keeping system as well as prompts to start and finish. It would also be cool if the ellipses were randomly generated as the game goes along.