À propos
DrawMotion est un prototype personnel qui transforme les gestes de la main en traits sur un canvas. Inspiré par une démonstration d’Amy Plant, le projet partait d’une question simple : puis-je construire une expérience de dessin utilisable sans clavier, souris ni écran tactile ?
J’ai conçu seul l’expérience, l’interface et l’architecture, puis pris en charge le code, les tests, la documentation et le déploiement. Il ne s’agissait pas d’un produit commercial, mais d’un défi technique centré sur l’interaction gestuelle.
L’expérience en bref
- L’index déplace le pointeur.
- Le pincement dessine ; le relâchement lève le crayon.
- Le poing active la gomme.
- Le signe « V » maintenu ouvre et pilote le menu gestuel.
Les contrôles classiques restent disponibles pour les réglages et l’export, mais le dessin lui-même peut être réalisé entièrement avec la main.
Sous le capot
L’interface réunit React, TypeScript, Tailwind CSS et des composants shadcn/ui adaptés au produit. Le suivi et le dessin restent isolés de cette couche d’interface.
MediaPipe Hand Landmarker analyse la caméra dans un Web Worker. Le modèle et son moteur WebAssembly sont livrés avec l’application : ni la vidéo ni les repères de la main ne sont envoyés ou enregistrés.
- Traduire les repères de la main en intentions gestuelles stables.
- Envoyer ces intentions à un moteur Canvas 2D séparé du rendu React.
- Ajouter l’historique, l’export PNG, le dessin stabilisé et l’assistance aux formes.
Deux couches de canvas séparent le dessin persistant des interactions. Une seule image est traitée à la fois, avec une image de remplacement en attente, afin d’éviter une file de calcul qui grandit sans limite.
Résultat et limite
Le prototype atteint son objectif : dessiner, effacer, choisir une commande, gérer le canvas et exporter le résultat par gestes. Il m’a surtout appris à concevoir une interface à partir du corps et du mouvement, plutôt qu’à partir de périphériques classiques.
Sa limite vient moins du suivi que du geste humain : dessiner dans le vide reste imprécis et inhabituel. Le mode stabilisé et l’assistance aux formes réduisent ce problème, mais une version destinée au grand public devrait encore mieux interpréter l’intention. Le prototype n’ayant pas encore été testé par d’autres personnes, je ne revendique ni retour utilisateur ni métrique d’adoption.
Publication
J’ai présenté le prototype et son interaction gestuelle dans cette publication LinkedIn.