Dispositif interactif
Description
Dans le cadre de la SAÉ 4.DWeb-DI.02 (Concevoir un dispositif interactif), j'ai réalisé en trio un projet d'envergure visant à scénariser et développer une expérience immersive globale basée sur un univers spatial et un parcours émotionnel partagé. La contrainte technique et artistique majeure résidait dans le déploiement d'un environnement graphique géant matérialisé par un canvas de 5760 × 1200 pixels. Ce format massif était spécifiquement taillé pour une diffusion physique sur un dispositif de trois écrans géants juxtaposés à l'IUT, exigeant une continuité narrative parfaite. Pour rompre la redondance, chaque étudiant avait la responsabilité d'une zone dédiée incluant trois interactions riches (commandes numériques traditionnelles et transposition IRL sans contact basée sur l'IA). Notre équipe a conçu l'identité visuelle autour de la « Planète Gambling » et de son Casino Galactique, où l'utilisateur doit triompher d'épreuves de hasard pour progresser.
Démarche
Au sein du groupe, j'ai travaillé en totale autonomie sur la conception, le développement et l'intégration complète de ma zone, tout en collaborant étroitement avec mes pairs pour fusionner nos modules et optimiser l'architecture globale. Face au défi technique du format 5760 × 1200 pixels et pour garantir une fluidité absolue à 60 images par seconde, j'ai choisi d'épurer l'application en simplifiant la physique lourde pour me focaliser sur le plaisir du glissement, l'inertie et le calcul précis de la vélocité au relâchement de la souris. Pour la transposition IRL sans contact, j'ai exploité la puissance de la vision par ordinateur. J'ai développé un algorithme mesurant en temps réel la distance géométrique entre le pouce et l'index de l'utilisateur. Dès que ce pincement passe sous un seuil défini, le jeu s'active et applique une vitesse initiale réaliste à la roue du casino. Sur le plan de l'interface, le flux vidéo de la caméra est maintenu en arrière-plan et le programme y superpose instantanément le squelette géométrique coloré de la main pour guider l'utilisateur. Cette implémentation a nécessité une phase rigoureuse de modélisation algorithmique (rédaction de pseudo-code en français et fiches de spécifications) pour traduire des concepts physiques complexes en étapes logiques claires avant le passage au code.
Vidéo
Matériel / Logiciels
Langages et technologies de programmation créative : -p5.js : Bibliothèque JavaScript principale utilisée pour générer et animer le canvas géant et gérer la logique événementielle du jeu. -ml5.js (Modèle HandPose) : Bibliothèque d'intelligence artificielle utilisée pour le tracking de la main en temps réel et la détection des interactions sans contact. -JavaScript (ES6+) : Langage de programmation utilisé pour structurer l'algorithmique de vélocité, de friction mécanique et la fusion des modules. Dispositif et affichage : -Dispositif multi-écrans physique : Système de trois écrans juxtaposés gérant la diffusion du canvas ultra-large sans rupture visuelle. -Webcam : Périphérique d'entrée utilisé pour capturer le flux vidéo nécessaire à la reconnaissance gestuelle par l'IA.