02-23

Templates for Mouse, Microphone, and Webcam Input


Demonstration of mouse interaction techniques:

Demonstration of microphone interaction techniques and a clean simple one.

Here is an ADVANCED template code for Hand, Face, and Body Capture with Handsfree.js:
(ALERT, this is an advanced template that could have some pain points for beginners.)

Improved & Simplified Hands, Body & Face Tracker Template. This is a much-simplified demo showing how you can access a variety of points by name (“nosePt”, “chinPt”, etcetera):

Improved FingerFingerNose Demonstration:
This is a much-simplified demo showing how you can access a few points by name, and then connect them with custom graphics.

Here’s an ultra-simple face mask demonstration. It is also microphone/voice sensitive:

This elaborated “Frog” demo shows how you can use math to position shapes in interesting ways. The size of the frog’s eyes are controlled by raising your eyebrows; the width of the face is controlled by smiling; and the eyes look at your index finger if it’s visible.

Simple Hand Bunny example (puppet):

Connie’s quadruped template: using hands for puppeteering (sketch):

Arm (compound rotations):