Animation 2D par capture de mouvement : donnez vie à vos dessins avec Animata et kinect

Une activité pratique en classe (sixième année - première et deuxième secondaire) ou à la maison

Dans ce projet découpé en 8 tutoriels vidéos, vous apprendrez à transformer n'importe quel dessin en une marionette numérique intéractive
Dessinez un personnage, retravaillez le dans un logiciel de manipulation d'image (Gimp) puis animez le dans le logiciel Animata afin de le faire communiquer avec le capteur de mouvement Kinect.
Vous n'avez pas de Kinect et désirez commencer le projet de suite? Pas de panique, rendez-vous jusqu'au tuto 6 pour produire une marionette qui bougera de façon automatique.
Une image vaut mille mots, alors une vidéo en vaut 10000 ! Voici une petite démo du projet:




PRIMAIRE | SECONDAIRE | DIFFICULTÉ FACILE | 2 À 5 HEURES

Introduction et mise en place du projet


J'ai mené plusieurs fois ce projet, avec des classes de sixième année du primaire (11-12 ans) et de première secondaire (12-13 ans) sans trop de difficultés. Comptez un peu moins de 10h de travail pour y parvenir, qui peuvent être réparties en petits ateliers d'une heure.
Chaque tutoriel pourra être le point de départ pour un atelier d'une heure.
Je vous conseille de bien maîtriser les logiciels avant de vous lancer : jouez, expérimentez!
Et si vous le faites à la maison, amusez vous !

En classe, le temps peut être réparti comme suit:

  • Étape 1 : Présentation du projet, des arts technologiques et de la capture de mouvement en arts ou en technologies.
  • Étape 2 : Dessin du personnage en respectant les critères (nous passerons ces critères en revue dans la suite du tutoriel).
  • Étape 3 : Installation des logiciels (Tuto 1).
  • Étape 3 : Manipulation du dessin dans Gimp. Objectif : supprimer le fond et colorer le dessin (Tuto 2).
  • Étape 4 : Présentation du logiciel Animata, ses forces et ses faiblesses. Importation du dessin dans Animata (Tuto 3).
  • Étape 5 : Création des vertices et triangulation du dessin dans Animata (Tuto 4).
  • Étape 6 : Disposition des joints et création du squelette dans Animata (Tuto 5).
  • Étape 7 : Attachement des os aux vertices dans Animata (Tuto 6).
  • Étape 8 : Nommer les joints dans Animata et préparer le dessin pour son animation (Tuto 7).
  • Étape 9 : Configuration de NI-Mate et animation du dessin (Tuto 8).
Si vous ne voulez pas passer au travers de tout le texte, voici un lien direct vers la playlist dans youtube comportant les 8 tutoriels vidéo.

Ce qu'il vous faut


Tous les logiciels utilisés dans ce projet sont gratuits. La seule dépense sera l'achat d'un capteur Kinect. Oui oui, vous avez bien lu, le Kinect qui équipe les consoles XBox de Microsoft.

Les logiciels


Dans cette vidéo vous verrez :
  • Une démonstration du projet.
  • Une revue des logiciels utilisés, où les trouver et comment les installer
Les liens de téléchargements sont plus bas.


