Among the examples we learned during the class, Posenet seems the most interesting because of its wide range of possibilities. I tried to create a Snapchat-like filter by combining both Posenet examples 1 and 2, drawing with nose and particles generator, respectively. Mosquito just randomly came into my mind so I wanted to visualize it (I’ve never seen a mosquito filter and probably that’s why).
First, I added a couple codes to detect both eyes of a user, and let the draw function can generate a circle on each eye; a line on a nose. One thing I noticed is that, motions of the shapes seem quite unnatural. I improved this part by two steps: I applied lerp function “noseX = lerp(noseX, nX, 0.5)” to make the motion smoother, and set the diameter of circles as the distance between the two eyes so if a user gets closer to the screen, the size of eyes become larger accordingly. I tried to add more interactions on the nose part, but it seemed somewhat distracting after I added some effects. So I just kept the nose part as a constant line.
For the next step I implemented the particle generator part to the project. As it endlessly creates a number of randomly colored particles from both ears of a user, I modified the code a little bit to combine it with the mosquito filter. I changed the spot where particles are generated to the end of the mosquito nose, by setting the location to “noseX + d, noseY + d.” So now the particles are coming out from the tip of the nose. As the original color scheme was entirely random, I set the green and blue values to 0 and thus all the new particles have become red-tinted—which resembles drops of blood.
(if video doesn’t work, please click this link mosquito)
Overall, it was pretty fun to play around with the given examples. It was my first time trying to code with p5.js so I had struggled a bit, but still it was fruitful experience for me. I’m so excited to explore more about the possibilities that deep learning will bring to us. You can find my code here.
References:
https://github.com/aaaven/aiarts2019/tree/master/week03-5-PosenetExamples-1
https://github.com/aaaven/aiarts2019/tree/master/week03-6-PosenetExamples-2
https://youtu.be/EA3-k9mnLHs (Hour of Code with p5.js and PoseNet by CodingTrain)