Introducción a la animación (Versión en video)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Hay varias maneras de hacer que algo se vea animado,

Pero el principio básico es el mismo.

Si tomas un conjunto de fotos

en la que cada una es sólo un poco diferente de la anterior

y te mueves entre ellas lo mas rápido posible

se verá como si tu dibujo se estuviera moviendo.

Allá en los viejos tiempos estos dibujos se hacían a mano,

y se tardaban mucho tiempo en hacer 3 segundos de animación.

Afortunadamente, vivimos en el futuro.

Es muy fácil hacer una animación sencilla con código.

¡Y les mostraré como!

A la derecha ves un carrito hermoso y un color de fondo amarillo encantador.

Y sí, yo diseñe este carrito, gracias.

Bueno, aquí arriba ves que estamos configurando este bello color de fondo

Y el carro no tiene ningún contorno, porque estamos llamando a esta función "noStroke()".

Y aquí estamos haciendo esta nueva variable "x", que es la posición del carro y le asignamos el valor 10.

y puedes ver que si cambiamos el valor

entonces el carro se mueve hacia atrás y hacia adelante.

Lo vamos a traer hasta 10.

Y luego aquí estamos estableciendo el color de relleno del carro

y dibujando dos rectángulos para la carrocería.

Así que este primer rectángulo es para la parte de abajo,

y este rectángulo es para la parte superior.

Y entonces aquí estamos haciendo lo mismo con las ruedas.

Establecemos el color de relleno y dibujamos dos elipses.

Una en "x + 25",

y en "x + 75".

Y finalmente llegamos a las cosas nuevas.

A esto que está aquí le llamamos definición de una función.

Tú lo aprenderás más adelante.

Así que por ahora basta con memorizar lo que tenemos aquí.

Las cosas importantes en que debes poner atención son: esta palabra 'draw' y estas llaves.

Esta de aquí es la llave de apertura.

Y esta es la llave de cierre.

Todo esto es lo que llamamos el ciclo "draw", o el ciclo de animación.

Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rápido.

Es por eso que se llama ciclo.

Y entonces todo lo que está fuera de estas llaves se ejecuta sólo una vez al comienzo del programa.

Así que el primer paso de la animación es poner todo el código dentro de las llaves

Para que las imágenes se repitan una y otra vez.

Así que vamos a hacer eso.

Lo que haré será jalar todo el código del dibujo,

y lo pondré aquí abajo dentro del ciclo.

Y para recordarme que este bloque del código va dentro de estas llaves,

voy a indentar todo esto, seleccionándolo y presionando la tecla "Tab".

Y ahora sé que todo este código está dentro de las llaves.

Pero podrías decir que todo esto está exactamente igual,

nada ha cambiado.

Porque la primera vez que se ejecuta el ciclo "draw",

la computadora va a decir: "Ok, haz una nueva variable 'x',

asígnale el valor 10, dibuja dos rectángulos,

y dibuja dos elipses".

Y luego se va a ir otra vez hasta arriba,

y va a decir:

"Haz una nueva variable 'x', configúrala con el valor 10,

dibuja dos rectángulos, dibujar dos elipses"

Y luego, '" haz una nueva variable "x", configúrala con el valor 10,

exactamente lo mismo.

No ha cambiado nada, claro, no vamos a ver ninguna animación.

Y es que dibuja los rectángulos y elipses encima de los anteriores.

Recuerda lo que dijimos: si queremos hacer algo que parezca animado,

necesitamos cambiar el dibujo un poquito cada vez.

Entonces si quiero que mi carro avance,

debería cambiar el valor de esta variable "x", ¿cierto?

Sí, sólo déjame igualarla a 11.

¡Ah! ¡No! Pero ahora ésta sólo va a ser 11 cada vez.

¿Cómo rayos se supone que voy a hacer para que el valor de "x" esté cambiando,

cuando la computadora ejecuta el mismo código una y otra vez?

Ok, observen este truco de magia.

Recuerden, esta instrucción "var x" crea una nueva variable.

Cuando la tenemos dentro de un ciclo "draw" como éste,

crea una nueva variable "x" cada vez.

Lo que tenemos que hacer es crear esta variable fuera del ciclo "draw".

De esa manera sólo la creará una vez.

Y luego, cada vez que la computadora ejecute este código y vea la variable "x",

va a volver a utilizar la misma variable que antes, usando el último valor que le asignamos.

Así que sólo voy a hacer eso, voy a tomar esta variable,

y la vamos a crear fuera del ciclo "draw".

Así que ahora sólo la está creando una sola vez.

Y cada vez que pase por esta variable "x",

va a usar nuevamente esta misma variable.

Y en este momento, el último valor que le asignamos fue 11,

entonces siempre va a ser 11.

Y aquí es donde entra la magia .

En algún lugar del ciclo "draw", vamos a cambiar el valor de "x",

para que sea un poco más grande que lo que solía ser, como esto:

a "x" le asignamos el valor anterior de "x", más 1.

¡Sí! ¡Está funcionando!

Excepto que se ve tan grotesco.

Y si te estás preguntando por qué se ve de esa manera,

es porque nos olvidamos de dibujar el fondo en el interior del ciclo "draw".

Así que está dibujando el carro una y otra vez,

pero se puede ver todos los coches viejos por debajo del nuevo.

Así que si jalo esta línea a la parte superior del ciclo "draw",

y luego presiono "Restart" para que pueda ver mi carro de nuevo,

¡Sí! ¡Es perfecto!

Y si queremos hacer que el carro vaya más rápido,

sólo debemos cambiar la cantidad en que aumentamos "x" cada vez.

Así que si lo hacemos 10, ¡uuh! ¡se sale de la pantalla!

Incluso puedo hacer que sea negativo, así que "x - 10" y,

¡Aquí viene!

Lo hacemos positivo de nuevo, ¡woo!

¡Ahí va!

Así que aquí están las cosas importantes para recordar:

Esto que tenemos aquí se llama el ciclo "draw".

Deben poner su código de dibujo dentro de este ciclo,

para que sea ejecutado una y otra vez.

Y luego, van a querer crear una variable fuera del ciclo "draw".

Es super importante crear la variable fuera del ciclo "draw",

para que puedan usar la misma variable cada vez.

Luego, dentro del ciclo "draw", justo aquí

vamos a cambiar la variable un poco,

por lo general la vamos a igualar a su valor anterior,

más algún número, más o menos algún número.

Y por último, van a querer usar su variable en algún lugar de su código de dibujo

para que su dibujo se vea diferente cada vez.

Y, ¡eso es todo!