Tossing The Ball Around

doc4

GitHub

This is a fairly simple engagement with PoseNet. Tossing The Ball Around is a ball rendered in P5 that changes size based on the space between the user’s arms.

I started by messing around with some more ambitious ideas. I looked at trying to get PoseNet to create animated skeletons using .gif files in place of images. However, it seems that PoseNet doesn’t integrate with animated gifs easily.

After this I spent a fair bit of time trying to put together what I was thinking of as an “AR Costume”

docu1

I played with PoseNet and brought the code back to a place where I had access to all of the key points, and to a place where I was comfortable modifying things.

Then I went to the p5 Reference site for some tutorials on how to make particles. I imagined a series of animated streamers emanating from every key point, covering the user like a suit of grass.

docu2

I was able to create a particle system but I was not able to implement it in a way I was happy with, with multiple instances of it emanating from multiple points on the body.

I settled on experimenting with finding origins for drawings that were outside of the key points returned by PoseNet. I took the key points from the wrists, and drew an ellipse at the origin between them. I used the dist() function to measure the difference between the two user’s two wrists and return a circle that changes size based on the user’s movements. The effect is similar to that of holding a ball or a balloon that adjusts itself constantly.

docu3

I played around with coloration and making the image more complex, but I decided to quit while I was ahead.

Throughout the process, I tried to make use of coding techniques I had learned throughout the year. When I had first approached programming I knew nothing beyond the very basics. In coding this project I tried to use concepts like arrays, passing variables into functions, and object-oriented programming. I still have a lot more work to do to get comfortable, but this project┬ádemonstrated to┬áme how far I’ve come.

Resources consulted:

https://ml5js.org/

https://ml5js.org/docs/PoseNet

https://github.com/tensorflow/tfjs-models/tree/master/posenet

https://p5js.org/reference/

Leave a Reply