🎮 TP2 - Animation sur tracé SVG

Énoncé du travail pratique

📁 Fichier fourni :

💡 Conseil : Gardez les deux fichiers ouverts en même temps (l'énoncé dans le navigateur, le fichier de travail dans votre éditeur).

📐 É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 :

📝 À 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 : Ouvrez tp2_travail.html dans votre navigateur, vous devriez voir un carré violet dégradé

❓ QUESTIONS :

  1. Quelle est la largeur du conteneur ?
  2. Quelle propriété permet de centrer le conteneur horizontalement ?
  3. Pourquoi utilise-t-on position: relative ?

✅ 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 :

📝 À 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 ?
  2. Que signifie rgba(255, 255, 255, 0.2) ?
  3. À quoi servent top et left ?
  4. Où se positionne #cercle1 ?

🎯 EXERCICE PRATIQUE :

Ajoutez un 4ème cercle : de diametre 120px, centré en x=300,y=200.

  1. Ajoutez dans le HTML : (et compléter) <div class="cercle" id="...."></div>
  2. Ajoutez dans le CSS: (et compléter)
    #cercle4 { ... }
  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 :

/* Position absolute par rapport au conteneur parent */ position: absolute; top: 50px; /* 50px depuis le haut */ left: 50px; /* 50px depuis la gauche */ /* OU utiliser bottom/right */ bottom: 100px; /* 100px depuis le bas */ right: 80px; /* 80px depuis la droite */

✨ É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() ?
  2. Que fait path.getPointAtLength(distance) ?
  3. Pourquoi divise-t-on point.x par svgWidth ?
  4. Pourquoi multiplie-t-on ensuite par 600 ?
  5. Que représente la variable progress ?
  6. Que se passe-t-il quand progress atteint 1 ?
  7. Quelle fonction gère le déplacement du sprite? Comment?

🔍 COMMENT ÇA MARCHE :

La conversion des coordonnées en 3 étapes :

// ÉTAPE 1 : Coordonnées SVG (système du viewBox) point.x = 150 (dans le système 0-300) point.y = 100 (dans le système 0-269) // ÉTAPE 2 : Conversion en pourcentage percentX = 150 / 300 = 0.5 (50%) percentY = 100 / 269 = 0.37 (37%) // ÉTAPE 3 : Conversion en pixels du conteneur x = 0.5 × 600 = 300px (50% de 600px) y = 0.37 × 600 = 222px (37% de 600px)

🎯 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 :

🎨 É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
    • à partir du menu: Fenêtres → Fenêtres ancrables → Chemins ;
    • Dans l'explorateur des chemins (fenêtre à droite): Clic droit sur la miniature du calque → Exporter le chemin...
    • Donnez un nom : mon-trace.svg
    • Vérifiez que l'extension est bien .svg
    • Cliquez 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 ?
  2. Pourquoi doit-on adapter svgWidth et svgHeight ?
  3. Que se passe-t-il si on oublie de commenter l'ancien SVG ?

🎯 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 :

🎉 Félicitations !

Si vous avez terminé toutes les étapes, vous maîtrisez maintenant :

Prochaines étapes possibles : Ajouter des collisions, créer plusieurs sprites, modifier la couleur selon la position, ajouter des sons...