Revisión actual del 21:28 12 ago 2020

Creando una animación paso a paso

Objetivos

El propósito de este tutorial es mostrar técnicas básicas para crear una construcción a animarse paso a paso
Se ha elegido un ejemplo simple que muestra las etapas del trazado de una perpendicular a una recta que pasa por un punto^{modelo en francés]}
Se muestra el deslizamiento de la escuadra hacia la derecha, apoyada en la regla que coincide con la recta.
El desplazamiento se detiene cuando el perfil de la escuadra coincide 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 guion (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 se debe ir observando. La explicación animada se desenvuelve en seis etapas que se corresponden a los pasos que van del 0 al 5^{modelo en francés]}.

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

Paso 0 (inicio) La recta d y punto A
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.
Paso 2 La escuadra deslizándose a lo largo de la recta hasta que se apoya sobre el punto A.
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
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
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.

Atención: Si se desea evitar que la recta sea desplazada, se la puede establecer como Objeto Fijo en el Cuadro de Propiedades del Objeto que se puede desplegar a partir del Menú Contextual.

Idea: Asignarle a los elementos más salientes de la construcción un color lo llamativo facilita su identificación en la

Vista Gráfica y en la

Vista 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^{modelo en francés]} 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.
un punto C en este segmento: el ángulo recto de la escuadra se tiende creando un "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 la escuadra: en la pestaña Álgebra del Cuadro de Propiedades 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

Todos estos objetos dependen completamente del punto que los guía:

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 será orquestada por un conjunto de "pasos", seis en este caso^{modelo en francès]}.
Bastará con determinar...

un deslizador denominado, por ejemplo, etapa. Será un entero de un rango entre 0 y 5 que se incrementa de 1 en 1
un entero, etapas = 6

... para acompasar el desenvolvimiento de los episodios.
Será necesario crear dos botones:

"Siguiente" cuyo guion (script) será:
paso=Resto(etapa+1, etapas)
"Reinicio" cuyo guion (script) será, básicamente el que fije el paso a cero:
paso=0

Por lo tanto...

un clic en el botón Siguiente irá fijando el paso que ejecutará la secuencia de episodios: 0 1 2 3 4 5 0 1 2 3 4 5 0 1 ...

Atención: Si el tope es 6, después del 5 se pasa a 0, como puede observarse.

un clic en el botón Reinicio nos remitirá al paso 0, el de partida.

Lo que debe decidirse es, en definitiva, es qué objetos aparecerán según el valor del paso y con qué medidas y condiciones^{modelo en francés]}.

La recta d y el punto A estarán presentes permanentemente.
La escuadra, aparecerá para los pasos: 1 (posición a lo largo de la recta), 2 (deslizada), 3 (al pie).
Lo que se pone como condición para que quede expuesta será paso >= 1 ^ paso <= 3
El lápiz aparece desde el paso 1 (ubicado en el punto de partida) al 3 (trazo).
Por lo tanto, se establece la misma condición
La perpendicular aparece en el paso número 4 (como prolongación del trazo) por lo que la condición será:
paso == 4
El pie de la perpendicular y el ángulo recto establecido, aparecerán en el paso número 5 por lo que la condición será paso == 5.

Animar

En el rodaje se pone en juego la técnica.
Al iniciarse el segundo paso, la escuadra debe deslizarse.
Esto requiere que el botón "Siguiente" detecte que se pasa al paso 2 y se active la animación.

El problema es que el guion o script de GeoGebra consiste, prácticamente, de una sucesión de comandos pero no hay una estructura de control real como la de un bucle o la de una condición de prueba para la acción.

Por lo tanto, es preciso sumar a lo establecido un modo de codificar la prueba que establezca que...
"si paso == 2", se "active la animación".

Simular una Estructura de Control (Test)

Una forma de hacerlo es cambiar el lenguaje de programación del guion o script.
El propuesto para tal fin en primer lugar es el de JavaScript.
Por varias razones es, sin embargo, preferible evitarlo: es pesado y mucho más lento que un lenguaje real como el C + +.
Como es el lenguaje integrado al entorno de GeoGebra, la mayoría de las veces, se utiliza javascript para las pruebas y los bucles apelando al comando ggbApplet.evalCommand (cadena de caracteres) que a su vez le pasa la cadena de caracteres a GeoGebra para su ejecución (test).
De hecho, GeoGebra tiene dos comandos que evocan estas estructuras:

