Air Drawing Webcam

How the Air Draw works

Air drawing webcam: how it works

This is the party trick every hand-tracking demo ends up doing, and for good reason: it makes the tracking visible. The hand model finds 21 points on your hand each frame; this page takes one of them, the tip of the index finger, and treats it as a pen. What decides whether the pen is down is the gesture classifier that sits on the same model: when it reports "pointing up" — index extended, others curled — ink flows, and when it reports anything else the pen lifts. That means you never need a keyboard or a mouse to draw, stop, and draw again.

Why pointing, not just the fingertip. An earlier version of this idea drew whenever a hand was visible, and it was unusable, because you cannot move to the start of the next stroke without leaving a trail. Using a gesture as the pen-down switch gives you a way to lift the pen: relax the hand, move, point again. It is the same distinction a stylus makes with hover versus contact, done with a hand shape instead of pressure.

Smoothing and jitter. Landmark positions wobble by a pixel or two from frame to frame, and at 30 frames per second that would draw a shaky line. The tool blends each new fingertip position half-and-half with the previous one, which knocks out most of the wobble at the cost of a small lag you can feel if you move fast. A thicker pen hides what remains; a thin pen at a distance shows it. A brighter room and a plain background both help the tracker and therefore the line.

Mirroring. The preview is mirrored by default, because drawing feels natural only when your hand moves left and the line moves left. Snap flips the frame back when saving, so text you wrote in the mirrored view comes out readable in the PNG — which means that to write a word, you write it as you normally would, watching the mirror.

Clearing with an open palm. Holding a flat hand to the camera for a full second wipes the canvas. The delay is deliberate: an open palm is also the most common thing a hand does while you pause to think, and without the hold you would lose drawings by accident. The Clear drawing button does the same thing immediately.

Privacy. Hand tracking runs in WebAssembly inside the page. The camera frames, the landmark points and the drawing are never sent anywhere; the model files are downloaded once, about 12 MB, and cached by your browser.

Related tools