Webcam Magic

A real-time piece that transforms a webcam feed through hand gestures. Seven visual modes: duotone ripple, shifted erase, thermal paint, halftone sculpt, ASCII smear, mosaic sharpen, static calm. Each one answers hand movement differently. Mode switching happens on a peace sign, and finger speed controls the effect radius, so faster movement creates larger disruptions.

p5.js for the visuals and MediaPipe HandLandmarker for real-time hand tracking, with plain HTML, CSS and JavaScript around them. It needs a webcam and a secure context for camera access.

This was first in what became a series of experiments with media pipe, to explore interactions beyond clicks. As a designer who has worked on human computer interaction for years, exploring more intuitive ways of interacting really brings something special and unique to the process.