0:00:00.746,0:00:03.033
Hay varias maneras de hacer que algo se vea animado,

0:00:03.033,0:00:05.233
Pero el principio básico es el mismo.

0:00:05.243,0:00:07.133
Si tomas un conjunto de fotos

0:00:07.133,0:00:09.733
en la que cada una es sólo un poco diferente de la anterior

0:00:09.733,0:00:11.463
y te mueves entre ellas lo mas rápido posible

0:00:11.463,0:00:13.273
se verá como si tu dibujo se estuviera moviendo.

0:00:13.273,0:00:16.173
Allá en los viejos tiempos estos dibujos se hacían a mano,

0:00:16.173,0:00:19.626
y se tardaban mucho tiempo en hacer 3 segundos de animación.

0:00:19.633,0:00:22.626
Afortunadamente, vivimos en el futuro.

0:00:22.626,0:00:26.056
Es muy fácil hacer una animación sencilla con código.

0:00:26.056,0:00:27.735
¡Y les mostraré como!

0:00:27.735,0:00:31.344
A la derecha ves un carrito hermoso y un color de fondo amarillo encantador.

0:00:31.344,0:00:34.273
Y sí, yo diseñe este carrito, gracias.

0:00:34.273,0:00:38.263
Bueno, aquí arriba ves que estamos configurando este bello color de fondo

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

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

0:00:47.427,0:00:49.441
y puedes ver que si cambiamos el valor

0:00:49.441,0:00:51.623
entonces el carro se mueve hacia atrás y hacia adelante.

0:00:51.623,0:00:53.103
Lo vamos a traer hasta 10.

0:00:53.103,0:00:55.213
Y luego aquí estamos estableciendo el color de relleno del carro

0:00:55.213,0:00:57.603
y dibujando dos rectángulos para la carrocería.

0:00:57.603,0:01:00.073
Así que este primer rectángulo es para la parte de abajo,

0:01:00.073,0:01:02.373
y este rectángulo es para la parte superior.

0:01:02.401,0:01:04.900
Y entonces aquí estamos haciendo lo mismo con las ruedas.

0:01:04.900,0:01:06.971
Establecemos el color de relleno y dibujamos dos elipses.

0:01:06.971,0:01:08.431
Una en "x + 25",

0:01:08.449,0:01:10.077
y en "x + 75".

0:01:10.077,0:01:12.527
Y finalmente llegamos a las cosas nuevas.

0:01:12.532,0:01:15.002
A esto que está aquí le llamamos definición de una función.

0:01:15.002,0:01:16.692
Tú lo aprenderás más adelante.

0:01:16.692,0:01:19.332
Así que por ahora basta con memorizar lo que tenemos aquí.

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

0:01:24.142,0:01:25.412
Esta de aquí es la llave de apertura.

0:01:25.412,0:01:26.762
Y esta es la llave de cierre.

0:01:26.762,0:01:29.956
Todo esto es lo que llamamos el ciclo "draw", o el ciclo de animación.

0:01:29.956,0:01:34.910
Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rápido.

0:01:34.910,0:01:36.340
Es por eso que se llama ciclo.

0:01:36.360,0:01:41.420
Y entonces todo lo que está fuera de estas llaves se ejecuta sólo una vez al comienzo del programa.

0:01:41.420,0:01:45.160
Así que el primer paso de la animación es poner todo el código dentro de las llaves

0:01:45.160,0:01:47.490
Para que las imágenes se repitan una y otra vez.

0:01:47.490,0:01:48.490
Así que vamos a hacer eso.

0:01:48.490,0:01:51.290
Lo que haré será jalar todo el código del dibujo,

0:01:51.290,0:01:53.740
y lo pondré aquí abajo dentro del ciclo.

0:01:53.863,0:01:58.223
Y para recordarme que este bloque del código va dentro de estas llaves,

0:01:58.223,0:02:02.193
voy a indentar todo esto, seleccionándolo y presionando la tecla "Tab".

0:02:02.193,0:02:05.363
Y ahora sé que todo este código está dentro de las llaves.

0:02:05.424,0:02:08.797
Pero podrías decir que todo esto está exactamente igual,

0:02:08.797,0:02:10.157
nada ha cambiado.

0:02:10.157,0:02:12.177
Porque la primera vez que se ejecuta el ciclo "draw",

0:02:12.177,0:02:14.617
la computadora va a decir: "Ok, haz una nueva variable 'x',

0:02:14.617,0:02:16.467
asígnale el valor 10, dibuja dos rectángulos,

0:02:16.467,0:02:17.667
y dibuja dos elipses".

0:02:17.667,0:02:19.087
Y luego se va a ir otra vez hasta arriba,

0:02:19.087,0:02:19.957
y va a decir:

0:02:19.957,0:02:21.787
"Haz una nueva variable 'x', configúrala con el valor 10,

0:02:21.787,0:02:24.187
dibuja dos rectángulos, dibujar dos elipses"

0:02:24.187,0:02:26.587
Y luego, '" haz una nueva variable "x", configúrala con el valor 10,

0:02:26.587,0:02:27.757
exactamente lo mismo.

0:02:27.757,0:02:31.017
No ha cambiado nada, claro, no vamos a ver ninguna animación.

