.gitignore

+*.lock
+
+web/public
+public

.gitlab-ci.yml

+# The Docker image that will be used to build your app
+image: harbor.pagoda.os.univ-lyon1.fr/ecoquery-hugo/hugo:latest
+
+
+
+pages:
+  script:
+      - hugo version
+      - cd web
+      - ls -la content
+      - hugo -v
+      - hugo list drafts
+      - mv public ../public
+      - ls -la ../public
+      - ls -la ../public/tags
+      # - ls -la ../public/page
+      - ls -la ../public/categories
+      - cat ../public/index.html
+  artifacts:
+    paths:
+      - public
+  only:
+    - main
+
+
+
+# test:
+#   script:
+#       - pwd
+#       - cd web
+#       - hugo
+#       - mv public ../public
+#       - ls -la ..
+#       - ls -la ../public
+#       - chmod 755 ../public
+#       - chmod 644 ../public/index.html
+#   except:
+#     - main

README.md

-# Master 1 Informatique - UE M1if37 Animation en synthèse d'image (3 ECTS)
+# Site web et ressources de l'UE UE M1if37 Animation en synthèse d'image
 
-Responsables de l'enseignement : A. Meyer, N. Pronost et F. Zara
-Volume horaire : 10h30 CM, 18h TP
+[La page de l'UE est ici](http://alexandre.meyer.pages.univ-lyon1.fr/m1if37-animation/)
 
 
-## Objectif de l'UE
-L'objectif de l'UE est de donner les bases de l'animation en synthèse d'images. Nous aborderons les deux grandes familles de méthodes. L'animation basée sur des données, par exemple pour l'animation d'humain virtuel (données issues de capture de mouvement). Et l'animation basée sur un modèle physique pour la simulation de phénomènes naturels comme le mouvement de textiles ou de fluide. L'UE laissera une grande part à l'application pratique avec la réalisation de TPs en C++/OpenGL proposant d'animer par exemple des humains virtuels, des vêtements, des cordes, une surface d'eau, etc.
 
 
-## Thématiques abordées
+## Explication de la génération
 
-### Animation par modèles physiques (F. Zara) - 4h30 CM, 6h TP
-  * Concepts physiques (forces, lois de Newton)
-  * Méthodes d'intégration numérique
-  * [La page de cette partie](https://perso.liris.cnrs.fr/fzara/Web/M1Animation.html)
+Le site web est désormais fabriqué par ```Hugo``` (thème [congo](https://jpanther.github.io/congo/)). les sources se trouvent dans le répertoire ```web```.
+Le site web est mis à jour par intégration continue (CI/CD) à chaque fois que vous faites un push (rien besoin d'autre, à part attendre quelques secondes). Le script d'intégration continue est ```.gitlab-ci.yml```.  Pour voir le résultat du script de génération, [allez ici](https://forge.univ-lyon1.fr/Alexandre.Meyer/m1if37-animation/-/jobs) ou depuis l'interface dans CI/Jobs.
 
+Le fichier ```site/config.toml``` permet de configurer la génération du site. Mais normalement il n'y a pas besoin d'y toucher.
+   * Les pages web sont générées à partir du répertoire ```web/content```. 
+   * La page principale du site est ```web/content/_index.html```. Il faut bien laissé le ```_```, il indique qu'il y a des sous-répertoires 
+   * ```web/content/controle``` pour la partie "Conrtôle d'animation". ```web/content/controle/index.md``` produit la page de cette partie.
+   * ```web/content/personnage``` pour la partie "Animation de personnage virtuel". 
+   * ```web/static``` : les fichiers autres (pdf, images, sujets, etc.) sont à ranger dedans. Par exemple, il y a 
+      * ```web/static/images``` pour les images du site;
+      * ```web/static/doc``` documents généraux de l'UE;
+      * ```web/static/doc_controle``` documents de la partie contrôle (NP);
+      * ```web/static/doc_charanim``` documents de la partie personnage (AM);
 
-### Animation de personnage (A. Meyer) - 4h30 CM, 6h TP
-  * Animation basée squelette
-  * Déformation de maillage (skinning)
-  * [La page de cette partie](https://perso.liris.cnrs.fr/alexandre.meyer/public_html/www/doku.php?id=charanim_m1#master_1_informatique_-_ue_m1if37_animation_en_synthese_d_image)
 
+## Si Fork
+Par défaut, gitlba ajoute de '-' un peu partout, vous pouvez changer l'adresse web dans Settings/General/Advanced/Change path.
 
-### Contrôle de mouvement (Nicolas Pronost) - 1h30 CM, 6h TP
-  * Mouvement d'objets rigides articulés
-  * [La page de cette partie](https://perso.liris.cnrs.fr/nicolas.pronost/UCBL/M1IF37/)
 
 
-## Emploi du temps 2023
-A venir
+## Tester le site en local
+Pour tester vos mises à jour en local :
+   * installer hugo : ```sudo apt install hugo```
+   * dans le répertoire web, faire ```hugo serve```
+   * dans votre navigateur, entrez l'url ```localhost:8000```
 
+Vous pouvez aussi essayer de contruire le site en static en faisant juste ```hugo``` : le site sera constuit dans le répertoire public.
 
 
-## Modalités de contrôle des connaissances (MCC)
-   * 1 note de CCF portant sur les 3 parties du cours : examen le mardi 21 juin, de 8h à 9h30, salle : ??, Nautibus
-   * 3 notes de TP : TP F. Zara, TP A. Meyer, TP N. Pronost (code + rapport + démo ou vidéo)
-
-   * Examen écrit : mercredi 22 mai 8h-9h30
-   * Démo de TP : mercredi 22 mai, de 9h45 à 12h
-   * Date limite de rendu des 3 archives : mercredi 22 mai 12h
-
-Une archive sera à déposer sur TOMUSS (dans les 3 colonnes correspondantes). Cette archive contiendra le code du TP + un rapport.
-Nous vous demandons également de mettre dans les 3 autres colonnes correspondantes de TOMUSS, l'URL pour accéder à une vidéo de votre projet, si vous ne faites pa de démo (car nous ne le compilerons pas forcément, donc il faut montrer tout votre travail).
-
+Toutes les infos sont détaillées ici !
+Pour convertir du DOKUWIKI en Markdown, on peut utiliser pandoc??? (todo) ou certains web en ligne.

web/archetypes/default.md

+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: false
+---
+

web/config.toml

+baseURL = "http://alexandre.meyer.pages.univ-lyon1.fr/m1if37-animation/"
+title = "M1if37 Animation en synthèse d'images"
+#theme = "etch"
+#theme = "ucax"
+#theme = "paige"
+#theme = "hugo-flex"
+theme = "congo"
+languageCode = "fr-FR"
+enableInlineShortcodes = true
+pygmentsCodeFences = true
+pygmentsUseClasses = true
+
+publishDir = "public"
+
+
+# [author]
+#   name = "Alexandre Meyer"
+#   image = "img/author.jpg"
+#   headline = "M1if37"
+#   bio = ""
+
+
+[params]
+  description = "Animation en synthèse d'images"
+  copyright = ""
+  dark = "auto"
+  highlight = true
+  mainSections = "personnage;controle;posts"
+  #color = "gray"           # Any color in CSS syntax
+  #width = "52rem"          # Any length in CSS syntax
+  colorScheme = "fire"
+  # footer= ""
+  # rss = "" 
+  article.showDate = false
+  favicon = "favicon.ico"
+
+
+# [[footer]]
+#   name = "Privacy"
+#   url = "https://external-link"
+#   - name: Aboutaaa
+#     url: about/
+#     weight: 1
+
+[menu]
+    [[menu.main]]
+        identifier = "Physique"
+        name = "Physique"
+        title = "Physique"
+        url = "https://perso.liris.cnrs.fr/fzara/Web/M1Animation.html"
+        weight = 1
+ 
+    [[menu.main]]
+        identifier = "Personnage"
+        name = "Personnage"
+        title = "Personnage"
+        url = "/personnage/"
+        weight = 2
+
+    [[menu.main]]
+        identifier = "Controle"
+        name = "Controle"
+        title = "Controle"
+        url = "/controle/"
+        weight = 3
+
+  
+[permalinks]
+  posts = "/:title/"
+
+[markup.goldmark.renderer]
+  # Allow HTML in Markdown
+  unsafe = true
+
+  [markup.tableOfContents]
+    ordered = true
+

web/content/_index.md

+# Master 1 Informatique - UE M1if37 Animation en synthèse d'image (3 ECTS)
+
+Responsables de l'enseignement : [Alexandre Meyer](	
+http://liris.cnrs.fr/alexandre.meyer), [Nicolas Pronost](	
+http://liris.cnrs.fr/nicolas.pronost) et [Florence Zara](	
+http://liris.cnrs.fr/florence.zara) - LIRIS, Université Lyon 1
+
+Volume horaire : 10h30 CM, 19h30 TP
+
+
+![im_all.png](images/im_all.png)
+
+## Objectif de l'UE
+<p style="text-align:justify;">M1if37 est une UE optionnelle de la 1ère année du Master d'Informatique de l'Université Lyon 1. Les cours ont lieu au semestre 2 (printemps). L'objectif de l'UE est de donner les bases de l'animation en synthèse d'images. Nous aborderons les deux grandes familles de méthodes. L'animation basée sur des données, par exemple pour l'animation d'humain virtuel (données issues de capture de mouvement). Et l'animation basée sur un modèle physique pour la simulation de phénomènes naturels comme le mouvement de textiles ou de fluide. L'UE laissera une grande part à l'application pratique avec la réalisation de TPs en C++/OpenGL proposant d'animer par exemple des humains virtuels, des vêtements, des cordes, une surface d'eau, etc.</p>
+
+[Les slides de la présentation des options sont ici.](doc/M1if37_PresOption.pdf)
+
+
+## Thématiques abordées
+
+### Animation par modèles physiques (F. Zara) - 4h30 CM, 6h45 TP
+  * Concepts physiques (forces, lois de Newton)
+  * Méthodes d'intégration numérique
+  * [La page web de cette partie](https://perso.liris.cnrs.fr/fzara/Web/M1Animation.html)
+
+
+### Animation de personnage (A. Meyer) - 4h30 CM, 6h45 TP
+  * Animation basée squelette
+  * Graphe d'animation
+  * Capture de mouvement
+  * [La page web de cette partie](personnage)
+
+
+### Contrôle de mouvement (Nicolas Pronost) - 1h30 CM, 6h TP
+  * Mouvement d'objets rigides articulés
+  * [La page web de cette partie](controle)
+
+
+## Emploi du temps 2024-2025
+
+![documents/M1if37_edt.png](doc/M1if37_edt.png)
+
+  * Cours en salle TD005 Nautibus
+
+  * TP en salles TP121, TP123 Nautibus
+
+## Modalités de contrôle des connaissances (MCC)
+   * **1 note de CCF** portant sur les 3 parties du cours
+   * **3 notes de TP** : TP F. Zara, TP A. Meyer, TP N. Pronost (code + rapport + démo ou vidéo)
+
+   * **Dates des évaluations** : 
+     * Examen écrit : **mercredi 28 mai 2025, 8h à 9h30** en salle C008 Nautibus
+     * Démo de TP : **mercredi 28 mai 2025, de 9h45 à 13h** en TP121, TP123 Nautibus
+     * Date limite de rendu des 3 archives : **mercredi 28 mai 2025 13h**
+
+  * **Modalité de rendu des TPs :** <p style="text-align:justify;">
+     * Une archive sera à déposer sur TOMUSS (dans les 3 colonnes correspondantes). Cette archive contiendra le code du TP + un rapport.
+     * Nous vous demandons également de mettre dans les 3 autres colonnes correspondantes de TOMUSS, l'URL pour accéder à une vidéo de votre projet, si vous ne faites pas de démo (car nous ne le compilerons pas forcément, donc il faut montrer tout votre travail).</p>
+

web/content/controle/index.md

+# Master 1 Informatique - UE M1if37 Animation en synthèse d'image (3 ECTS)
+
+## Contrôle de mouvement
+
+Télécharger [les transparents du cours](../doc_controle/M1IF37_CM_CONTROLEUR.pdf)
+
+
+Télécharger [l'énoncé du TP](../doc_controle/M1IF37_TP_CONTROLEUR.pdf)
+
+
+Accéder [aux ressources pour le TP](../doc_controle/tp.zip)
+
+
+Télécharger [le modèle pour le rapport](../doc_controle/M1IF37_TP_CONTROLEUR-modele_rapport.docx)		
\ No newline at end of file

web/content/personnage/_index.md

+
+---
+title: ""
+description: "Partie Animation de personnage"
+---
+
+
+
+# Partie Animation de personnage
+  * Alexandre Meyer
+  * 4h30 CM, 6h30 TP
+  * [L'ancienne page de cette partie](https://perso.liris.cnrs.fr/alexandre.meyer/public_html/www/doku.php?id=charanim_m1#master_1_informatique_-_ue_m1if37_animation_en_synthese_d_image)
+
+![](../doc_charanim/charanim_tpose.jpg)
+
+
+
+
+## Cours
+  * [Systèmes articulés : cinématique directe](https://perso.liris.cnrs.fr/alexandre.meyer/teaching/master_charanim/aPDF_COURS_M1/M1_1_SkeletonBasedAnimation.pdf)
+  * [Edition d'animations, Graphe d'animations](https://perso.liris.cnrs.fr/alexandre.meyer/teaching/master_charanim/aPDF_COURS_M1/M1_2_MotionControlAndEditing.pdf)
+  * [Capture de mouvements](https://perso.liris.cnrs.fr/alexandre.meyer/teaching/master_charanim/aPDF_COURS_M1/M1_3_MotionCapture.pdf)
+
+
+## Les vidéos des 3 CM (2020)
+[Les vidéos](video)
+
+
+
+## Le TP
+  * [Le code initial](code)
+  * [TP animation de personnage](tp)
+
+#### Rendu
+
+TP Animation de personnage virtuel
+ * Les archives sont à rendre sur TOMUSS
+ * vous devez rendre une archive avec un readme.txt ou readme.md expliquant ce que vous avez fait et comment lancer le programme
+ * une VIDEO de DEMO ou une démo en LIVE
+
+Barème "Personnage" 
+* (5 points) TP 1ère partie : affichage d'une animation BVH
+* (3 points) Contrôleur d'animation :  la base (pilotage au clavier d'un déplacement)
+* Machine à état (4 points maximum)
+  * basique : pour une machine à état de base avec 4 animations : idle, marcher, courir, sauter ou kick
+  * avancé : une machine à état plus complète avec de nombreuses animations (une dizaine) : voir celles du répertoire motionGraph_second_life, etc.
+* Motion Graphe (6 points)
+  * basique : transition vers un autre animation en cherchant à la volée une transition compatible
+  * avancé : un motion graph construit automatiquement en pré-calcul
+* (3 points) Interpolation entre 2 frames, à utilise pour les transitions ou pour une bonne gestion du temps
+* (2 points) Collision entre personnage et sphères (voir le code PhysicalWorld)
+* (1 points) bonus de qualité/cohérence de la scène
+
+Le total fait plus que 20 car les points FSM/graphe d'animation sont à comprendre avec un OU : la machine à état rapporte moins de points, car  moins difficile.

web/content/personnage/code.md

+# Code pour les TP d'animation de personnage en C++ (en M1)
+
+
+
+
+## Les fichiers à recupérer
+
+Le code se base sur gkit2light (une branche) et se récupère avec Git comme ceci:
+```
+    git clone -b master_CharAnim https://forge.univ-lyon1.fr/Alexandre.Meyer/gkit2light.git gkit2light-master_CharAnim
+```
+qui fait un clone du dépôt gkit2light, branche `master_CharAnim` et range le tout dans le répertoire `gkit2light-master_CharAnim`
+ou alors 
+```
+    git clone https://forge.univ-lyon1.fr/Alexandre.Meyer/gkit2light.git gkit2light-master_CharAnim
+    cd gkit2light-master_CharAnim
+    git checkout master_CharAnim
+    => le update avec un nom de branche permet de passer dans une autre branche
+```
+
+
+## Pour compiler sous Linux avec codeblocks
+
+```
+    cd gkit2light-master_CharAnim
+    premake5 --file=master_CharAnim.lua codeblocks
+```
+puis ouvrir le projet  `master_CharAnim.cbp`
+
+
+## Pour compiler sous Linux avec make
+```
+    cd gkit2light
+    premake5 --file=master_CharAnim.lua gmake
+    make -f master_CharAnim.make ou juste make
+    bin/master_CharAnim
+```
+
+
+## Pour compiler sous Linux de chez vous (ubuntu)
+
+* [voir le apt-get install ... ici](http://perso.univ-lyon1.fr/jean-claude.iehl/Public/educ/M1IMAGE/html/group__installation.html)
+* `sudo apt install premake4 premake5`
+* puis comme indiqué plus haut
+
+
+## Pour compiler sous Windows chez vous avec VSCode ou CodeBlocks ou VisualStudio
+
+* Installez Git
+* Installez Codeblocks ou VSCode avec Mingw OU Visual Studio
+* Explorateur de fichier, placez vous dans le répertoire de vos fichiers, bouton droit "git bash here" puis le clone indiqué plus haut ...
+* [Téléchargez les librairies (SDL,Glew, etc.) pour Windows ici](https://perso.univ-lyon1.fr/jean-claude.iehl/Public/educ/M1IMAGE/extern_mingw_visual.zip)
+  * Copiez le répertoire 'extern' dans le répertoire principal de gkit2light
+  * Vous devez aussi copier toutes les .dll du répertoire extern/mingw/lib OU extern/visual20??/lib dans gkit2light-master_CharAnim/bin (répertoire des exécutables), sinon vous aurez des erreurs à l’exécution des programmes
+* Lancez le script `gkit2light-master_CharAnim/premake/premake-CharA.bat` qui va créer les projets makefile/codeblocks/visual` dans le répertoire gkitlight
+* Ouvrez le projet `gkit2light-master_CharAnim/gkit2light.cbp` ou `gkit2light-master_CharAnim/build/gkit2light.sln`
+
+
+
+## gKitLight la doc
+
+[La documentation est ici.](http://jean-claude.iehl.perso.univ-lyon1.fr/Public/educ/M1IMAGE/index.html)
+
+
+## Quelques explications sur le code
+
+* 'h' pour l'aide
+* 'a'=affiche/enlève les axes; 'g'=affiche/enlève la grille;
+* souris bouton gauche= rotation du monde
+* souris bouton droit et translation horizontale : pour zoomer
+* **Votre code prendra place dans le module src/master_CharAnim/CharAnimViewer.h / .cpp**
+
+* La class CharAnimViewer contient les fonctions init/draw qui s'occupent de l'affichage, elle dispose par héritage de fonction draw_sphere et draw_cylinder
+* Pour ajouter des fichiers au projet, regarder le master_CharAnim.lua dans la racine

web/content/personnage/tp.md

+  
+
+# TP d'Animation de personnage (M1)
+
+  
+  
+
+## TP partie 1 : affichage
+
+
+![](../../doc_charanim/charanim_interpolation.png)  
+Vous allez créer un module Skeleton.h/.cpp (ce code n'est qu'indicatif, vous êtes libre de vos structures de données). Cette classe va stocker un tableau de toutes les articulations (SkeletonJoint) du squelette et pour chaque articulation stocke l'identifiant de l'articulation parent et la matrice de passage de l'articulation vers le monde.
+
+Le fichier est déjà présent dans le code départ avec des TODO à compléter :
+
+``` 
+
+class Skeleton
+{
+public:
+
+   struct SkeletonJoint
+   {
+      int m_parentId;    // Le numéro du père dans le tableau de CAJoint de CASkeleton
+      Transform m_l2w;  // La matrice passant du repère de l'articulation vers le monde
+   };
+
+   Skeleton() {}
+
+   //! Créer un squelette ayant la même structure que définit dans le BVH c'est à dire
+   //! creer le tableau de SkeletonJoint à la bonne taille, avec les parentId initialsé pour chaque case
+   void init(const BVH& bvh);
+
+   //! Renvoie la position de l'articulation i en multipliant le m_l2w par le Point(0,0,0)
+   Point getJointPosition(int i) const;
+
+   //! Renvoie l'identifiant de l'articulation père de l'articulation numéro i
+   int getParentId(const int i) const;
+   
+   //! Renvoie le nombre d'articulation
+   int numberOfJoint() const;
+
+   //! Positionne ce squelette dans la position n du BVH. 
+   //! Assez proche de la fonction récursive (question 1), mais range la matrice (Transform)
+   //! dans la case du tableau. Pour obtenir la matrice allant de l'articulation local vers le monde,
+   //! il faut multiplier la matrice allant de l'articulation vers son père à la matrice du père allant de
+   //! l'articulation du père vers le monde.
+   void setPose(const BVH& bvh, int frameNumber);
+
+
+protected:
+   //! L'ensemble des articulations.
+   //! Remarque : la notion de hiérarchie (arbre) n'est plus nécessaire ici,
+   //! pour tracer les os on utilise l'information "parentID" de la class CAJoint
+   std::vector<SkeletonJoint> m_joint;
+};
+
+```
+
+  
+Dans le Viewer vous devez :
+ * Déclarer un Skeleton en variable de la classe
+ * Ecrire une fonction qui fait l'affichage
+
+``` 
+    void CharAnimViewer::skeletonDraw(const Skeleton& ske);
+```
+
+ * Initaliser l'instance de Skeleton dans la fonction init
+ * Appeler setPose dans la fonction update
+
+  
+Remarques
+ * On sépare bien l'affichage de la gestion du squelette pour pouvoir réutiliser le code Skeleton avec une autre librairie d'affichage.
+ * On ne s'occupe pas du temps pour l'instant mais uniquement du numéro de la posture.
+ * Vous pouvez trouvez des BVH dans le répertoire data du code de départ. Notamment le fichier robot.bvh pour debuguer.
+
+  
+  
+## TP partie 2 : Contrôleur d'animation
+
+#### Déplacer une sphère au clavier
+
+Ecrivez une class CharacterControler qui à partir des touches claviers contrôlera le déplacement d'un personnage. Dans une 1er temps faites juste déplacer une boule : accélérer, freiner, tourner à droite, tourner à gauche, sauter. Ce contrôleur comportera une position et une vitesse. La vitesse sera modifiée par les flèches (ou un pad) et la position sera mise à jour dans la fonction update du Viewer en utilisant le paramètre "delta" recu par la fonction update.
+
+Une classe de Controller peut ressembler à ceci.
+
+``` 
+    class CharacterController
+    {
+    public:
+        CharacterController() : ... {}
+
+        void update(const float dt);
+
+        void turnXZ(const float& rot_angle_v);
+        void accelerate(const float& speed_inc);
+        void setVelocityMax(const float vmax);
+
+        const Point position() const;
+        const Vector direction() const;
+        float velocity() const;
+                const Transform& controller2world() const { return m_ch2w; }
+
+    protected:
+                Transform m_ch2w;   // matrice du character vers le monde
+                                    // le personnage se déplace vers X
+                                    // il tourne autour de Y
+                                    // Z est sa direction droite
+                                    
+        float m_v;          // le vecteur vitesse est m_v * m_ch2w * Vector(1,0,0)
+        float m_vMax;       // ne peut pas accélérer plus que m_vMax
+    };
+```
+
+  
+
+#### Déplacer un personnage au clavier
+
+Dans un 2e temps, votre contrôleur comportera également une série d'animation bvh : attendre, marcher, courir, et donner un coup de pied.
+En fonction de l'action que veut faire le joueur appuyant sur des touches vous changerez d'animation. Vous coderez la machine à états
+finis (FiniteStateMachine) de l'image ci-dessous. Les cercles sont les états (l'animation en train d'être jouée), les rectangles rouges sont
+les éventements et les carrés bleus sont les actions à effectuer (fonction de la classe). Ce changement se fera brutalement. Ne vous
+occupez pas non plus des pieds qui glissent sur le sol. Un meilleur contrôle peut-être fait la construction d'un graphe d'animation.
+
+![](../../doc_charanim/fsm.png)
+
+  
+  
+
+## TP partie 3 : Transition et graphe d'animation
+
+a) Pour améliorer le réalisme, il serait bon de faire les transitions entre deux animations en choisissant deux poses des animations qui sont
+proches. Pour cela il faut calculer la distance entre deux poses d'animations (Voir les infos dans le sujet Graphe d'animation).  
+  
+b) Pour aller encore plus loin, on peut construire un automate de manière complètement automatique. On appelle alors ceci un graphe d'animation. [Voir le sujet détaillé de cette 3e partie ici.](../tp_motiongraph)  
+  
+a.bis) Indépendamment de la machine à état ou du graphe, si vous voulez gérer le temps de manière plus juste, il faudrait récupérer le temps
+réellement écoulé depuis l'affichage précédent. Ceci vous fera ne vous fera pas tomber précisément sur une frame stocké dans le clip (BVH). Il faudra donc interpoler entre les 2 frames. Le résultat sera de l'ordre du détail lors de l'affichage mais si vous voulez que votre moteur
+d'animation tourne sur toutes les machines indépendamment du CPU, il faut le faire. Cette interpolation peut également servir pour passer d'un clip à un autre.
+
+  
+  
+
+## TP partie 4 :  Interaction entre le personnage et des sphères physiques 
+
+Pour bien comprendre l'animation physique voir la partie de F. Zara.
+
+#### Particules
+
+![](../../doc_charanim/charanim_ball.png)
+
+Dans la fonction init de la class CharAnimViewer indiquez un nombre de particules non nul :
+
+``` 
+    m_world.setParticlesCount( 10 );
+```
+
+Dans la fonction render, il faut afficher les particules en dé-commentant cette ligne :
+
+``` 
+    m_world.draw();
+```
+
+Vous verrez alors les particules s'afficher, mais elles ne seront pas animées. Pour calculer la physique sur les particules, il y a deux
+classes **PhysicalWorld** et **Particle**. Regardez le fichier Particles.h. Il faudra compléter les fonctions update, collision et groundCollision :
+
+``` 
+    void update(const float dt = 0.1f)
+    void groundCollision()
+    void collision(const Point& p, const float radius)
+```
+
+Le code de update doit mettre à jour la vitesse avec l'équation `F=m.a` où `a = dv/dt`
+
+Et mettre à jour la position avec l'équation habituelle `p = p + v.t`  
+
+Pour plus de détail, voir la partie de F. Zara.
+
+  
+
+#### Interaction personnage/particules
+
+Pour ajouter l'interaction entre votre personnage et des boules/sphères se trouvant dans l'environnement, il faut appeler `PhysicalWorld::collision` depuis `CharAnimViewer::update` en parcourant toutes les articulations du personnage. Dans un 1er temps, vous pouvez juste faire disparaitre les particules touchées en faisant passer le rayon de la particule à -1 et faire en sorte que les particules de rayon négatif ne soient pas affichées. Puis ajoutez dans `Particle::collision` du code pour déplacer les particules en collisions (résoudre les collisions) et changer leur vecteur vitesse.
+

web/content/personnage/tp_motiongraph.md

+## TP 3e partie : graphe d'animation
+
+ - [Motion Graph de l'article original](http://www.cs.wisc.edu/graphics/Gallery/kovar.vol/MoGraphs/);
+ - Des BVH avec squelette compatible pour le graphe sont donné dans le git, répertoire Second_Life.\
+
+Nous avons remarqué dans la partie 1 que la transition d'animation ne fonctionne bien que lorsque les deux poses du squelette sont assez
+proches (il faut bien sûr également que les deux squelettes aient la même topologie). L'idée d'un graphe d'animation est de construire un
+graphe où chaque noeud correspond à une pose d'une animation et où chaque arrête définit qu'une transition est possible entre les deux poses.
+
+
+
+#### Comparaison de deux poses d'animation
+
+Pour construire un graphe d'animation à partir d'une ou plusieurs animations, on doit être capable de comparer deux poses d'animation.
+Une distance de 0 indique que les deux poses sont identiques. Une distance grande indique que les 2 poses sont très différentes.
+
+A partir de la classe Skeleton, écrivez la fonction de calcul de distance entre deux poses de squelette. Cette fonction est déjà présente
+dans la classe Skeleton plus haut mais en commentaire. Cette fonction calcule itérativement sur toutes les articulations la somme des distances euclidienne entre chaque articulation de deux squelettes aillant la même topologie mais dans des poses différentes.
+
+```
+    friend float Skeleton::Distance(const Skeleton& a, const Skeleton& b);
+```
+
+** Remarque ** : il est important de ne pas tenir compte de la translation et de la rotation de l'articulation racine. Une même pose a
+deux endroits du monde doit donner une distance de 0. Dans un 1er temps, votre personnage aura son noeud root centré en (0,0,0), puis dans la dernière partie de cette question, vous traiterez le centre de gravité.
+
+
+
+#### Construction du graphe
+
+Ecrivez un module MotionGraph qui contiendra un ensemble de BVH et le graphe d'animation définissant des transitions dans cette ensemble d'animation.
+     * Un noeud du graphe=(Identifiant d'une animation + un numéro de pose); 
+     * un arc du graphe entre deux poses indique la transition possible entre ces deux poses. Deux poses sont compatibles à la transition quand la distance entre les deux squelettes sont inférieurs à un certain seuil fixé empiriquement.
+
+
+Vous pouvez créer un module `CACore/CAMotionGraph.h/.cpp`
+
+```
+    class MotionGraph
+    {
+       ...
+    protected:
+       //! L'ensemble des BVH du graphe d'animation
+       std::vector<BVH> m_BVH;
+
+       //! Un noeud du graphe d'animation est repéré par un entier=un identifiant
+       typedef int GrapheNodeID;
+
+       //! Une animation BVH est repérée par un identifiant=un entier 
+       typedef int BVH_ID;
+       
+       //! Un noeud du graphe contient l'identifiant de l'animation, le numéro 
+       //! de la frame et les identifiants des noeuds successeurs 
+       //! Remarque : du code plus "joli" aurait créer une classe CAGrapheNode
+       struct GrapheNode
+       {
+         BVH_ID id_bvh;
+         int frame;
+         std::vector<GrapheNodeID> ids_next;     //! Liste des nœuds successeurs 
+       };
+
+
+       //! Tous les noeuds du graphe d'animation
+       std::vector<GrapheNode> m_GrapheNode;
+
+    };
+```
+
+
+
+#### Navigation dans le graphe
+
+Une fois ce graphe construit, on peut définir différente manière de
+naviguer dedans :
+ - Un parcours aléatoire dans le graphe (juste pour vérifier que le graphe est ok);
+ - L'utilisateur donne des directions au clavier => le parcours dans le graphe est conditionné par ces contraintes.
+
+
+
+#### Gestion correcte du centre de gravité
+
+Pour chaque arc du graphe, vous devez stocker la transformation (soit une matrice 4x4, soit un quaternion et une translation) du noeud root (souvent le centre de gravité) entre la pose i et la pose i+1. Cette transformation sera appliqué au noeud root de votre personnage quand il empruntera l'arc.
+

web/content/personnage/video.md

+
+# CM Animation de personnages virtuels (Master 1ère année)
+
+  * CM = Cours Magistral
+  * Vous pouvez très facilement faire une pause au moment des
+    exercices, revenir en arrière et/ou accélérer la vitesse de la vidéo
+    depuis les options de YouTube (x 1.50 ou plus vite)
+
+
+## CM1 : Animation basée squelette
+Il y a 3 vidéos pour le CM1 :
+     * L'introduction
+     * Un exercice d'affichage de squelette animé très simple
+     * Afficage récursif d'un squelette à partir de la structure de données, présentation du format BVH, prise en main du code du TP
+
+#### CM1.a Introduction
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/TNSesEPrAn0 " frameborder="0" allowfullscreen></iframe>
+
+#### CM1.b Exercice
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/1Js-9r28T-c" frameborder="0" allowfullscreen></iframe>
+
+#### CM1.c Arbre/Squelette, Affichage récursif et BVH
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/1Y8VE9WrSfw" frameborder="0" allowfullscreen></iframe>
+
+
+## CM2 : Edition d\'animations et Contrôle d\'un Personnage Virtuel
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/DfsH9bIIisA" frameborder="0" allowfullscreen></iframe>
+
+## CM3 : Animation et Capture de Mouvements
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/7t98WLxikOo" frameborder="0" allowfullscreen></iframe>

web/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.content

+@charset "UTF-8";html{font-family:times new roman,times,noto serif,serif}body{margin:0;padding:0;background:#fff;color:#454545;font-size:calc(1em + .22vw);box-sizing:border-box;line-height:1.4;min-height:80vh}body ::selection{color:#fff;background:#000}body.dark{background:#1d2021;color:#fff}body.dark ::selection{color:#000;background:#fff}.verbatim{font-family:monospace;font-size:.8rem;padding:3px 5px;border-radius:3px}.title{display:flex;align-items:center;justify-content:space-around}.name{width:80%;flex:1;text-align:left;width:80%}.link,sup a{border-right:0;border-top:0;border-left:0;border-bottom:2px solid;border-style:dotted;text-decoration:none;color:#076678}.content{margin-top:10px;border-top:2px gray solid}.line{margin:0;background:#076678;height:5px;border-radius:4px;width:0%;position:fixed;top:0;z-index:1000}p a,li a{border-right:0;border-top:0;border-left:0;border-bottom:2px solid;border-style:dotted;text-decoration:none;color:#076678}.color-scheme{font-size:15px}.checkbox{opacity:0;position:absolute}.post-header{display:flex;align-items:center}.post-title{margin:5px 0;overflow-wrap:break-word;hyphens:manual;font-family:serif}.post-dets{margin:0 0 5px}.tags{display:flex;flex-wrap:wrap;boder-bottom:2px dotted;align-items:center}.tags h5{margin:6px 5px 6px 0}.tag{background:#e25555;color:#fff;padding:5px;border-radius:5px;text-decoration:none;margin-right:3px}.post-item{margin:10px 0}.well h5,.well h4,.well h3,.well p{margin:5px 0}.well h3{font-family:serif}.label{background-color:#282828;border-radius:50px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:5px;height:10px;width:40px;transform:scale(1.5);margin-top:10px}.label .ball{background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;height:16px;width:16px;transform:translateX(0);transition:transform .2s linear}.label svg{height:12px;width:12px;color:#f39c12}.checkbox:checked+.label .ball{transform:translateX(28px)}.fa-moon{color:#f1c40f}.fa-sun{color:#f39c12}.main{display:flex;flex-direction:column;width:50%;margin:auto}.intro{display:flex;flex-direction:column}.intro p{text-align:justify}.intro-quote{font-family:serif;list-style:none;font-style:italic;text-align:center;width:400px}.image{width:200px;border-radius:200px;margin:10px}html.contrast body{color:#050505}small{font-size:calc(.5em + .33vw)}ul li img{height:1em}blockquote{margin-left:0}.nav{margin:20px auto}.nav a{background:#076678;background:linear-gradient(90deg,#076678 0%,#0a8fa8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="$primary-accent-color",endColorstr="#0a8fa8",GradientType=1);padding:10px;color:#fff;text-decoration:none;border-radius:3px;margin:5px}.nav a:hover{background:#fff;padding:8px;color:#076678;text-decoration:none;border:2px solid #076678;animation:blueToWhite .4s linear}.go-back{color:inherit;text-decoration:none;display:flex;margin:auto 10px auto 0}blockquote{background:lightgrey;color:#454545;border-left:5px solid #076678;margin:1.5em 20px;padding:.5em 10px;quotes:"“" "”" "‘" "’"}blockquote p{display:inline;font-style:italic;font-size:calc(.8em + .33vw)}blockquote:before{color:#ccc;font-size:calc(1em + .33vw);line-height:.1em;margin-right:.25em;vertical-align:-.4em}blockquote ul,ul{padding-left:20px}blockquote.dark{background:#282828;color:#fff}.social{display:flex;flex-wrap:wrap;margin:20px 0 0;justify-content:space-between;width:80%}.social a{text-decoration:none;margin:0;color:#076678}.social-link{font-size:30px}#footer{display:flex;flex-direction:column;justify-content:space-around;align-items:center;text-align:center;border-right:0;border-top:2px solid;border-left:0;border-bottom:0;margin:20px auto auto;width:100%}#footer p{width:90%;margin:10px auto}#footer strong{width:90%}#footer .copyleft{margin:10px 0;padding:0;font-size:calc(.5em + .33vw);list-style:none}#footer .copyleft b{display:inline-block;transform:rotate(180deg)}#footer .copyleft li{display:inline-block;margin:0 0 0 .45em;padding:0 0 0 .85em;border-left:solid 1px rgba(255,255,255,.5);line-height:1}#footer .copyleft li:first-child{border-left:0}pre{padding:10px;background-color:#2c2c2c;border-radius:5px;font-family:monospace;font-size:calc(.7em + .13vw);overflow-x:auto}code{background:#2c2c2c;color:#fff}@media screen and (max-width:1024px){html{font-size:1em}.main{width:90%}.tags,.post-title{margin:0}.post-header{flex-wrap:wrap}#footer p,.intro-quote{width:90%}}.back-transition{transition:background .2s linear}.footnote-definition{display:flex;padding:5px 0}.social{width:100%}.footnote-body,.footnote-body p{margin:0;padding:0 10px}ul li p{margin:5px}@keyframes blueToWhite{0%{background:#076678;background:linear-gradient(90deg,#076678 0%,#0a8fa8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="$primary-accent-color",endColorstr="#0a8fa8",GradientType=1);color:#fff}100%{background:#fff;color:#076678}}
\ No newline at end of file

web/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.json

+{"Target":"sass/main.min.a669fc379ca0ba4d389af69be2682407e7bca16d368f2e7ad5b83c0cd80029b3.css","MediaType":"text/css","Data":{"Integrity":"sha256-pmn8N5yguk04mvab4mgkB+e8oW02jy561bg8DNgAKbM="}}
\ No newline at end of file

web/static/about.txt

+This favicon was generated using the following font:
+
+- Font Title: Lato
+- Font Author: Copyright (c) 2010-2011 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato". Licensed under the SIL Open Font License, Version 1.1.
+- Font Source: http://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30wWyWrFCbw7A.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))