Documentation
Intention
The goal of this project is to create a program using P5.js and Teachable Machine that allows the user to distort the webcam video by simple hand gestures. Specifically, the video will become more/less inverted(color), responsive, and flashing, based on how loose/tight the user’s grip is.
Process
The first step of the project is to register pixels of the image as objects with properties that can be mutated to create different video distortion effects. The same general idea and code can be found from my earlier project: Animated Images Experiment. However, in the case of this project, I had to adjust the previous code to accommodate video inputs and update the color of each Bead(pixel object) every iteration of the draw function.
The intensity of these effects are determined by the following variables.
Next, I declared 6 different modes of distinct visual effect variables to create templates for different video effects. Exactly one mode will be active at a time. The current effect variables will gradually transition towards the values of the visual variable of the specific mode that is active.
Finally, I linked teachable machine to the code as an input that determines the mode. Mode 0 will be active when teachable machine recognizes images that belong to group 0(when it doesn’t see a hand). And as a tighter grip is detected, the corresponding mode will be activated.