I have always wanted to try ML5. So, for this assignment, I decided to make an animation and allow people to interact with the animation through webcam. It'll be similar to a social media filter.
I first created an array of particles that look like rain drops. Then, I added a cloud on top of it. I thought it'd be fun to interact with the animation with body movement. So, I watched Dan's tutorials on PoseNet and ml5. I imported the animation into the PoseNet model. I had to make sure the cloud stays on top of my head. It's pretty fun to see the result.
Then, I wanted to let the array of particles randomly move from left to right of the canvas. It'll look like rain drops randomly falling from the sky. The hat will be like umbrella (like the animation below).
After I input the code to the PoseNet model, position of everything altered (Code: https://editor.p5js.org/Jenny-yw/sketches/57hnzijj3). The hat and raindrops are moving together, but the position is not moving with the movement and it's not on the canvas. I'm still tweaking on the code to make the hat stay on the head and particles floating on top of the canvas.
Comments