Friday, June 19, 2020

creative coding (with face tracking and sound generators!)

Man, I love P5.js and creative coding -

The use of clmtracker to do some basic webcam face recognition work was especially inspiring.

UPDATE: I decided to retrace her steps and it was a little tougher than I expected - it's not easy to follow code footsteps in general and in particular proper loading of the clmtrackr library was a oddly challenging - the CDN link she uses seems to be defunct, and a few other attempts to pull from a CDN, from github, or my own webserver didn't work (blocked by CORS errors) but finally I got it by downloading the raw clmtrackr.js file linked to from the github README, then going to the left sidebar (the arrow under the "Play" button) then hitting "Sketch files | Upload file") and putting it there, then editing index.html so it pointed to it:
    <script src="clmtrackr.js"></script>

At first I didn't do the sound oscillator she does, but here's a version that just puts circles on all the tracking dots and here's one where I play with making a virtual mask with a responsive mouth, like a very poor version of Animoji...

(The face tracking really isn't great, sensitive to both lighting conditions and me wearing glasses.)

Finally I put the same kind of sound oscillator she does back in for a full mask and sound fest... hold the mouse to make a noise, the distance of your nose from the center controls the frequency, and how open your mouth is is the volume...

No comments:

Post a Comment