Ta webcam devient un instrument — et une souris.

La vision web

ObjectifAfficher la webcam et dessiner les points de la main en temps réel.

• Crée index.html avec une balise video, un canvas superposé et un bouton « Démarrer » (les navigateurs exigent un clic pour l'audio, et c'est plus propre pour la caméra).
• Demande la caméra avec getUserMedia({ video: { width: 640, height: 480 } }) — 640×480 suffit et reste très rapide.
• Charge MediaPipe Tasks Vision via le CDN, module ES, version fixée, et le modèle hand_landmarker.task.
• Crée le HandLandmarker avec runningMode: "VIDEO", numHands: 2, seuils de confiance à 0.5 environ.
• Dans une boucle requestAnimationFrame, appelle detectForVideo(video, performance.now()) et dessine les 21 points et leurs connexions.
• Affiche les FPS à l'écran. Objectif : 30 FPS ou plus.

Crée un fichier HTML unique qui ouvre la webcam (640x480), utilise MediaPipe Tasks Vision (HandLandmarker, 2 mains, mode VIDEO, chargé depuis jsDelivr avec une version fixée) et dessine les 21 landmarks et leurs connexions sur un canvas superposé, en miroir. Affiche les FPS et indique pour chaque main si elle est gauche ou droite. Un bouton Démarrer lance tout.

Ouvrir la démo live de cette phase →

Critère de réussite — tu vois ton squelette de main suivre tes mouvements avec moins de 100 ms de retard perçu et plus de 25 FPS.

Le théorine

ObjectifUn son continu dont la hauteur dépend de la position de ta main droite et le volume de ta main gauche.

• Crée l'AudioContext au clic sur Démarrer (sinon il reste suspendu).
• Chaîne : OscillatorNode → GainNode → BiquadFilterNode → destination.
• Main droite : position verticale → note MIDI entre 48 et 84, puis f = 440 × 2^((n − 69) / 12).
• Main gauche : hauteur → volume, de 0 à 0.5 maximum, jamais au-delà de 1.
• Toutes les modifications de paramètres via setTargetAtTime(valeur, currentTime, 0.03) : zéro craquement.
• Si une main disparaît, volume vers 0 progressivement, jamais coupé net.

Ajoute à la page un théorine : la main droite contrôle la hauteur (axe vertical, 3 octaves, quantifiée sur une gamme pentatonique mineure choisissable dans un menu) et la main gauche contrôle le volume. Web Audio API avec oscillateur, gain, et filtre passe-bas. Tous les changements de paramètres utilisent setTargetAtTime. Affiche la note jouée à l'écran et une grille verticale montrant les zones de notes sur la vidéo.

Critère de réussite — tu joues une mélodie simple (« Au clair de la lune ») sans fausse note involontaire.

Enrichir l'instrument

ObjectifSix modules indépendants — à ajouter un par un, sans toucher au théorine.

• 3.1 Timbres — formes d'onde (sine, square, sawtooth, triangle), synthèse additive avec oscillateurs désaccordés de 5 à 10 cents, enveloppe ADSR, vibrato lent à 5 Hz dont la profondeur dépend de la vitesse de la main.
• 3.2 Effets — delay + feedback (≤ 0.4 pour ne pas partir en larsen), réverbération par ConvolverNode avec réponse impulsionnelle (bruit blanc, décroissance 2–3 s), distorsion WaveShaper tanh, filtre piloté par l'écart entre les deux mains.
• 3.3 Harpe invisible — 8 à 12 cordes verticales ; une corde se déclenche quand l'index change de côté entre deux frames, le volume vient de la vitesse de franchissement. Synthèse Karplus-Strong, ou triangle à décroissance rapide. Recharge de 80 ms par corde.
• 3.4 Batterie aérienne — 4 à 6 zones (grosse caisse, caisse claire, charleston, tom). Un « coup » = vitesse verticale de l'index qui dépasse un seuil puis s'inverse. Sons synthétisés (grosse caisse : sinus 150 → 40 Hz en 0.2 s), flash dans la zone touchée.
• 3.5 Looper — poing fermé 1 s = enregistrement, main ouverte = fin de boucle. Enregistre les événements (timestamp, note, durée, volume) plutôt que l'audio : légers, modifiables, empilables. Métronome BPM réglable, quantification, bouton muet et supprimer par couche.
• 3.6 Contrôle par l'écart entre les mains — distance entre les deux poignets, normalisée, vers une cible au choix : filtre, réverb, vibrato, BPM. Menu d'assignation par axe (gauche x/y, droite x/y, distance, pincement).

Ajoute un module [harpe / batterie / looper] à l'instrument existant, activable par un sélecteur de mode. Ne modifie pas le code du théorine. [Spécifications du module.]

Critère de réussite — tu peux jouer une petite boucle de trois couches (basse, mélodie, batterie) sans que le son sature.

Les visuels

ObjectifQue l'instrument soit beau, pas seulement fonctionnel. De la plus simple à la plus ambitieuse :