Gimp (pour GNU Image Manipulation Program est un logiciel de retouche d'image libre et gratuit.
Nous nous en servirons particulièrement pour supprimer l'arrière plan blanc de votre dessin.

Vous pouvez télécharger la version de Gimp qui correspond à votre système d'exploitation ici.

Animata est un logiciel libre et gratuit d'animation en temps réel, conçu pour créer des projections interactives pour des concerts, des spectacles de théâtre et de danse.
La particularité du logiciel est que l'animation - le mouvement des marionnettes, les changements d'arrière-plan - est généré en temps réel, ce qui permet une interaction continue. Cette capacité permet à des capteurs physiques d'être attachés à l'animation des personnages, créant une marionette réagissant à son environnement. Par exemple, il est assez simple de créer une marionnette virtuelle réagissant à l'entrée audio en direct ou contrôlée par le mouvement des danseurs.
Contrairement aux programmes d'animation 3D traditionnels, créer des personnages dans Animata est assez simple et ne prend que quelques minutes.

Vous pouvez télécharger la version de Animata qui correspond à votre système d'exploitation ici. Je vous conseille de télécharger la version 003.

Développé par la compagnie finlandaise Delicode, NI-Mate est un utilitaire de capture de mouvement en temps réel qui a été conçu pour n'importe qui. Pas d'installation de pilotes ou de configurations complexes de caméras ou de capteurs, installez simplement NI mate, branchez un capteur et ouvrez votre logiciel d'animatation préféré.
La version gratuite de NI-Mate sera parfaite pour nos besoins. La seule limitation est qu'on ne pourra pas enregistrer nos réglages. Mais vous verrez, il y en a peu et ce n'est pas handicapant de les refaire à chaque utilisation.

Vous pouvez télécharger la version de NI-Mate qui correspond à votre système d'exploitation ici.

Installer les programmes


  • Gimp s'installera sans problème, suivez les directions de l'installeur (Windows) ou glissez l'application dans votre dossier applications (macOSX).
  • Animata, sous Windows, sera téléchargé sous forme d'archive .zip. Dezippez l'archive dans un dossier de votre choix. Retenez bien son emplacement !
    Sous macOSX la procédure est habituelle, glissez l'application dans votre dossier applications.
  • NI-Mate sous macOSX ne pose aucun problème d'installation, comme d'habitude il suffit de glisser l'application dans le dossier ad-hoc.
    Encore une fois, les utilisateurs de Windows se verront complexifier la tâche. Si vous utilisez les versions Windows8 et plus, vous devrez suivre la procédure suivante pour que NI-Mate fonctionne sans problèmes :
    1. Appuyez sur "Win + R" ("Win" étant la touche fenêtre) pour ouvrir l'invite d'exécution et entrez "shutdown.exe / r / o"(sans les gillemets et en respectant les espaces).
    2. Appuyez sur "OK" pour redémarrer sur l'écran qui indiquera "Choisir une option".
    3. Sélectionnez "Dépannage" (icône avec des outils).
    4. Sélectionnez "Options avancées" (icône avec les cases à cocher).
    5. Sélectionnez "Windows Startup Settings" (icône avec roue dentée).
    6. Appuyez sur "Redémarrer" pour redémarrer l'ordinateur sur l'écran qui indiquera "Options de démarrage avancées".
    7. Sélectionnez "Désactiver l'exécution de la signature du pilote".
    8. Une fois que l'ordinateur à redémarré, commencez à installer NI mate.
    9. Une fois que l'installation de NI mate est terminée, connectez-vous au Kinect et démarrez NI mate.
    Il n'est pas nécessaire de faire cette manipulation à chaque fois que vous voudrez ouvrir NI-Mate, elle est importante uniquement lors de l'installation. En effet, depuis la version Windows8, Microsoft bloque l'installation de pilotes ne provenant pas de développeurs approuvés par la compagnie de Seattle. Les pilotes utilisés par NI-Mate sont libre et, rassurez-vous, sans dangers pour la sécurité de votre ordinateur (plus de détails dans la suite de l'article).

Le matériel


Originellement développé pour la console Xbox360, le capteur Kinect n'a longtemps pas fonctionné sur les ordinateurs. Paradoxalement, c'est sur Mac et Linux que l'on voit pour la première fois un Kinect pour XBox fonctionner : la compagnie Primesense avait développé sont propre pilote libre : OpenNI (pour Natural Interaction, celui que windows8 et plus ne veut pas installer!). Devant ce succès, Microsoft à répondu en développant une version de Kinect pour Windows, puis dernièrement un Kinect version 2. Si vous travaillez sous Mac, je vous déconseille fortement la version Kinect pour Windows.

Dans tous les cas, la version Kinect pour XBox360 fonctionne sur toutes les plateformes, et on trouve maintenant la version 1 à très bas prix (par exemple ici sur Amazon à 30$US).

Le capteur Kinect étant conçu pour la XBox, la prise n'est pas compatible avec un port USB et il aura besoin d'être alimenté en 12Volts. Il foudra donc également vous munir d'une prise murale qui servira également d'adaptateur USB. À titre d'exemple, on en trouve ici sur Amazon à 7$US).



