PROJECT 01 / COMPUTER VISION

HAND GESTURE
DETECTION

An interactive computer vision experiment that turns hand movements into digital controls.

Using real-time hand tracking, this project explores how gestures can become a new way to interact with technology.

JAVASCRIPT MEDIAPIPE COMPUTER VISION

THE INTERACTIVE EXHIBIT

Move. Make. Create.

LIVE HAND TRACKING CAMERA OFF
Your hands are the controller. Start the camera to begin the experiment.
MIRRORED PREVIEW · UP TO 2 HANDS TRACKED

Camera access stays in your browser during this demo.

A LITTLE BIT OF MAGIC

Draw with your hands

Your index finger becomes the brush. No mouse required.

01 POINT your index finger to draw.
02 OPEN your hand to stop drawing.
03 MAKE A FIST to clear the canvas.

Your drawing appears right over the live camera feed in electric blue.

NOT JUST A PRETTY INTERFACE

Behind the build

A little about the thinking and learning behind this experiment.

01

THE IDEA

I wanted to explore how computer vision could make everyday interactions more intuitive by turning simple hand movements into digital commands.

02

HOW IT WORKS

MediaPipe identifies key points on the hand, while JavaScript interprets finger positions to recognize gestures and control interactive features.

03

WHAT I LEARNED

Getting the webcam and hand tracking to work together was one of my biggest challenges. This project helped me better understand real-time computer vision, debugging, and designing interactive user experiences.