• Traînées lumineuses derrière les bouts de doigts (canvas 2D, couche semi-transparente qui s'estompe).
• Particules émises à chaque note — teinte HSL selon la hauteur, taille selon le volume.
• Spectrogramme ou forme d'onde en direct via AnalyserNode.getByteFrequencyData().
• Shader plein écran (WebGL ou WebGPU) dont les uniforms reçoivent l'énergie des basses, médiums, aigus et la position des mains.
• Fond 3D (Three.js) qui réagit à la musique.

Critère de réussite — tu peux filmer une démonstration de 30 secondes qui donne envie de l'essayer.

La vision en Python

ObjectifReproduire la phase 1 en Python.

• cv2.VideoCapture(0) ; sous Windows, ajoute cv2.CAP_DSHOW pour un démarrage plus rapide. Résolution 640×480.
• mp.solutions.hands avec max_num_hands=2, model_complexity=0 pour la rapidité, détection et suivi à 0.6.
• Convertis les images BGR → RGB avant MediaPipe.
• Dessine les points avec OpenCV, fenêtre de contrôle avec les FPS.
• Capture dans un thread dédié qui garde toujours la dernière image : pas de retard qui s'accumule.
• Quitte proprement sur Échap.

Écris un script Python qui lit la webcam (640x480, DirectShow sur Windows) dans un thread dédié, détecte jusqu'à 2 mains avec MediaPipe Hands (model_complexity 0), dessine les landmarks en miroir dans une fenêtre OpenCV avec les FPS, et quitte avec Échap. Structure le code en classes : CameraThread, HandTracker.

Critère de réussite — plus de 25 FPS stables, sans retard qui s'accumule.

La souris

ObjectifL'index déplace le curseur de manière fluide et précise.

• Taille de l'écran avec pyautogui.size(), conversion de l'index (point 8, miroir) via la zone active (4.6).
• Filtre One Euro sur x et y.
• pyautogui.moveTo(x, y, _pause=False), pyautogui.PAUSE = 0, et FAILSAFE = True conservé : la souris dans un coin lève une exception — ton arrêt d'urgence.
• Sous Windows, ctypes.windll.shcore.SetProcessDpiAwareness(2) avant tout appel, sinon les coordonnées sont décalées à 125 % ou 150 %.
• Suivi actif uniquement quand le geste d'activation est détecté — sinon tu perds le contrôle de ta vraie souris.
• Mode « ralenti » quand index et majeur sont tendus ensemble : déplacement divisé par 3 pour viser les petits boutons.

Ajoute au script un module de contrôle de souris : l'index (point 8) contrôle le curseur à travers une zone active rectangulaire réglable, avec un filtre One Euro (min_cutoff et beta réglables au clavier), DPI awareness sur Windows, failsafe PyAutoGUI, arrêt d'urgence F12 via pynput. Le contrôle s'active par une main ouverte maintenue 1 seconde et se met en pause par un poing maintenu 1 seconde, avec un retour visuel.

Critère de réussite — tu peux cliquer sur un bouton de 30 pixels avec ta vraie souris posée, sans trembler, sans faux départ.

Clic, glisser-déposer, défilement

ObjectifRemplacer entièrement la souris physique pour les actions courantes.

• Clic gauche : pincement pouce-index, mouseDown à l'entrée et mouseUp à la sortie de l'état « pincé », avec hystérèse (0.25 / 0.35).
• Pincement court (< 300 ms) = clic, pincement long = glisser-déposer : même mécanisme, rien de spécial à coder.
• Clic droit : pincement pouce-majeur. Double-clic : deux pincements en moins de 400 ms.
• Dérive du curseur en pinçant — trois solutions : mémoriser la position 100 ms avant, utiliser le milieu de la paume (point 9), ou geler le curseur les 150 premières millisecondes.
• Défilement : index et majeur tendus, les autres repliés → mouvement vertical → pyautogui.scroll, vitesse proportionnelle à la vitesse de la main, avec zone morte.

Ajoute la détection de pincement avec hystérèse (seuils 0.25 et 0.35 normalisés par la taille de la main) : pouce-index = clic gauche avec mouseDown/mouseUp pour permettre le glisser-déposer, pouce-majeur = clic droit. Gèle le curseur 150 ms au début du pincement pour éviter la dérive. Ajoute le défilement avec index et majeur tendus.

Critère de réussite — tu ouvres un dossier, tu sélectionnes un fichier, tu le déplaces et tu fais défiler une page web uniquement avec tes mains.

La capture d'écran par geste

ObjectifCadrer une zone avec les deux mains et la capturer.

• Les deux mains forment un « L » (pouce et index tendus, les autres doigts repliés).
• Les deux index définissent les coins opposés du rectangle, converti en coordonnées d'écran.
• Le rectangle apparaît en direct dans une fenêtre transparente par-dessus l'écran (tkinter sans bordure, -transparentcolor sous Windows) — ou, plus simple pour commencer, dans la fenêtre de contrôle OpenCV.
• Maintiens 1 seconde (compte à rebours visuel), ou pince les deux mains en même temps pour valider.
• Capture avec mss : fichier PNG horodaté dans captures/, copie dans le presse-papiers (win32clipboard + DIB via Pillow), notification discrète, flash blanc de 100 ms.

with mss.mss() as sct:
    zone = {"left": x1, "top": y1,
            "width": x2 - x1, "height": y2 - y1}
    image = sct.grab(zone)
    mss.tools.to_png(image.rgb, image.size,
                     output="captures/capture_2026-10-29_14h30.png")

Ajoute un mode capture : quand les deux mains forment un L (pouce et index tendus), calcule le rectangle défini par les deux index, converti en coordonnées d'écran, l'affiche dans la fenêtre de contrôle, et le capture avec mss après 1 seconde de maintien avec une jauge de progression. Sauvegarde en PNG horodaté dans captures/ et copie dans le presse-papiers.

Critère de réussite — tu captures une zone précise de ton écran en moins de 3 secondes, sans toucher au clavier.

Raccourcis et contrôle média

ObjectifDes gestes qui remplacent des raccourcis clavier.

Ajoute un mode raccourcis : swipe horizontal du poignet sur 250 ms (seuil 35 % de la largeur, recharge 700 ms) pour diapo suivante/précédente, poing maintenu pour le volume, trois doigts tendus pour lecture/pause, avec confirmation par second geste pour l'action destructive. Expose chaque geste et son action dans config.json.

Critère de réussite — tu fais défiler un PowerPoint de 10 diapositives avec uniquement des swipes, sans erreur.

Gestes personnalisés

ObjectifEnregistrer un nouveau geste sans écrire de code.

• Mode apprentissage : tu tiens le geste devant la caméra, l'application prend 30 échantillons.
• Pour chaque échantillon, calcule un vecteur invariant de position et d'échelle : les 21 points recentrés sur le poignet et divisés par la taille de la main (42 valeurs), ou des distances entre paires clés + angles des doigts.
• Stocke la moyenne et la dispersion dans config.json.
• En fonctionnement, compare au vecteur courant (distance euclidienne ou k-NN) : si la distance minimale passe le seuil et reste stable 5 frames consécutives, le geste est reconnu.
• Dans l'interface, associe chaque geste à une action : touche, raccourci, commande, lancement de programme.

Ajoute un mode apprentissage de geste : 30 échantillons, vecteur = 21 points recentrés sur le poignet divisés par la taille de la main, moyenne et écart-type stockés dans config.json, reconnaissance si distance sous le seuil et stable 5 frames. Interface pour associer chaque geste enregistré à une action.

Critère de réussite — tu crées un geste inédit en 30 secondes et il se déclenche de manière fiable plus de 9 fois sur 10.

Modes et machine à états

ObjectifUn seul programme qui bascule entre musique, souris, capture et présentation.

• Une classe Mode avec on_enter(), on_exit(), update(mains), draw(frame).
• Un gestionnaire de modes qui reçoit les landmarks et les transmet au mode actif.
• Gestes globaux (tous modes) : changer de mode — deux mains à plat, paumes vers la caméra, puis un nombre de doigts levés pour choisir —, pause générale, arrêt d'urgence.
• Un config.json avec les seuils, la zone active, les gestes personnalisés et les assignations.
• Transition de mode : une courte animation et un son pour savoir toujours où tu es — les erreurs de mode sont la première cause de frustration.

Pont WebSocket vers l'interface web

ObjectifUtiliser ta page web (audio, visuels, réglages) avec la vision et les actions du programme Python.

• Python lance un serveur websockets sur localhost:8765.
• À chaque frame (ou 30 fois par seconde), Python envoie {"mains": [...], "gestes": [...], "mode": "musique"}.
• La page reçoit les landmarks à la place de MediaPipe web, et fait le son et les visuels.
• Dans l'autre sens : changer de mode, modifier un seuil, enregistrer un geste.
• Réglages modifiables en direct depuis la page : curseurs pour le lissage, la zone active, les seuils.

Critère de réussite — tu joues de l'instrument dans la page web alimentée par la vision Python, et tu bascules vers le mode souris avec un geste.

Extensions optionnelles

ObjectifÀ prendre une fois les 12 premières phases validées — chacune utile seule.

• Visage ✓ : clignement volontaire = clic, pencher la tête = défilement — fait (Face Landmarker, touche V ou --visage, une image sur deux pour garder les FPS).
• Regard : curseur grossier, affiné par les mains.
• Voix (speech_recognition ou Web Speech API) combinée aux gestes — dire « capture » puis cadrer.
• Clavier virtuel gestuel avec prédiction de mots.
• Dessin dans l'air ✓ : l'index seul trace, le tracé s'affiche et s'enregistre — fait (touche 5, F pour sauver en PNG + JSON dans python/captures/).
• Export MIDI ✓ : le looper écrit un fichier .mid — fait (bouton « Exporter en MIDI », format 1, une piste par couche, tempo de la boucle).
• Ambiance : lampes connectées ou LED via HTTP/MQTT.
• Application de bureau ✓ : python\dist\InstrumentGestuel.exe — fait (PyInstaller, un seul fichier de ~118 Mo, modèle et réglages embarqués, testé à 30 FPS).

Reste à faireRegard, voix, clavier virtuel, ambiance — chacune est indépendante et aucune n'est nécessaire pour les 12 premières phases, qui sont toutes terminées.