Le dessin


À vos crayons ! Certains critères sont à respecter pour que votre personnage puisse être animé : le premier dessin ne respecte pas ces critères, alors que le second oui.

Non conforme !
Les bras et les jambes du personnage sont trop collés et seront ainsi difficiles à animer indépendament correctement.
Évitez également les accessoires ou les longs cheveux ou chapeaux qui dépassent au niveau des bras. Dans tous les cas les membres de votre personnage doivent être libres et bien décollés du reste du corps.

Conforme !
Les bras et les jambes du personnage sont décollés du reste du corps
Vous pouvez cliquer sur le dessin pour l'afficher en plein écran et l'enregistrer pour vous entraîner avec, ou bien récupérer le dessin utilisé dans les tutoriels ici, au format .pdf que vous pourrez facilement enregistrer.


Préparer le dessin avec Gimp


La vidéo suivante vous indiquera comment supprimer le fond blanc et colorer votre dessin.



À retenir :
  • Repassez les contours de votre dessin au feutre noir pour en améliorer le contraste.
  • L'outil "baguette magique" permet de sélectionner une zone de couleur. Utilisez-le pour sélectionner le fond blanc.
  • Le menu "sélection --> inverser" permet de passer de la selection du fond à la sélection du personnage.
  • Le menu "fichier --> nouvelle image" vous amène à une nouvelle fenêtre dans laquelle vous devrez indiquer "remplir avec transparence" dans les "options avancées".
  • Pour annuler votre sélection, utilisez "l'outil de sélection rectangulaire" et cliquez n'importe où sur votre image.
  • Enregistrez votre dessin au format .png pour conserver la transparence du fond (le format .jpeg ne gère pas la tranparence et la remplacera par du blanc).

Animata partie 1 - présentation et importation du dessin


La vidéo suivante vous indiquera comment importer votre dessin dans Animata.



À retenir :
  • Enregistrez très souvent votre projet ! Animata n'a pas de fonction "annulation".
  • Indiquez l'extension lorsque vous faites "fichier --> enregistrer sous" en ajoutant ".nmt" à votre nom de fichier. Une fois votre fichier Animata (.nmt) créé il suffira juste de faire "fichier --> enregistrer".
  • Il est très important d'enregistrer votre fichier Animata (.nmt) dans le même dossier que votre image. Sans quoi Animata ne sera pas capable de retrouver votre dessin dans votre ordinateur.
  • L'importation d'image se fait via le bouton "add image" dans l'onglet "image" en bas à gauche.
  • Vous pouvez déplacer l'image avec le bouton "move" dans l'onglet "image".
  • Vous pouvez redimentioner l'image avec le bouton "scale" dans l'onglet "image".

Animata partie 2 - création des mesh et triangulation


La vidéo suivante vous indiquera comment créer les mesh et trianguler votre dessin dans Animata.



Les mesh quézaco ?
Mesh en anglais signifie maillage. Comme vous pouvez le voir dans l'image ci-contre, en animation, les élèments sont tout d'abord modélisés sous forme de mailles de triangles.
Pour reprendre la terminologie d'Animata et du monde de la modélisation 2D-3D en général, un modèle est d'abord dessiné en mesh (maillage) qui est composé de triangles eux même composés de 3 vertices (sommets en français, on dira un vertex au singulier). Voici donc pourquoi, dans Animata, vous devez disposer les vertices pour ensuite trianguler votre dessin, ce qui composera son mesh.

À retenir :
  • Dans l'onglet "mesh" vous pouvez créer les vertices puis trianguler votre dessin
  • Animata fait le travail à l'envers : on créé le mesh autour de notre dessin, alors qu'en modélisation 2D-3D classique on créé le mesh d'abord puis on ajoute une texture par dessus.

Animata partie 3 - création des joints et du squelette


La vidéo suivante vous indiquera comment créer les joints et le squelette votre dessin dans Animata.



À retenir :
  • Les joints sont comme les articulations de votre marionette.
  • Les joints doivent être reliés entre eux par des bones (os).
  • Les 15 joints détectés par le Kinect et pris en charge par Animata sont ceux-ci :
    • Mains (droite et gauche)
    • Coudes (droite et gauche)
    • Épaules (droite et gauche)
    • Hanches (droite et gauche)
    • Genoux (droite et gauche)
    • Pieds (droite et gauche)
    • Tête
    • Cou
    • Torse

