Body

This week's assignment was about creating something you can experience with your body. In class we learned how to use the ml5.js library in order to employ several machine learning models in our sketches. I felt like i'm still not done with all my spring experiments from two weeks ago so I tried to create an experience where you can manipulate a spring with your hand gestures.

p5 link. (the webcam won't work when it's embedded for some reason ¯\_(ツ)_/¯)

‍

‍

It took way longer than I expected. I spent a lot of time on trying to get the canvas to be bigger, but for reasons beyond my understanding even if I were able to draw the webcam video to fit the whole screen, the hand poses still rendered differently. All the examples I looked at were the same resolution (640x480 px). I eventually gave up on that in favor of the experience, as it didn't work as well once I tried to change it or scale it.

Other things I worked on were trying to get the behavior to work properly — you'd have to pinch your fingers just enough to be able to grab any point, and it would have to be close enough to a point, not just anywhere on the screen. That part doesn't always work right, and I'm not sure why. It seems like sometimes when you pinch in a blank spot it still remembers the last node you were holding and it brings it back to you even though the distance is much larger than the threshold I've placed.

Another thing was trying to balance the spring's behavior. At first it was moving all "springy", and once you moved a node that node would freeze, but that wasn't that fun. I tried finding the right numbers so that the spring would still move, but not in a way that feels like theres no point in playing with it. Similarly, I tried to figure out what would be a good number of nodes to have — it felt like more than ~15 and it becomes a tangled mess, and less than ~7 just doesn't give you enough to mess with. So I opted for 10, but bear in mind these numbers also have to do with the size and behavior, but even more so with the number of connections to other nodes (more about that below) so I'm not sure this is ideal. One interesting thing to note is that when the spring behavior is stronger and you're trying to make some kind of drawing, you might find yourself holding a node in place the whole time — there might be some hidden potential in that behavior of just holding something in place (literally keeping your arm in the air).

‍

‍

I looked at force directed graphs, and tried to kind of mimic that behavior, so I changed the way the spring forms so that any node could be randomly connected to any number of other nodes. I still need to figure out how to make the movement more "elastic" (for lack of a better word) but without much gravity — that might call for using specific js libraries that give a more robust control, rather than using this spring + particle classes which are more "beginner friendly" I guess.

I'm not sure i'm satisfied with the final outcome but I do find the experience I created to be somewhat fun, and I'd love to continue iterating on that, perhaps in a larger project setting.