Planète Manga est un dispositif immersif en U réalisé en équipe de 4 (SAE 4 DWeb-DI 02), proposant 9 épreuves interactives basées sur des univers manga (Naruto, One Piece, Demon Slayer, Yu-Gi-Oh, Dragon Ball Z, Death Note, Hokuto no Ken, Pokémon). L'utilisateur incarne un porteur qui traverse 10 mondes légendaires pour livrer un colis, en accumulant des cristaux à chaque épreuve réussie. Chaque interaction propose une version numérique (clavier/souris) et une version IRL (caméra via ml5.js, micro), pour s'adapter à différents contextes d'usage. J'étais en charge de la scène 1, "La Voie du Ninja", regroupant trois interactions : la Porte de Konoha, le Jutsu de Naruto, et Gomu Gomu no Pistol.
Comprendre
AC11.04 – Analyser des formes médiatiques et leur sémiotique
Pour mes trois interactions, j'ai analysé les codes visuels et émotionnels des univers manga concernés (encres noires épaisses, screentones et regards déterminés pour Naruto) et je les ai traduits en choix concrets cohérents : palette de couleurs partagée (#0a0805, #ff8c1a, #4a90e2, #ffffff, #ffd700), mots-clés d'ambiance (Épique, Orange, Ninja), et animations spécifiques (porte qui explose en spirale de chakra, clones en fondu doré, effet élastique orange pour Gomu Gomu). Cette analyse sémiotique préalable a structuré l'ensemble de mes choix de conception visuelle.
AC11.05 – Identifier les cibles
Le dispositif étant pensé pour une exposition physique, j'ai dû identifier un public familier de la culture manga/jeu vidéo, prêt à s'engager corporellement devant d'autres personnes. Cette identification a directement conditionné la conception de deux versions par interaction : une version numérique (rapide, accessible, pour un test individuel) et une version IRL (caméra, immersive, pour un contexte d'exposition).
AC11.02 – Évaluer un dispositif interactif en s'appuyant sur des guides de bonnes pratiques
J'ai mené une démarche d'évaluation itérative sur la fiabilité de mes interactions : test de plusieurs seuils de confiance ml5 handPose (0.4/0.6/0.8, retenu 0.6 comme meilleur compromis), abandon d'une mécanique de détection progressive (poing?paume) jugée trop instable, et comparaison de deux approches de body tracking (PoseNet/MediaPipe vs ml5 bodyPose) pour Gomu Gomu no Pistol.
Concevoir
AC12.01 – Concevoir un produit en termes d'usage et de fonctionnalité
Pour chacune de mes trois interactions, j'ai produit une fiche de spécification complète définissant précisément l'usage (distinction explicite entre "ce que l'utilisateur croit contrôler" et "ce qu'il contrôle vraiment") et les fonctionnalités (éléments visuels, règles de couleur, animation, gestion du hasard, pseudo-code détaillé étape par étape).
AC22.01 – Co-concevoir un produit ou un service (proposition de valeur, fonctionnalités...)
Le projet repose sur un système commun défini en équipe : structure narrative en 5 blocs, système de cristaux partagé (9 épreuves + livraison finale = 12 cristaux max), HUD et progression communs à toutes les scènes, et contrainte transversale imposée à chaque interaction ("l'émotion doit rester la même" entre version numérique et IRL). Chaque membre a conçu ses scènes en respectant ce cadre commun défini collectivement.
AC22.02 – Produire une recommandation ergonomique à partir de tests sur prototype
Mes sections "Expérimentations" documentent des tests réalisés sur prototype et les recommandations ergonomiques qui en découlent : seuil de confiance handPose fixé à 0.6 après tests comparatifs, abandon de la détection poing?paume au profit d'une mécanique plus stable, choix de ml5 bodyPose plutôt que PoseNet/MediaPipe pour sa simplicité d'intégration.
Développer
AC24.03 – Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs : c'est l'AC le plus évident — tes 3 interactions (handPose, bodyPose, gestes, micro/AudioContext) en sont la définition même.
AC34.03 – Développer des dispositifs interactifs sophistiqués (niveau BUT3, mais si tu es en BUT2 avancée ça peut être discuté avec ton tuto) : la combinaison ml5.js + p5.js + reconnaissance de gestes/voix est techniquement avancée.
Exprimer
AC23.04 – Imaginer, écrire et scénariser en vue d'une communication transmédia : la fiche de scène "La Voie du Ninja" (description générale, ambiance, émotion, déroulé narratif) est un vrai travail de scénarisation.
AC13.02 / AC23.02 – Pistes graphiques / iconographie : tes choix de palette + références visuelles (planches Naruto) par scène.
Entreprendre
AC25.04 – Collaborer au sein des organisations : projet à 4, avec répartition des scènes et contraintes communes (système de cristaux, "même émotion" entre versions) — c'est de la collaboration organisée.
AC15.01 / AC25.01 – Gérer un projet : si vous avez utilisé une méthode (sprints, Trello, répartition des tâches), ça rentre aussi.
Problème 1 — Fiabilité de la détection gestuelle
La détection de gestes via ml5 handPose présentait un compromis difficile entre sensibilité et stabilité : un seuil trop bas générait des faux positifs (la porte s'ouvrait sans geste volontaire), un seuil trop haut rendait l'interaction frustrante (la porte ne s'ouvrait jamais).
Solution : j'ai testé systématiquement plusieurs seuils (0.4, 0.6, 0.8) et retenu 0.6, qui offre le meilleur équilibre entre réactivité et fiabilité.
Problème 2 — Mécanique d'interaction trop complexe et instable
Pour la Porte de Konoha, j'avais initialement prévu de détecter une transition de geste (poing fermé ? paume ouverte) pour symboliser l'action de "pousser" la porte. Cette mécanique s'est révélée trop instable avec ml5 handPose : la transition n'était pas détectée de manière fiable.
Solution : j'ai simplifié la mécanique à la simple détection d'une paume ouverte maintenue en position de poussée pendant 2 secondes, plus robuste tout en conservant le sens de l'interaction (pousser la porte).
Problème 3 — Choix d'un modèle de body tracking adapté
Pour Gomu Gomu no Pistol, je devais détecter un coup de poing du corps entier. J'ai d'abord testé PoseNet (via MediaPipe), mais son intégration dans le projet s'est révélée plus complexe.
Solution : j'ai basculé sur ml5 bodyPose, plus simple à intégrer dans l'écosystème p5.js/ml5.js déjà utilisé pour les autres interactions, garantissant une cohérence technique sur l'ensemble de la scène.