Si(condición, objeto_1, objeto_2) es un comando que devuelve el objeto_1 si la condición es verdadera y el objeto_2 en caso contrario.
Pese a su estructura de aparente control, no implica una verdadera conmutación de comandos sino de objetos resultantes.
Secuencia(expresión variable, inicio, fin)
Es casi lo mismo que desencadena el comando Secuencia que opera con la siguiente sintaxis:

Secuencia(expresión variable, inicio, fin) que origina una lista de objetos.

Ejemplo:
Secuencia((i, 2i), i, 1, 3) crea una lista de puntos de coordenadas (1,2), (2,4) y (3,6).
De modo similar al comando Si, su primer argumento no puede ser un comando.

El truco es emplear el comando Si para condicionar la cadena de caracteres que pasará a ser el argumento del comando Ejecuta como...
Ejecuta(cadena de caracteres que opera como argumento)
GeoGebra, de este modo, podrá ejecutar el comando devenido del resultado de la prueba condicional (test).

Bastará, entonces, con añadir en el guion de botón Siguiente:
Ejecuta({Si(paso == 2, "StartAnimation(D, true)", "ZoomIn (1)")})

Atención: Los nombres de los comandos que integren la lista de comandos de Ejecuta deben estar anotados en inglés.

Nota: El comando IniciaAnimación es el que se referencia en el ejemplo en inglés como StartAnimation

Comentarios Animados

Comentario 1: Lamentablemente, solo se admiten comandos en inglés en la lista que opere como argumento de Ejecuta.
Este obstáculo se puede sortear sea...

apelando a la página wiki en Español para buscar cada comando necesario y cambiar a continuación el idioma para copiar el que le corresponde en inglés
anotando un ejemplo de empleo del comando en Español y cambiar el idioma en el menú de Opciones para copiar el que le corresponde en inglés antes de reponer la opción del Español

Comentario 2: El rol del ZoomAcerca anotado necesariamente como "ZoomIn(1)" es el de evitar una salida nula en caso de no tener resultado positivo la prueba condicional del Si.
Justamente ZoomAcerca(1) (anotado necesariamente como "ZoomIn(1)") es conveniente para operar con agilidad y casi sin efectos, como alternativa superadora de la salida nula que complicaría el desenvolvimiento de Ejecuta.

Atención: ZoomAcerca(1) (anotado necesariamente como "ZoomIn[1]" para operar como argumento de Ejecuta) es conveniente dado que, sin ampliarla en tanto el factor es 1, limpia los rastros de la

Vista Gráfica y eventualmente le actualiza algo de lo asentado aleatoriamente, como todo efecto práctico.

Nota:
Para ilustrar la posibilidad de emplear un

