Dessinez dans les airs du bout de l’index, pincez pour attraper vos traits et les déplacer, refermez le poing pour les effacer un par un. Export PNG en un clic.
Vue d’ensemble
Hand Draw transforme la webcam en surface de dessin : l’index tendu seul trace un trait lumineux qui suit le doigt à l’écran, tandis que les autres gestes de la main servent à manipuler ce qui a déjà été dessiné. Pincer le pouce et l’index sur un trait existant l’attrape et le fait glisser où on veut ; garder la main immobile pendant le pincement déclenche un compte à rebours visuel qui, une fois plein, supprime uniquement ce trait-là — sans toucher au reste du dessin.
Un squelette de main complet est affiché en superposition pour chaque main détectée, chaque nouveau point de trait émet une gerbe de particules scintillantes, et la couleur du trait se choisit dans une palette de six teintes. Le dessin final s’exporte en PNG transparent, sans le fond webcam ni les squelettes. L’interface est tactile-friendly : chaque raccourci clavier a son équivalent en bouton dans la barre d’outils, pour un usage aussi bien au clavier qu’à la tablette.
Fonctionnalités
- Dessin à l’index — pointer l’index seul (les trois autres doigts repliés) trace un trait glowy qui suit le bout du doigt en temps réel.
- Attraper / déplacer — pincer pouce-index au-dessus d’un trait le saisit et le fait glisser en bloc, en suivant la main.
- Suppression ciblée par immobilité — garder le pincement immobile sur un trait remplit un anneau de compte à rebours jusqu’à effacer ce seul trait, sans jamais se déclencher pendant un vrai déplacement.
- Palette de 6 couleurs — sélection au clic sur les pastilles, ou aux touches 1-6 / V pour naviguer la palette au clavier.
- Particules scintillantes — chaque segment de trait dessiné émet une petite gerbe de particules qui s’estompe.
- Export PNG transparent — sauvegarde uniquement les traits, sans le fond caméra ni les squelettes de main.
- Deux mains simultanées — chaque main peut dessiner ou manipuler indépendamment, sans jamais pouvoir attraper le même trait en double.
Sous le capot
La détection de main tourne sur un `HandLandmarker` MediaPipe exécuté directement sur le thread principal, à chaque frame — un choix délibéré : héberger la détection dans un Web Worker de type module casse sous Firefox (le runtime WASM de MediaPipe appelle `importScripts` en interne, ce que la restriction des module workers de Firefox interdit). Le geste brut est classifié à partir de la distance pouce-index mesurée en vraies coordonnées 3D, normalisée par l’échelle de la main, avec une hystérésis entre deux seuils pour éviter que la détection ne clignote à la frontière ; un poing bien serré force une sortie de pincement même si la distance pouce-index resterait sinon ambiguë. Chaque geste brut est ensuite débounced sur plusieurs frames consécutives avant de réellement démarrer ou arrêter un trait ou une prise.
La suppression par immobilité compare à chaque frame la position du pincement à un point d’ancrage fixé dès que la main s’écarte trop de sa position précédente : tant que la main reste dans ce rayon, une progression grimpe de 0 à 1 sur une durée fixe et déclenche la suppression du trait attrapé une fois pleine — un vrai glissement remet l’ancrage à zéro à chaque frame, donc le mécanisme ne peut structurellement pas se déclencher pendant un déplacement volontaire. Les coordonnées normalisées de MediaPipe sont reprojetées à travers le même recadrage `object-fit: cover` que la vidéo avant d’être mises en miroir, pour que le squelette dessiné reste parfaitement aligné avec la main réelle à l’écran quel que soit le ratio de la webcam.
Contrôles
| Touche / geste | Action |
|---|---|
| Index tendu seul | Dessine un trait |
| Pincement pouce-index sur un trait | Attrape et déplace le trait |
| Pincement immobile sur un trait | Supprime ce trait après un court compte à rebours |
| C | Efface tout le dessin |
| E | Exporte en PNG transparent |
| F | Plein écran |
| H | Masque l’interface (webcam, HUD, aide, barre d’outils) |
| V | Change de couleur (cycle) |
| 1-6 | Sélectionne une couleur précise de la palette |
Stack technique
- Vanilla JS (ES modules), zéro framework
- MediaPipe HandLandmarker — détection et suivi de main par webcam
- getUserMedia — accès à la caméra
- Canvas 2D — rendu des traits (glow via shadowBlur, lissage par courbes quadratiques), du squelette de main et des particules
Cas d’usage
Un petit jeu de dessin gestuel à essayer en démo portfolio ou en installation ludique : pas de souris, pas de tablette graphique, juste une webcam et une main pour créer des traits lumineux et repartir avec un PNG.
Le bout du doigt comme pinceau, le poing comme gomme.
