Une harpe de particules 3D à jouer sans la toucher : agitez les mains devant la webcam pour pincer des cordes invisibles, ou chantez pour que votre voix devienne mélodie.
Vue d’ensemble
Harpe cosmique est un instrument de particules en 3D : un nuage de milliers de points forme des motifs qui se déforment au gré des mains devant la webcam, du chant capté au micro, ou tout simplement de la souris, du tactile ou du clavier. La première main détectée joue les cordes — la traverser d’un geste déclenche une note et un accord selon l’écartement des doigts — pendant que la seconde main pilote la forme du nuage et son échelle en l’ouvrant ou en la pinçant. Sans webcam, chanter ou fredonner suffit : la voix est captée et convertie en note qui vient nourrir l’instrument exactement comme un geste de la main.
Le nuage de particules peut prendre une douzaine de formes différentes, colorées par une palette activable en direct, et chaque note déclenche une onde de choc 3D qui traverse le champ de particules. L’ensemble est pensé pour tourner aussi bien sur ordinateur que sur mobile, avec un jeu de menus dédié et une gestion de la charge (nombre de particules, résolution, fréquence d’images) adaptée à l’appareil.
Fonctionnalités
- Jeu à deux mains — une main pince les cordes (note + accord selon l’écartement des doigts), l’autre pilote la forme et l’échelle du nuage de particules.
- Détection de voix chantée — fredonner ou chanter est capté, la hauteur détectée est calée sur une gamme et rejouée comme une note.
- 12 motifs de particules — le nuage bascule d’une forme à l’autre au geste, avec une palette de couleurs commutable en direct.
- Accords et harmonies — modes solo, power chord, majeur et septième déclenchés selon l’écartement des doigts pincés.
- Effets audio en direct — reverb, delay, chorus et shimmer activables/désactivables sans coût quand ils sont coupés.
- Arpégiateur automatique et onde de choc 3D synchronisée à chaque note jouée.
- Enregistrement WAV — capture le rendu sonore directement depuis le navigateur.
- Multi-support — souris, tactile, gyroscope et clavier en plus des gestes webcam, avec un mode allégé automatique sur mobile.
Sous le capot
La scène 3D repose sur Three.js : une boucle d’animation unique fait tendre en continu la position réelle de chaque particule vers une cible précalculée pour la forme active, mise à l’échelle par le pincement des doigts et décalée par la main d’animation, tout en appliquant une expansion réactive au micro et le déplacement des ondes de choc. Chaque note passe par un point d’entrée unique qui choisit l’accord selon l’écartement des doigts, déclenche les voix sonores, affiche le nom de la note et lance l’onde de choc — appelé aussi bien par le franchissement d’une corde à la main, que par l’arpégiateur automatique ou la détection de pitch vocal.
Le son de chaque corde est un pincement de type Karplus-Strong combiné à quatre harmoniques additives sinusoïdales et un filtre de brillance, construit une fois au premier geste de l’utilisateur (contrainte des navigateurs sur l’autoplay). Les quatre effets sont pré-câblés dans le graphe audio mais leurs entrées sont connectées et déconnectées dynamiquement à l’activation, pour qu’un effet inactif ne coûte rien. Le suivi de main tourne via MediaPipe, chargé depuis un CDN au démarrage, tandis que le fond de scène — brume Three.js et plan de dégradé plasma en `CanvasTexture` — change avec chaque palette.
Stack technique
- Vanilla JS (ES modules), zéro framework
- Three.js — scène, caméra, rendu du champ de particules
- MediaPipe — détection et suivi des mains par webcam
- Web Audio API — synthèse des cordes, effets, détection de hauteur vocale, enregistrement WAV
- getUserMedia — accès caméra et micro
Cas d’usage
Un instrument sans contact à essayer en démo portfolio, en installation interactive ou simplement pour improviser une mélodie en agitant les mains ou en chantant devant l’écran — aucune formation musicale requise.
Les cordes n’existent pas, mais la musique, si.
