🎮 TP2 - Animation sur tracé SVG

📐 ÉTAPE 1 : Créer le conteneur principal

Objectif : Créer une zone de 600×600px centrée qui contiendra toute l'animation.

Ce qui est déjà fait :

• Le CSS du conteneur #main-container est déjà défini
• Dimensions : 600px × 600px
• position: relative (important pour les éléments enfants)
• margin: 0 auto (centrage horizontal)

📝 À FAIRE VOUS-MÊME :

1. Ouvrez le fichier avec votre éditeur HTML (Notepad++, VSCode, ou autre)
2. Cherchez dans le code : Trouvez la section <style> puis #main-container
3. Lisez chaque propriété CSS et essayez de comprendre son rôle
4. Observez le résultat : La page est déjà ouverte dans votre navigateur, vous devriez voir un carré violet dégradé

❓ QUESTIONS :

1. Quelle est la largeur du conteneur ? (Réponse attendue : 600px)
2. Quelle propriété permet de centrer le conteneur horizontalement ? (Réponse : margin: 0 auto)
3. Pourquoi utilise-t-on position: relative ? (Réponse : Pour que les enfants en position: absolute se positionnent par rapport à ce conteneur)

✅ Validation : Vous devriez voir un carré violet dégradé de 600×600px centré dans la page.

🎨 ÉTAPE 2 : Ajouter les cercles décoratifs

Objectif : Créer 3 cercles semi-transparents positionnés en position: absolute.

Ce qui est déjà fait :

• Les 3 <div class="cercle"> sont dans le HTML
• Le CSS de base (forme ronde, transparence) est défini
• Les positions sont déjà définies dans le CSS

📝 À FAIRE VOUS-MÊME :

1. Trouvez le HTML des cercles : Cherchez dans le code les 3 lignes contenant <div class="cercle" id="cercle1"></div>
2. Trouvez le CSS des cercles : Cherchez dans le <style> la partie avec .cercle et #cercle1, #cercle2, #cercle3
3. Observez le résultat : Les 3 cercles blancs semi-transparents doivent être visibles dans le conteneur violet

❓ QUESTIONS :