0:02:31.030,0:02:34.610
Y es que dibuja los rectángulos y elipses encima de los anteriores.

0:02:34.610,0:02:37.305
Recuerda lo que dijimos: si queremos hacer algo que parezca animado,

0:02:37.305,0:02:40.105
necesitamos cambiar el dibujo un poquito cada vez.

0:02:40.105,0:02:42.575
Entonces si quiero que mi carro avance,

0:02:42.575,0:02:45.165
debería cambiar el valor de esta variable "x", ¿cierto?

0:02:45.165,0:02:47.715
Sí, sólo déjame igualarla a 11.

0:02:47.715,0:02:50.996
¡Ah! ¡No! Pero ahora ésta sólo va a ser 11 cada vez.

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

0:02:54.413,0:02:57.413
cuando la computadora ejecuta el mismo código una y otra vez?

0:02:57.413,0:02:59.403
Ok, observen este truco de magia.

0:02:59.403,0:03:02.556
Recuerden, esta instrucción "var x" crea una nueva variable.

0:03:02.556,0:03:04.570
Cuando la tenemos dentro de un ciclo "draw" como éste,

0:03:04.570,0:03:08.110
crea una nueva variable "x" cada vez.

0:03:08.110,0:03:10.863
Lo que tenemos que hacer es crear esta variable fuera del ciclo "draw".

0:03:10.863,0:03:13.343
De esa manera sólo la creará una vez.

0:03:13.343,0:03:17.569
Y luego, cada vez que la computadora ejecute este código y vea la variable "x",

0:03:17.569,0:03:22.729
va a volver a utilizar la misma variable que antes, usando el último valor que le asignamos.

0:03:22.729,0:03:25.259
Así que sólo voy a hacer eso, voy a tomar esta variable,

0:03:25.259,0:03:27.109
y la vamos a crear fuera del ciclo "draw".

0:03:27.109,0:03:30.869
Así que ahora sólo la está creando una sola vez.

0:03:30.869,0:03:33.240
Y cada vez que pase por esta variable "x",

0:03:33.240,0:03:35.280
va a usar nuevamente esta misma variable.

0:03:35.280,0:03:37.820
Y en este momento, el último valor que le asignamos fue 11,

0:03:37.820,0:03:39.270
entonces siempre va a ser 11.

0:03:39.270,0:03:41.517
Y aquí es donde entra la magia .

0:03:41.517,0:03:44.435
En algún lugar del ciclo "draw", vamos a cambiar el valor de "x",

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

0:03:47.205,0:03:52.885
a "x" le asignamos el valor anterior de "x", más 1.

0:03:52.885,0:03:54.825
¡Sí! ¡Está funcionando!

0:03:54.825,0:03:57.006
Excepto que se ve tan grotesco.

0:03:57.006,0:03:58.946
Y si te estás preguntando por qué se ve de esa manera,

0:03:58.946,0:04:02.436
es porque nos olvidamos de dibujar el fondo en el interior del ciclo "draw".

0:04:02.436,0:04:04.556
Así que está dibujando el carro una y otra vez,

0:04:04.556,0:04:06.846
pero se puede ver todos los coches viejos por debajo del nuevo.

0:04:06.846,0:04:11.696
Así que si jalo esta línea a la parte superior del ciclo "draw",

0:04:11.696,0:04:15.764
y luego presiono "Restart" para que pueda ver mi carro de nuevo,

0:04:15.764,0:04:18.030
¡Sí! ¡Es perfecto!

0:04:18.030,0:04:19.603
Y si queremos hacer que el carro vaya más rápido,

0:04:19.603,0:04:22.064
sólo debemos cambiar la cantidad en que aumentamos "x" cada vez.

0:04:22.064,0:04:25.064
Así que si lo hacemos 10, ¡uuh! ¡se sale de la pantalla!

0:04:25.064,0:04:28.504
Incluso puedo hacer que sea negativo, así que "x - 10" y,

0:04:28.504,0:04:30.090
¡Aquí viene!

0:04:30.090,0:04:33.320
Lo hacemos positivo de nuevo, ¡woo!

0:04:33.320,0:04:34.517
¡Ahí va!

0:04:34.517,0:04:36.567
Así que aquí están las cosas importantes para recordar:

0:04:36.567,0:04:39.558
Esto que tenemos aquí se llama el ciclo "draw".

0:04:39.558,0:04:41.418
Deben poner su código de dibujo dentro de este ciclo,

0:04:41.418,0:04:43.568
para que sea ejecutado una y otra vez.

0:04:43.568,0:04:46.508
Y luego, van a querer crear una variable fuera del ciclo "draw".

0:04:46.508,0:04:49.378
Es super importante crear la variable fuera del ciclo "draw",

0:04:49.378,0:04:51.838
para que puedan usar la misma variable cada vez.

0:04:51.838,0:04:52.838
Luego, dentro del ciclo "draw", justo aquí

0:04:52.838,0:04:55.747
vamos a cambiar la variable un poco,

0:04:55.747,0:04:58.687
por lo general la vamos a igualar a su valor anterior,

0:04:58.687,0:05:02.137
más algún número, más o menos algún número.

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

0:05:05.120,0:05:08.120
para que su dibujo se vea diferente cada vez.

0:05:08.120,0:05:09.880
Y, ¡eso es todo!