Expérience interactive · 2025
Rasengan Chidori
Invoquer le Rasengan et le Chidori avec ses mains, en direct dans le navigateur.
- Rôle
- Conception & développement front-end
- Stack
- JavaScriptMediaPipe HandsCanvasWebcam
- État
- Prototype fonctionnel — démo expérimentale
- Année
- 2025
Du problème au résultat
Le problème
Et si ouvrir la main devant sa webcam suffisait à invoquer un jutsu ? La reconnaissance gestuelle brute est instable : la main tremble, quitte le champ, se détecte à moitié. Le défi était de transformer cette entrée imparfaite en déclencheur fiable.
- Entrée gestuelle instable
- Temps réel
L'approche
Analyser la position des doigts pour déterminer si chaque main est ouverte, puis stabiliser le signal : lissage des positions et hystérésis, pour qu'un effet ne clignote jamais entre activé et désactivé.
- Analyse des 21 repères
- Lissage + hystérésis
La direction
Un filtre sombre sur la caméra pour faire ressortir les effets, un squelette lumineux sur chaque main, une aura radiale autour de la paume et un noyau blanc quand le chakra devient puissant. Le HUD affiche les jauges de chakra de Naruto et Sasuke.
- Auras radiales
- HUD chakra
La fabrication
La webcam filme en temps réel, MediaPipe Hands détecte jusqu'à deux mains, et un canvas HTML dessine squelette, auras et flashs au-dessus du flux vidéo.
Main gauche ouverte : le Rasengan de Naruto. Main droite ouverte : le Chidori de Sasuke. Chaque activation déclenche la vidéo du jutsu, son son synchronisé et le remplissage de la barre de chakra ; tout s'éteint progressivement quand la main se ferme.
- JavaScript
- MediaPipe Hands
- Canvas
- Webcam
- Audio synchronisé
Le résultat
Une expérience immersive qui tourne entièrement dans le navigateur : les gestes sont reconnus de façon stable, les effets répondent instantanément, et l'ensemble (visuel, son, HUD) donne l'impression d'un vrai petit jeu plutôt que d'une démo technique.
- 100% navigateur
- Gestes stabilisés
Le vrai sujet n'était pas le Rasengan, mais la fiabilité du geste : entre la webcam et l'effet, tout l'enjeu était de rendre une entrée humaine instable parfaitement stable à l'écran.
Ce que ce projet m'a appris
Exploiter la vision par ordinateur dans le navigateur
Détecter jusqu'à deux mains et leurs 21 points de repère en temps réel avec MediaPipe Hands.
Stabiliser une entrée gestuelle
Lisser les positions et appliquer de l'hystérésis pour qu'un geste reste fiable malgré le bruit de la webcam.
Synchroniser visuel et son
Déclencher auras, flashs, vidéos de jutsu et sons exactement au moment où la main s'ouvre ou se ferme.
Ce que je peux apporter à une entreprise
Prototyper des interactions inhabituelles
Je peux tester rapidement la faisabilité d'expériences qui sortent du schéma clavier-souris.
Travailler le temps réel côté front
Je sais construire une boucle de rendu qui reste fluide malgré la détection, le dessin canvas et l'audio.
Soigner l'expérience jusqu'au détail
Écran de chargement animé, HUD avec jauges de chakra, transitions progressives : le soin ne s'arrête pas à la démo technique.
En résumé
Ce projet démontre ma capacité à construire une expérience interactive temps réel complète, de la détection gestuelle jusqu'à la mise en scène visuelle et sonore.