1. Quelle propriété CSS transforme un carré en cercle ? (Réponse : border-radius: 50%)
2. Que signifie rgba(255, 255, 255, 0.2) ? (Réponse : Blanc avec 20% d'opacité)
3. À quoi servent top et left ? (Réponse : Positionner l'élément depuis le haut et la gauche du parent)
4. Où se positionne #cercle1 ? (Réponse : 50px du haut, 50px de la gauche)

🎯 EXERCICE PRATIQUE :

Ajoutez un 4ème cercle :

1. Ajoutez dans le HTML : <div class="cercle" id="cercle4"></div> (après cercle3)
2. Ajoutez dans le CSS (après #cercle3) :
   #cercle4 { width: 120px; height: 120px; top: 200px; left: 300px; }
3. Rafraîchissez la page (F5) et vérifiez qu'un 4ème cercle apparaît

✅ Validation : Vous devriez voir 3 cercles blancs semi-transparents (ou 4 si vous avez fait l'exercice) dans le conteneur violet.

💡 À comprendre :

✨ ÉTAPE 3 : Animation sur trajectoire elliptique

Objectif : Faire suivre le sprite une trajectoire définie en SVG.

📝 À FAIRE VOUS-MÊME :

ÉTAPE 3.1 - Observer le SVG :

1. Cherchez dans le code HTML la balise <svg id="hidden-svg">
2. Observez le viewBox="0 0 300 269" → système de coordonnées de 300×269 unités
3. Observez le <path id="monChemin" d="..."> → c'est la trajectoire elliptique

ÉTAPE 3.2 - Décommenter le code JavaScript :

1. Trouvez le script : Descendez tout en bas du code HTML jusqu'à <script>
2. Repérez les commentaires : Vous verrez /* au début et */ à la fin
3. Supprimez ces lignes :
   • Supprimez la ligne /* TODO ÉTAPE 3...
   • Supprimez la ligne FIN DU CODE... et le */
4. Vérifiez : Le code JavaScript ne doit plus être grisé/en commentaire

ÉTAPE 3.3 - Tester l'animation :

1. Enregistrez votre fichier (Ctrl+S)
2. Rafraîchissez la page dans le navigateur (F5)
3. Ouvrez la console (F12 → onglet Console)
4. Vérifiez qu'il n'y a pas d'erreurs (texte rouge dans la console)
5. Cliquez sur le bouton "▶ Démarrer"
6. Le sprite (point jaune) doit suivre l'ellipse !

❓ QUESTIONS DE COMPRÉHENSION :

1. Que fait path.getTotalLength() ?
   Réponse attendue : Calcule la longueur totale du chemin SVG
2. Que fait path.getPointAtLength(distance) ?
   Réponse attendue : Retourne les coordonnées (x, y) à une distance donnée sur le chemin
3. Pourquoi divise-t-on point.x par svgWidth ?
   Réponse attendue : Pour convertir en pourcentage (normaliser entre 0 et 1)
4. Pourquoi multiplie-t-on ensuite par 600 ?
   Réponse attendue : Pour adapter au conteneur qui fait 600px de large
5. Que représente la variable progress ?
   Réponse attendue : La position sur le chemin, de 0 (début) à 1 (fin)
6. Que se passe-t-il quand progress atteint 1 ?
   Réponse attendue : On le remet à 0 pour recommencer l'animation en boucle

🔍 COMMENT ÇA MARCHE :

La conversion des coordonnées en 3 étapes :

🎯 EXERCICE DE TEST :

Une fois l'animation lancée :

1. Testez le bouton "⏸ Pause" → l'animation doit s'arrêter
2. Testez le bouton "↺ Recommencer" → le sprite retourne au début
3. Bougez le curseur "Vitesse" → l'animation doit accélérer ou ralentir
4. Observez l'affichage de la position en % et des coordonnées x, y

✅ Validation : Le sprite jaune suit la trajectoire elliptique en boucle. Les boutons et le curseur fonctionnent.

⚠️ En cas d'erreur :

• Le sprite ne bouge pas : Vérifiez que vous avez bien décommenté TOUT le code JavaScript
• Erreur dans la console : Vérifiez qu'il n'y a pas de /* ou */ au milieu du code
• Le sprite est invisible : Vérifiez le CSS de #sprite

🎨 ÉTAPE 4 : Créer votre propre tracé avec GIMP

Objectif : Remplacer l'ellipse par votre propre dessin créé dans GIMP.

📝 À FAIRE VOUS-MÊME :

PARTIE A - Créer le tracé dans GIMP :

1. Ouvrir GIMP
2. Fichier → Nouvelle image
   • Largeur : 300 pixels
   • Hauteur : 300 pixels
   • Cliquez sur OK
3. Activer l'outil Chemin
   • Appuyez sur la touche B
   • OU cliquez sur l'icône "Chemins" dans la boîte à outils
4. Dessiner votre tracé
   • Cliquez pour créer des points (au moins 4-5 points)
   • Créez une forme intéressante (vague, spirale, zigzag...)
   • Conseil : Restez dans l'image, ne sortez pas des bords
   • Optionnel : Clic droit sur le dernier point → "Fermer le chemin" pour faire une boucle fermée
5. Exporter en SVG
   • Fichier → Exporter sous...
   • Donnez un nom : mon-trace.svg
   • Vérifiez que l'extension est bien .svg
   • Cliquez sur Exporter
   • Dans la fenêtre suivante, cliquez encore sur Exporter

PARTIE B - Extraire le path du fichier SVG :

1. Ouvrir le fichier SVG avec un éditeur de texte
   • Clic droit sur mon-trace.svg → Ouvrir avec → Bloc-notes (ou VSCode, Notepad++)
2. Repérer le viewBox
   • Cherchez la ligne contenant <svg ... viewBox="0 0 300 300">
   • Notez les dimensions (ex: 300 300)
3. Copier le path
   • Cherchez la ligne <path ... d="M 50,50 C ...">
   • Sélectionnez TOUT le contenu de d="..." (entre les guillemets)
   • Copiez-le (Ctrl+C)

PARTIE C - Intégrer dans votre code HTML :

1. Commenter l'ancien SVG
   • Cherchez la section avec <svg id="hidden-svg"> (l'ellipse)
   • Ajoutez <!-- AVANT <svg
   • Ajoutez --> APRÈS </svg>
   • Ça devrait ressembler à :
     <!-- <svg id="hidden-svg" viewBox="0 0 300 269"> <path id="monChemin" d="..." /> </svg> -->
2. Décommenter le nouveau SVG
   • Cherchez la section "ÉTAPE 4 : Votre SVG personnalisé"
   • Retirez le <!-- au début
   • Retirez le --> à la fin
3. Coller votre path
   • Remplacez COLLEZ_ICI_VOTRE_PATH_DEPUIS_GIMP
   • Par le contenu que vous avez copié depuis le fichier SVG GIMP
4. Adapter les dimensions si nécessaire
   • Si votre viewBox GIMP était 300 300, pas de changement
   • Si c'était différent (ex: 400 400), modifiez dans le JavaScript :
     // Cherchez ces lignes et modifiez :
     const svgWidth = 400; // au lieu de 300
     const svgHeight = 400; // au lieu de 269

PARTIE D - Tester votre tracé :

1. Enregistrez votre fichier HTML (Ctrl+S)
2. Rafraîchissez la page dans le navigateur (F5)
3. Ouvrez la console (F12) et vérifiez qu'il n'y a pas d'erreurs
4. Cliquez sur "▶ Démarrer"
5. Le sprite doit suivre VOTRE tracé !

❓ QUESTIONS :

1. Où est définie la trajectoire du sprite ?
   Réponse : Dans l'attribut d de la balise <path>
2. Pourquoi doit-on adapter svgWidth et svgHeight ?
   Réponse : Pour que la conversion de coordonnées corresponde aux dimensions du viewBox de notre SVG GIMP
3. Que se passe-t-il si on oublie de commenter l'ancien SVG ?
   Réponse : Il y aura deux id="monChemin", ce qui crée un conflit

🎯 DÉFI BONUS (pour les rapides) :

1. Créez un tracé en forme de votre initiale (première lettre de votre prénom)
2. Modifiez la couleur du sprite en changeant background: dans le CSS
3. Créez un deuxième sprite avec un ID différent et faites-le suivre le même tracé

✅ Validation : Le sprite jaune suit votre tracé personnalisé créé dans GIMP.

⚠️ Problèmes courants :

• Le sprite ne bouge plus : Vérifiez que l'ID est bien id="monChemin" et qu'il n'y en a qu'un seul (commentez l'ancien SVG)
• Le sprite sort du cadre : Adaptez svgWidth et svgHeight selon votre viewBox GIMP
• Erreur "Cannot read property...": Vérifiez la syntaxe du path (guillemets, pas de caractères manquants)
• Le tracé SVG est vide dans GIMP : Assurez-vous d'avoir bien utilisé l'outil "Chemins" (touche B) et non le pinceau