Tutorial:Animándose

Tutorial: Animándose con GeoGebra

Lista de Tutoriales

Objetivos

El propósito de este tutorial es proporcionar las técnicas básicas para crear una animación, paso a paso, de una construcción.
Se ha elegido un ejemplo simple que muestra las etapas del trazado de una perpendicular a una recta que pasa por un punto.
Se muestra la técnica de deslizamiento de la escuadra hacia la derecha, apoyándose en regla que coincide con la recta.
El desplazamiento se detiene cuando coincide el perfil de la escuadra con el punto donde está esperando el lápiz.
Entonces se realiza el trazo.
¡Ahora, pasemos a animarnos con la obra!

Las siguientes son las etapas que cubre este tutorial:
1 El empleo del condicional para establecer qué elementos de la construcción se exponen en cada paso
2 El uso de los botones para desencadenar un guión (o script) de una secuencia de comandos que llevan de una etapa a otra, en acciones desencadenadas...
- a partir de ciertos cambios registrados en las medidas
- acorde a un valor que se determina para iniciar la animación.

La Estructura de la Animación

Este es un escenario explicativo para describirles a los estudiantes el mecanismo, paso a paso, que permite trazar una perpendicular a una recta d que pasa por un punto exterior A. Quienes están procurando aprender la técnica en juego, puede decidir lo que quiere ir observando. La explicación animada se desenvuelve en seis etapas que se corresponden a los pasos que van del 0 al 5.

Atención: Más adelante se indicará el por qué de empezar por el 0

El paso de cada etapa

Se describe qué se expone en cada paso

• 1 Paso 0: (inicio) La recta d y punto A
• 2 Paso 1: La escuadra a la derecha del punto A sobre la regla que, alineada a la recta d, le da soporte a lo largo de la recta y el lápiz apuntando al punto A.
• 3 Paso 2: La escuadra deslizándose a lo largo de la recta hasta que se apoya sobre el punto A.
• 4 Paso 3: Un trazo guiado por la escuadra que parte de su vértice superior, el extremo opuesto al que hace esquina con la recta
• 5 Paso 4: La prolongación del trazo que se desenvuelve siguiendo el cateto derecho de la escuadra desde su vértice inferior en el que coincide con la recta d, ascendiendo hacia el punto A
• 6 Paso 5: Culminación en el pie de la perpendicular que se corresponde con vértice inferior de la escuadra en que hace esquina con la recta d hasta identificar adecuada y visualmente el correspondiente ángulo recto resultante.

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.
• le point que va tracer: 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 "à la C++" 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 ! fr:Tutoriel:Animation pas à pas d'une construction géométrique simple avec boutons et scripts.