Tutoriel:Animation pas à pas d'une construction géométrique simple avec boutons et scripts.

Créer une animation pas-à-pas en français

Objectif

Le but de ce tutoriel est de donner les techniques de bases pour créer des animations pas à pas, par exemple pour montrer les étapes d'une construction. J'ai choisi, vu mon métier, un exemple niveau collège (6°): les étapes de la construction de la perpendiculaire à une droite passant par un point, en faisant coulisser l'équerre le long de la droite jusqu'à buter contre le crayon, puis tracé. Mais on peut utiliser les mêmes techniques à tout niveau. Voici le produit fini.

On verra dans ce tutoriel:

• L'utilisation de l'affichage conditionnel pour voir les étapes une à une
• L'utilisation de boutons et de leurs scripts pour passer d'une étape à l'autre et déclencher des événements à certains changements d'étapes, comme démarrer une animation.

Établir la structure de l'animation

C'est le côté didactique du travail, décider ce qu'on montre. Ici le but est que les élèves apprennent à tracer la perpendiculaire à une droite (d) passant par le point A. Dans l'exemple, il y a 6 étapes (de 0 à 5, on verra plus loin pourquoi je commence à 0).

• Étape 0: (départ) la droite (d) et le point A.
• Étape 1: on place l'équerre le long de la droite et le crayon sur le point A.
• Étape 2: on fait glisser l'équerre le long de la droite jusqu'à buter sur le point A.
• Étape 3: on trace alors le long de l'autre côté de l'angle droit de l'équerre.
• Étape 4: on cache l'équerre et on prolonge la perpendiculaire.
• Étape 5: on place le pied de la perpendiculaire et on code l'angle droit.

Le gros du travail est fait ici! Il faut vraiment y réfléchir, il peut être très compliqué d'en changer la structure une fois le développement commencé.

Commencer par dessiner le but

Le plus facile: placer un point A, une droite (d) - ici créée par les points M et N, cachés. Si vous ne souhaitez pas que la droite puisse être déplacée, vous pouvez par le menu Propriétés->Basique la rendre fixe. Astuce: mettre tout de suite de la couleur aux objets importants, on les repère alors plus facilement dans la fenêtre algèbre.

Créez donc une droite (MN), un point libre A, la perpendiculaire à (MN) qui passe par A, son pied. Éditez la légende de la droite : (d) puis cachez les points M et N. Appelez H le pied de la perpendiculaire. Afficher l'angle droit.

Décider la commande des animations

On a ici deux animations:

• L'équerre qui coulisse: cette animation sera commandée par son angle droit. On doit donc définir un segment sur la droite (d): entre la position de départ de l'équerre et sa position finale, le pied de la perpendiculaire. L'animation consiste à déplacer le point de commande, qui entraîne l'équerre.
• Le coup de crayon le long de l'autre côté de l'équerre: un point du segment formé par le côté à tracer de l'équerre. L'animation sera rendue par la trace active du point.

Il faut donc définir, dans l'ordre:

• un segment dans la droite (d), sur lequel l'équerre va coulisser: le segment [BH] : placer le point B sur la droite, cacher la droite, tracer le segment.
• un point C dans ce segment: l'angle droit de l'équerre. Utiliser l'outil "nouveau point" en cliquant dans le segment [BH]. Cacher alors le segment et afficher la droite à nouveau.
• les dimensions de l'équerre: disons, 2 le long de la droite (d), 3 dans la dimension perpendiculaire.
• le segment à tracer: il est préférable de l'attacher au but, qui est à la bonne position, plutôt qu'à l'équerre, qui peut bouger. On va donc placer un point sur la perpendiculaire, à la distance 3 du pied: D.
• la pointe du crayon: E, un point du segment [DH] (ici aussi, il vaut mieux cacher la perpendiculaire pour être sur que le point E appartienne au segment et non à la droite).

Les points animés sont donc:

• C, point du segment [BH] inclus dans la droite (d), qui commande l'équerre: aller dans ses propriétés, onglet algèbre, et régler l'animation sur "une fois (croissant)".
• E, point du segment [DH] inclus dans la perpendiculaire, qui fera le tracé. Même réglage: animation en mode "une fois (croissant)".

Une fois C et E créés, les segments [BH] et [DH] doivent être cachés.

Créer les objets animés

Ils doivent entièrement dépendre du point de commande.

• Pour l'équerre, c'est facile, on s'en tire avec la perpendiculaire à (d) passant par C, des intersections avec des cercles de centre C et de rayon 2 et 3, puis l'outil polygone.
• Pour le crayon, il faut un peu plus de graphisme: on peut pour faire simple se contenter d'un segment défini à l'aide d'un vecteur. Définir F=E+(2,-0.5) et le segment [EF]: ça fera une première version du crayon, qu'on pourra toujours améliorer plus tard.

Une fois les objets créés, cacher les étapes de la construction.

Mettre en place l'animation

L'animation est contrôlée par un entier "step", créé par step=0 dans la zone de saisie. On définit un entier nstep=6 (le nombre d'étapes) et on crée deux boutons:

• "Suivant" avec comme script: step=Reste[step+1,nstep]
• "RAZ" avec comme script: step=0

Ainsi, chaque fois que l'on clique sur suivant, step parcourt la séquence: 0 1 2 3 4 5 0 1 2 3 4 5 0 1 ... (pour nstep=6). Et quand on clique sur RAZ, step est remis à 0. On enrichira ces scripts au fur et à mesure.

On doit alors décider à quelles étapes apparaissent les différents objets.

• la droite (d) et le point A seront présents tout le temps, on les laisse tranquilles.
• L'équerre apparaît aux étapes 1 (positionnement le long de la droite), 2 (elle glisse), 3 (on trace): on lui met comme condition d'affichage:

step >= 1 ^ step <= 3

• Le crayon apparaît de l'étape 1 (placé sur le point) à 3 (tracé): même condition
• La perpendiculaire apparaît à l'étape 4 (on prolonge à la règle le tracé), on lui met comme condition : step==4
• Le pied et l'angle ont pour condition d'affichage: step==5.

Animer

C'est ici que ça devient technique. Au démarrage de l'étape 2, l'équerre doit glisser.

Il faut donc que le bouton "Suivant" détecte l'étape 2 et déclenche l'animation. La difficulté est que le script Geogebra consiste pratiquement en une succession de commandes, mais sans réelle structure de contrôle comme boucle ou test. Or on a besoin de coder le test "si step = 2 alors déclencher animation".

Simuler une structure de contrôle (test)

Une manière de faire est de changer de langage de script pour utiliser l'autre langage proposé, javascript. Pour plusieurs raisons, je préfère éviter: c'est lourd, on rentre dans un véritable langage de programmation mais sans l'environnement de programmation qui va normalement avec. La plupart du temps, on utilise javascript pour les tests et les boucles et on utilise massivement la commande 'ggbApplet.evalCommand( chaine )' qui passe une chaîne de caractères à Geogebra, qui à son tour l'exécute.

Geogebra possède cependant deux commandes qui évoquent ces structures:

• Si[ condition, objet1, objet2 ] est une commande qui renvoie objet1 si la condition est vraie, et objet2 sinon. Mais ce n'est pas utilisable tel quel comme un véritable aiguillage de commandes: objet1 et objet2 doivent être des objets, ils ne peuvent pas être des commandes.
• C'est un peu la même chose pour la commande Séquence[ expression, variable, début, fin] qui va créer une liste d'objets. Exemple : Séquence[ (i,2i) , i, 1, 3 ] crée les la liste de points de coordonnées (1,2), (2,4) et (3,6). Idem, le premier argument ne peut pas être une commande.

L'astuce consiste à utiliser la commande Si avec comme objet, les commandes sous forme de chaîne de caractères. Puis utiliser la commande Exécute[ liste de chaînes ] : Geogebra va alors exécuter la commande résultat du test. Rajouter dans le script du bouton "suivant":

Exécute[ {Si[ step==2 , "StartAnimation[D,true]" ,"ZoomIn[1]"] } ]

Commentaire 1 : les noms de commandes argument de Exécute (donc entre guillemets dans la commande précédente) doivent être en anglais. Ah là là, que c'est dommage. Astuce: toujours avoir la page "commandes" du wiki affichée, trouver sa commande en français, puis changer la langue: on trouve alors tout de suite le nom anglais de la commande.

Commentaire 2 : pourquoi la commande "ZoomIn[1]" (Agrandir[1] en français)? On aurait en effet pu utiliser le test simple SI...ALORS au lieu de ce SI...ALORS...SINON. Cependant, si le test n'est pas satisfait, Si renverra l'objet nul, ce qui fait planter la commande Exécute. Agrandir[1] est bien pratique comme commande qui ne fait pratiquement rien, mais vite (zoom x1 ... mais ça nettoie les traces).

Commentaire 3 : en combinant Exécute et Séquence, on arrive à simuler des boucles. Un bon exercice!

Au démarrage de l'étape 3, c'est le crayon qui bouge. Astuce: activer la trace de l'extrémité E du crayon, ça sera plus visuel. Le principe est le même: rajouter dans le script du bouton "Suivant":

Exécute[ {Si[ step==3 , "StartAnimation[E,true]" ,"ZoomIn[1]"] } ]

Ajuster la remise à zéro

Si on clique sur "RAZ", step est remis à zéro. On peut en profiter pour nettoyer le graphique de la trace du point E, et repositionner équerre et crayon dans leur position initiale. Pour cela, rajouter dans le script du bouton "RAZ" les lignes:

• Agrandir[1] (nettoyage du graphique)
• SoitValeur[C,B] (C est mis dans sa position de départ: B)
• SoitValeur[E,D] (E est mis en D).

Mettre en forme

• Cacher tout ce qui doit l'être.
• Rajouter des textes à chaque étape (condition d'affichage, p.ex. step==2 pour les textes devant s'afficher à l'étape 2).
• Mettre plein de couleurs et des gros traits, ça passe bien mieux une fois projeté. Plus l'animation est jolie, plus il est facile d'accrocher les jeunes élèves.

Et bien, à vous de jouer ! es:Tutorial:Animándose