Animata partie 4 - attacher les os au maillage


La vidéo suivante vous indiquera comment attacher les os (bones) aux sommets du maillage (vertices du mesh) dans Animata (j'espère que vous suivez avec la terminologie !).
À cette étape-ci, votre personnage sera déjà animé. Vous pourriez arrêter le projet ici si vous ne diposez pas d'un Kinect.



À retenir :
  • Tous les vertices doivent être attachés à un os . Un vertex non-attaché restera fixe dans l'espace alors que votre personnage sera mobile, ce qui entrainera une déformation de votre dessin.
  • La réciproque n'est pas nécessairement vraie : tous les os ne doivent pas nécessairement être attachés à un vertex.
  • Pour sélectionner les vertices à attacher, vous avez 2 possibilités :
    • Soit vous agrandissez la zone de sélection circulaire avec la glissière "area" en bas dans l'onglet "skeleton"
    • Soit vous maintenez la touche "ctrl" enfoncez tout en cliquant sur les vertices que vous voulez sélectionner ou désélectionner

Animata partie 5 - nommer les joints et préparer le dessin pour son animation


La vidéo suivante vous indiquera comment nommer les joints afin que NI-Mate et le Kinect puissent communiquer correctement avec votre dessin dans Animata



À retenir :
  • Dans l'onglet "skeleton" utilisez le bouton "select/move" pour sélectionner le joint à nommer.
  • Écrivez son nom dans le champ de texte.
  • N'oubliez pas que la droite de votre personnage est à votre gauche, et vice-versa !
  • Pour rappel, voici la liste des joints, respectez scrupuleusement la syntaxe :
    • Tête : Head
    • Cou : Neck
    • Torse : Torso
    • Épaule droite : Right_Shoulder
    • Coude droit : Right_Elbow
    • Main droite : Right_Hand
    • Épaule gauche : Left_Shoulder
    • Coude gauche : Left_Elbow
    • Main gauche : Left_Hand
    • hanche droite : Right_Hip
    • Genou droit : Right_Knee
    • Pied droit : Right_Foot
    • Hanche gauche : Left_Hip
    • Genou gauche : Left_Knee
    • Pied gauche : Left_Foot

Animata partie 6 - réglage de NI-Mate et animation du personnage


La vidéo suivante vous indiquera comment régler NI-Mate afin que le Kinect puisse communiquer correctement avec votre dessin dans Animata.



À retenir :
  • la version gratuite de NI-Mate n'a pas de fonction d'enregistrement. Vous devrez réindiquer à chaque fois les réglages. Notez-les quelque part ou référez-vous ici.
  • Les réglages de base dans NI-Mate sont les suivants :
    • Cochez et entrez dans le menu "skeleton tracking".
    • En haut de la fenêtre, dans "IP", modifiez le port pour la valeur "7110" (vous devrez cliquer sur le cadenas pour modifier cette valeur).
    • Dans la section en dessous, nommée "joint OSC mapping", choisir "animata joint" dans le menu déroulant. Vous voyez les noms des joints que vous indiqué à Animata dans la partie précédente.
    • Ouvrez le menu "coordinates" un peu plus bas et choisissez "torso" dans le menu déroulant "origin".
    • Commencez avec les réglages "scale" et "post-offset" suivants :

      X Y
      Scale -400 -450
      Post-Offset 400 450
    • Si votre personnage est trop allongé ou trop écrasé, jouez avec les réglages "scale" en augmentant ou diminuant la valeur de 50 ou 100.
    • Si votre personnage sort de l'écran, jouez avec les réglages "post-offset" en augmentant ou diminuant la valeur de 50 ou 100.
    • Si votre personnage sort de l'écran, vous pouvez également corriger la situation dans Animata, dans l'onglet "layer" avec le bouton "move".



BRAVO ! Vous avez terminé le projet !
N'hésitez à poster des commentaires ou vos questions si vous êtes bloqué quelque part !
Amusez-vous bien avec vos marionettes !

Commentaires ?