Evan

💻 Développement Web

Développement de quêtes interactives en Javascript - Symphonia

POLE DEV CSS Design system Frontend HTML JS ml5.js P5.js UI UX

Argumentaire

Dans le cadre de mon quatrième semestre, lors de la conception d'un dispositif interactif, j'ai développé plusieurs scènes génératives en JavaScript en exploitant les bibliothèques p5.js et ml5.js. Notre équipe a imaginé un univers de science fiction baptisé MMilan Galaxy, au sein duquel j'ai pris en charge la programmation des quêtes de la planète Symphonia, un monde entièrement axé sur la musique et la gestuelle. L'objectif de ce travail individuel au sein du projet global était de proposer une expérience immersive où l'utilisateur interagit de manière organique avec ses mains face à une webcam, abandonnant les périphériques traditionnels au profit d'une interface sensorielle et fluide. Le tout dans un cave composé de trois vidéos projecteurs pour une immersion complète !

Pour introduire cet univers, j'ai d'abord codé la Quête 0, une courte scène narrative posant le contexte grâce à une animation de respiration de notre personnage principal générée mathématiquement par des fonctions sinusoïdales. L'interaction complexe a véritablement débuté avec la Quête 3, qui se présente comme un puzzle de câblage symphonique. J'ai configuré la détection des points de repère de la main en temps réel, en calculant la distance entre le pouce et l'index pour simuler un pincement permettant de saisir des câbles virtuels. Une fois les connexions de couleurs établies, l'interface se transforme en guitare interactive où les mouvements verticaux de la main déclenchent des notes via un algorithme de synthèse audio, offrant un retour sonore immédiat et gratifiant.

Mon travail s'est ensuite poursuivi avec la Quête 5, intitulée Le Synthétiseur. J'ai divisé l'espace visuel en huit zones colorées interactives correspondant à des accords précis. En déplaçant ses mains dans ces secteurs, l'utilisateur pilote dynamiquement plusieurs oscillateurs sonores couplés à des effets de réverbération en direct. Pour sublimer ce retour visuel, j'ai programmé des particules, un champ d'étoiles scintillantes et des barres d'égalisation générés de manière procédurale. L'opacité et les teintes de l'écran s'ajustent en douceur grâce à des fonctions d'interpolation, créant une boucle hypnotique qui encourage l'exploration musicale prolongée.

Cette réalisation m'a permis d'affiner ma logique algorithmique et de m'aventurer très concrètement dans le domaine du codage créatif. Ma principale réussite réside dans la fluidité de l'intégration entre la détection de mouvement assistée par intelligence artificielle et la génération audio en temps réel. Néanmoins, je me suis heurté aux limites matérielles inhérentes aux capteurs, à savoir que la qualité de l'éclairage altère parfois la précision du suivi des mains. Si l'occasion se présentait de peaufiner ce dispositif, j'implémenterais un lissage des données beaucoup plus robuste pour les coordonnées spatiales, et j'ajouterais un guide visuel de calibrage afin d'assurer à l'utilisateur un positionnement optimal dès les premières secondes de jeu.

Année de BUT 2
Compétences Exprimer · Développer
Apprentissages critiques
AC24.03 · Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs AC23.06 · Élaborer et produire des animations, des designs sonores, des effets spéciaux ou de la 3D