p5.js creative coding

p5.js creative coding

2024

Gesture

A university project based on hand gestures where I made a hand-reactive interface to communicate them using p5.js with the ml5.js library.

Everyone had to choose a phrase with some actionable keywords for their gesture; in my instance "Stop, Wait… I have an Idea!"

I felt this had quite a lot of movement to it, and had a narrative of abrupt cut -> pause -> encouragement that could be acted out quite fluidly.

I then reverse engineered the sample that ml5 had published, and slowly built it into my concept; a dot matrix which would change colours based on the gesture you were making from the phrase.

The recorded demo was done in a dark environment to hide the background, but it's also quite a fun use of a polka dot filter to abstract away the surroundings.


try it out (desktop recommended)

two hands up = stop

one hand up = wait

index finger up = idea


* NOTE *

Much of the code for this project was aided by ChatGPT-4o, mostly because I knew what I wanted in logical English/pseudocode, but just didn't know how to express it in Javascript. But rest assured, I am aware of how it all functions line-by-line, and found it taught me quite a lot very quickly by diving head first into the deep end.

view the code