botón para activar el comando [[::Categoría:Objetos_de_Acción#Comando ZoomAcerca|ZoomAcerca]] y limpiar rastros en un boceto, ver la aplicación detallada en el tutorial Escenarios de Análisis

Comentario 3: Las adecuadas combinaciones entre Ejecuta y Secuencia así como, eventualmente el comando Elemento, operan como sucedáneos de esos bucles condicionados de un modo ingenioso.
Así, bastará con incluir en el guion o script del botón Siguiente la composición apropiada para lograr que, al iniciarse el tercer paso, se desencadene un episodio animado en que el lápiz cobra movimiento:

Ejecuta({If(paso==3, "StartAnimation(E, true)" ,"ZoomIn(1)")} )

Atención: Es importante, para enfatizar el efecto visual, activar el rastro del punto extremo E del lápiz.
El principio es el mismo: añadir en la secuencia de comandos de botón Siguiente el pertinente para lograrlo:

Rastro( <Objeto>, <Booleana> )

... vinculando la condición booleana a que el paso sea el que corresponda para que el objeto E tenga disponible o no esta alternativa.

Ajustar el Reinicio

Un clic sobre el botón de Reinicio debe restablecer el paso a cero - 0-. Es conveniente aprovechar la oportunidad para...

limpiar rastros (borrar las huellas gráficas del punto E así como inhabilitarse el Rastro)
cambiar la ubicación de la escuadra y la del lápiz que debe volver a su posición original

Para lograrlo, se deben añadir las líneas pertinentes al guion asociado al botón de Reinicio:

ZoomAcerca(1) para limpiar y actualizar la Vista Gráfica
Valor(C, B) (C se re-ubica en su posición de partida, la de B)
Valor(E, D) (E se re-coloca en D).

Puesta en Forma

Es importante recordar algunos detalles de forma para que la animación resulte prolija. Por lo pronto...

Ocultar todo lo que no debe ser visible
Añadir el texto explicativo acorde a cada etapa, asociado a las condiciones correspondientes. Por ejemplo, paso == 2 para el texto descriptivo del segundo episodio.
Asignar los colores adecuados y el grosor de trazos apropiado así como la medida de tipografía conveniente para que la proyección sea nítida, clara y atractiva al mismo tiempo.

Alternativas Animadas

Siguiendo los criterios de producción de esta animación de nivel primario^{modelo en francés]}, se pueden elaborar las que expliquen dinámicamente técnicas avanzadas destinadas a estudiantes de escolaridad media o a universitarios.

Por ejemplo, el método de Newton-Raphson, el Regula Falsi u otros iterativos.

Solo se requiere dedicación, paciencia y una cuota de recomendado...

¡entusiasmo creativo!

Desencadenando Animaciones

En la siguiente aplicación dinámica se puede disfrutar de los resultados de dar Animación Automática a uno y/u otro deslizador para intentar, además, descubrir cuáles son los efectos que se producen en el espirógrafo modelado.

Nota: Para desencadenar o detener la Animación Automática de cada deslizador, basta con apuntarlo y pulsar el botón derecho del ratón o mouse y (des)tildar la alternativa correspondiente en el menú contextual emergente.

El desafío resulta más interesante cuando se intenta descubrir el rol de cada deslizador sobre el diseño resultante y/o se procura encontrar el modo de obtener determinado número de espiras internas o externas asignando el valor adecuado a cada uno de ellos.

Animaciones

Variantes Animadas

GeoGebra además de la variación animada (incluso simultánea) del valor de números y/o ángulos libres asociándolos a un deslizador, permite también la de puntos dependientes a lo largo del recorrido al que pertenezcan, sean segmentos, rectas, funciones, curvas, etc.

Animación Automática

Para animarlos automáticamente, los números y/o ángulos libres deben aparecer como deslizadores en la Vista Gráfica.
Para proceder a una animación - sea de números y/o ángulos libres o de puntos dependientes -, basta un clic derecho (para Mac OS: Ctrl-clic) sobre el número, ángulo o punto para seleccionar y tildar la opción de Animación en el emergente Menú Contextual.
Para detener la animación, es preciso destildar la opción de Animación del mismo Menú Contextual.

Nota: Después de animar a un número y/o ángulo libre o a un punto dependiente, aparecerá un botón de animación en la esquina inferior izquierda de la

Vista Gráfica.
Esto permite, ya sea pausar

o

continuar una animación.

En el Cuadro de Propiedades en la pestaña correspondiente a Deslizador es posible modificar el comportamiento de la animación en relación, por ejemplo, a su...

- Velocidad

Nota: Fijarla a 1 implica que demandará 10 segundos el recorrido completo a través del intervalo cubierto por el deslizador.

- Régimen del Ciclo
⇔ Oscilante: El ciclo de animación alterna entre un régimen Decreciente y uno Creciente.
⇒ Creciente: El valor del deslizador es siempre creciente cuando se decide el Incremento . De modo que, al llegar a su máximo valor, retorna al mínimo inicial para proseguir con la animación.
⇐ Decreciente: El valor del deslizador es siempre decreciente cuando se decide el Decremento . De modo que, al llegar a su mínimo valor, retorna al máximo para proseguir con la animación.
⇒ Una vez (creciente): La animación se desarrolla mientras crecen los valores del deslizador.
Una vez que se llega al máximo, se detiene.

Nota: Mientras la animación automática está activa, GeoGebra permanece completamente funcional. Esto permite hacer cambios en la construcción entre tanto.

Animación Manual

Para modificar manualmente, de forma continua un número o ángulo, basta seleccionar la herramienta Elige y Mueve y hacer clic sobre un número o ángulo libre y pulsar o + o - o las teclas flechas.
Un clic sobre un número o ángulo libre o sobre un punto dependiente, produce así, manualmente, un efecto de animación al mantener permanentemente, una de estas teclas, pulsada.

Ejemplo: Si las coordenadas de un punto dependen de un número k como en P = (2 k, k), el punto se desplazará a lo largo de una recta si k se modifica continuamente.

Nota: Con las teclas-flecha puede desplazarse cualquier objeto libre empleando la herramienta

Elige y Mueve

Teclas de Atajo

Shift + ↑ establece cambios de a 0.1 unidades
Ctrl + ↑ establece cambios de a 10 unidades
Alt + ↑ establece cambios de ancho de 100 unidades

Nota:
También se puede mover cualquier punto a lo largo de una recta, empleando la tecla + o –.

Diferencia entre revisiones de «Tutorial:Animándose»