Objective: Build my own teachable machine using ml5.js
I wanted to create a program that animates a girl walking across the screen by identifying when you are alternating your hands. There are buttons on the top of the page that prompt the user to train the machine learning model by taking images of themselves in 3 positions: 1) Raising their right hand. 2) Raising their left hand. 3) With no hands in the frame. The resulting effect is that users have to almost “jog” in place in order to have the character move. When the character reaches the edge the screen, the images are flipped and she begins walking in the opposite direction. All images of the girl character are sourced from OpenGameArt.
In the future, I would like to add another class to the model to make the character jump and make this program into a game. I would also like to make it easier to train the model by coding the buttons to continuously collect images as long as the button is being pressed down. However, I struggled to add that functionality using the DOM.