Tutorial:Animándose
Creando una animación paso a paso
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 0El 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.
Comenzando por el final
La forma más fácil es empezar por ubicar un punto A, una recta d - creada por los puntos M y N que se pueden ocultar. {{OJo|1=Si se desea evitar que la recta sea desplazada, se la puede establecer como Objeto Fijo en la Caja de Diálogo de Propiedades del Objeto que se puede desplegar a partir del Menú Contextual.
Atención: Es conveniente que a los elementos más salientes de la construcción, se les asigne un color llamativo para que sean fácilmente identificables en la Vista Gráfica y en la Algebraica.Los Elementos en Juego
Basta con crear...
- una recta (MN),
- un punto libre A,
- la perpendicular a la recta (MN) que pasa por A y
- su correspondiente pie.
Se procede a editar...
- re-nombrando a la recta (MN) como d
- ocultando los puntos M y N
- identificando el punto - que se llamará H - que es pie de la perpendicular
- dándole entidad al correspondiente ángulo recto para ponerlo claramente en evidencia.
Orden de los Episodios de la Animación
Los dos episodios centrales de la animación serían:
- El deslizamiento de la escuadra... conformando un ángulo recto entre el cateto mayor y el recorrido. Esto requiere un segmento sobre la recta d entre la posición inicial de la escuadra y su posición final, el pie de la perpendicular.
La animación consiste en desplazar el punto de control, en que se esquina la escuadra. - El trazo del lápiz a lo largo del otro cateto de la escuadra... un punto del segmento formado el cateto de la escuadra que guía la perpendicular requerida.
La animación será disparada por tal punto que se desplazará dejando la estela de su trazo activo.
Por tanto, es necesario definir, en el orden adecuado:
- un segmento sobre la recta d sobre el que va a desplazarse la escuadra: el segmento [BH] siendo B un punto de la recta, que se oculta, para dibujarlo.
Cacher alors le segment et afficher la droite à nouveau.
- un punto C en este segmento: el ángulo recto de la escuadra se tiende creando un "nuevo punto" con un clic sobre el segmento [BH].
A continuación, se debe ocultar el segmento y exponer la recta, nuevamente. - las dimensiones de la escuadra: se le asigna una longitud de 2 unidades a uno de los catetos (el que se desplaza sobre la recta d) y 3 al mayor que guiará el trazado de la perpendicular.
- el segmento a trazar: es preciso ubicar un punto D en una posición adecuada para guiar el movimiento de la escuadra.
Conviene ubicar el punto D sobre la perpendicular, a 3 unidades de distancia de su pie. - el punto va a dejar su traza: E será un punto sobre el segmento [DH].Atención: Nuevamente, es mejor ocultar la perpendicular para ubicar el punto E sobre el segmento y no sobre la recta.
Los puntos animados serán, por lo tanto:
- C, punto del segmento [BH] sobre la recta d, que guiará a ña escuadra: en la pestaña Álgebra de la Caja de Diálogo de sus Propiedades, se establecerá su animación con la modalidad Aumentando (Una vez).
- E, punto del segmento [DH] sobre la perpendicular, que guiará el trazo. También se le asignará una animación con la modalidad Aumentando (Una vez).
Una vez creados C y E, se deben ocultar los segmentos [BH] y [DH].
Creando los Objetos Animados
Dependen completamente del punto que los guía:
- 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.
- Para animar a la escuadra, basta con apelar a la Herramienta de Polígono que determine el que se extiende entre los puntos a 2 unidades de distancia de C sobre la recta y 3 en dirección de la perpendicular a la recta que pasa por C.
- El lápiz puede quedar ilustrado con un cuidado dibujo alusivo o esquematizado con un simple vector con estilo de trazo grueso que baste para conformarnos.
Por ejemplo, estableciendo el punto F = E + (2, -0,5) y el segmento [EF] se puede contar con una primera versión del lápiz a mejorar, eventualmente, a posteriori.Atención: Una vez creados los objetos, se deben ocultar las etapas de la construcción.
Rodando la Animación
La animación es controlado por un "paso" conjunto, creado por paso = 0 en el cuadro. Se define toda una npaso = 6 (el número de pasos) y crea dos botones:
"Next" con que el paso script = Rest [paso 1, npaso] "Reset" con que el paso script = 0 Por lo tanto, al hacer clic en el siguiente paso se ejecuta la secuencia: 0 1 2 3 4 5 0 1 2 3 4 5 0 1 ... (Para npaso = 6). Y cuando se hace clic en el reinicio, el paso se pone a 0. Estas secuencias de comandos para enriquecer progresivamente.
Entonces uno debe decidir qué medidas aparecen diferentes objetos.
la derecha (d) y el punto A estará presente todo el tiempo, se quedan solos. El soporte aparece en los pasos 1 (posición a lo largo de la derecha), 2 (se desliza), 3 (en pista): lo ponemos como condición de la visión: paso> = 1 ^ paso <= 3
El lápiz aparece en el paso 1 (que se encuentra en el punto) a 3 (path): misma condición Los ángulos que se muestran en el paso 4 (la norma se extiende a la parcela), que pusieron como condición: paso 4 == El pie y el ángulo de visualización son condicionales: paso == 5.
Rodando la Animación
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.
La animación es controlado por un "paso" conjunto, creado por paso = 0 en el cuadro. Se define toda una npaso = 6 (el número de pasos) y crea dos botones:
"Next" con que el paso script = Rest [paso 1, npaso] "Reset" con que el paso script = 0 Por lo tanto, al hacer clic en el siguiente paso se ejecuta la secuencia: 0 1 2 3 4 5 0 1 2 3 4 5 0 1 ... (Para npaso = 6). Y cuando se hace clic en el reinicio, el paso se pone a 0. Estas secuencias de comandos para enriquecer progresivamente.
Entonces uno debe decidir qué medidas aparecen diferentes objetos.
la derecha (d) y el punto A estará presente todo el tiempo, se quedan solos. El soporte aparece en los pasos 1 (posición a lo largo de la derecha), 2 (se desliza), 3 (en pista): lo ponemos como condición de la visión: paso> = 1 ^ paso <= 3
El lápiz aparece en el paso 1 (que se encuentra en el punto) a 3 (path): misma condición Los ángulos que se muestran en el paso 4 (la norma se extiende a la parcela), que pusieron como condición: paso 4 == El pie y el ángulo de visualización son condicionales: paso == 5.
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.
