0:00:01.106,0:00:02.703
Hay varias maneras de hacer que algo se vea animado,

0:00:03.193,0:00:05.233
Pero el principio basico 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 solo un poco diferente a la primera

0:00:09.733,0:00:11.463
y moverte entre ellas lo mas rapido posible

0:00:11.463,0:00:13.273
se vera como si tu dibijo se estuviera moviendo

0:00:13.273,0:00:15.893
Alla en los viejos tiempos,se hacian estos dibijos a mano.

0:00:16.166,0:00:19.626
y se tardaban tanto tiempo en hacer 3 segunods de animacion.

0:00:19.703,0:00:22.113
Agraciadamente, vivimos en el futuro.

0:00:22.826,0:00:25.776
Es bien facil hacer una animacion sencilla haciendolo con codigos.

0:00:26.126,0:00:27.516
Y les mostraré como!

0:00:27.785,0:00:30.995
A la derecha ves un carrito hermoso y un trasfondo amarillo encantador

0:00:31.474,0:00:34.294
y si, si yo diseñe este carrito, gracias.

0:00:34.933,0:00:38.113
Bueno, aqui ves en este bellos trasfondo

0:00:38.570,0:00:42.080
Y el coche no tiene ningún contornos, por lo que estamos llamando a esta función noStroke ().

0:00:42.518,0:00:47.248
y aqui en la variable de "x" le damos la posicion de 10

0:00:47.467,0:00:49.441
y cambiamos el valor

0:00:49.441,0:00:51.371
y hace que el carro se mueva de atras adelante.

0:00:51.863,0:00:52.803
Traelo hasta el 10

0:00:53.516,0:00:57.406
Y entonces aquí estamos estableciendo el color de relleno del coche y dibujando dos rectángulos de la carrocería del coche.

0:00:57.603,0:01:00.073
Así, parece que este primer rectángulo es para el fondo

0:01:00.073,0:01:01.853
Y este rectángulo es para la parte superior.

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

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

0:01:06.971,0:01:08.431
Uno en x 25

0:01:08.629,0:01:10.099
Y en x + 75

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

0:01:12.672,0:01:15.002
Esta cosa aquí se llama 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 aqui.

0:01:19.332,0:01:23.392
Las cosas importantes que anotar son esta palabra 'draw' y estas llaves.

0:01:24.142,0:01:25.042
Esta llave de apertura aqui.

0:01:25.062,0:01:26.092
Y esta llave de cierre aqui.

0:01:26.746,0:01:29.956
Todo esto es lo que llamamos el draw loop, o el bucle de animación.

0:01:29.956,0:01:34.916
Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rapido

0:01:35.000,0:01:36.340
Es por eso que se llama bucle

0:01:36.480,0:01:41.470
Y entonces todo lo que este fuera de estas llaves se ejecuta solo una ves al comienzo del programa.

0:01:41.520,0:01:45.090
Asi que el primer paso de la animación es poner todo el codigo dentro de las llaves

0:01:45.300,0:01:47.510
Para que las imagenes se repitan una y otra vez.

0:01:47.600,0:01:51.290
Asi que vamos a hacer eso. Lo que are sera mover todo el codigo del dibujo.

0:01:51.290,0:01:53.470
Y plop hacia abajo dentro de mi bucle

0:01:53.863,0:02:01.453
Y para recordarme que este bloque del código va dentro de estas llaves, voy a sangrar o separar todo esto seleccionando todo y presiono "tab"

0:02:02.193,0:02:05.363
Y ahora se que todo este codigo esta dentro de las llaves

0:02:05.754,0:02:09.754
Pero tu dirás, todo esto esta exactamente lo mismo, nada ha cambiado.

0:02:10.157,0:02:17.477
Debido a que es la primera vez que se ejecuta el bucle draw, 'está bien? , vamos a hacer una nueva variable x, ajústelo a 10, dibujar dos ellipsis

0:02:17.477,0:02:24.187
Y luego se va a ir todo el camino de regreso a la cima y decir, 'hacer una nueva variable x, ajústelo a 10, dibuja dos , dibujar dos circulos

0:02:24.187,0:02:28.177
Y luego, 'hacer una nueva variable x, establézcalo en 10, dibujar su re...' Exactamente lo mismo

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

0:02:31.030,0:02:34.150
Y es que dibuja los rectangulos y circulos encima de los anteriores.

0:02:34.606,0:02:39.806
Recuerda lo que dijimos: si queremos hacer algo parecer animado, tenemos que cambiar el dibujo un poquito a la vez.

0:02:40.305,0:02:42.055
Si quiero que mi coche avance

0:02:42.565,0:02:45.165
Yo debería cambiar el valor de esta variable x, verdad?

0:02:45.165,0:02:47.245
SI, justo como lo hace... 11

0:02:47.696,0:02:50.846
¡¡Ah!! ¡¡No!! Pero ahora esto sólo va a ser 11 solo una vez.

0:02:50.979,0:02:57.109
¿como rayos se supone que yo consigo que el valor de x siga cambiando cuando la computadora sólo dirige el mismo código una y otra vez?

0:02:57.413,0:02:59.103
Bien, miren este truco de magia

0:02:59.366,0:03:02.286
Recuerde, esta 'var x' hace una nueva variable.

0:03:02.556,0:03:07.836
Cuando tenemos dentro de un bucle Draw como esta, que hace una nueva variable "x" cada vez.

0:03:08.110,0:03:12.640
Lo que tenemos que hacer es hacer esta variable fuera del bucle empate. De esa manera sólo hará que sea una vez.

0:03:13.343,0:03:22.553
Y luego, cada vez que el ordenador ejecuta este código y ve a la variable x, que va a volver a utilizar la misma variable desde antes de usarla

0:03:22.729,0:03:29.739
así que sólo voy a hacer eso, voy a tomar esta variable, y vamos a hacer fuera del bucle draw por lo que ahora sólo está haciendo esa variable una vez,

0:03:30.869,0:03:37.999
y cada vez esto entra corriendo en esta variable x esto va a reutilizar la misma variable. Y ahora mismo el último valor que le asignamos era '11',

0:03:38.270,0:03:41.190
entonces esto siempre va a ser 11. Y aquí está donde entra la magia .

0:03:41.517,0:03:51.577
En algún sitio del bucle draw, vamos a cambiar el valor de x para ser un poco más que esto solía ser, como este: el x consigue el viejo valor de x más, digamos, 1.

0:03:52.885,0:03:54.375
Si!! esta funcionando!!

0:03:54.796,0:04:02.436
Excepto, ajá, es tan graso. Y si te estás preguntando por qué se ve de esa manera, es porque nos olvidamos de dibujar este fondo en el interior del bucle draaw

0:04:02.436,0:04:06.846
Así que es dibujar el coche una y otra vez, pero se puede ver todos los coches viejos por debajo del nuevo.

0:04:06.846,0:04:11.096
Así que si me pongo esta línea en la parte superior del bucle draw, al igual que,

0:04:11.954,0:04:15.554
y luego presione 'restart' para que pueda ver mi coche nuevo ...

0:04:15.900,0:04:17.820
Hurra! Esta perfecto!

0:04:18.174,0:04:22.014
Y si queremos hacer que el coche vaya más rápido, sólo podemos cambiar la cantidad que aumentamos x por cada vez,

0:04:22.064,0:04:27.824
así que si lo hacemos 10, whoo! Es fuera de la pantalla! Y yo ni siquiera puedo hacer que sea negativo, por lo que 'x - 10' y ...

0:04:28.504,0:04:32.264
Aquí esta! Que sea positivo de nuevo, gritos

0:04:33.320,0:04:34.480
... ahí va.

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

0:04:36.552,0:04:42.832
Esta cosa aquí se llama el 'draw bucle'. Usted debe poner su código de dibujo dentro de aquí, así que pondremos dibuja una y otra vez

0:04:43.568,0:04:49.218
Y entonces, ¿quieres hacer una variable fuera de su bucle draw. Es super importante para que la variable fuera del bucle draw

0:04:51.838,0:04:55.554
A continuación, dentro del bucle draw aquí, vamos a cambiar la variable un poco

0:04:55.747,0:05:01.277
por lo general mediante el establecimiento a su valor anterior, además de un número, más o menos un número.

0:05:02.137,0:05:07.840
Y, por último, ¿quieres usar las variables en algún lugar de su código de dibujo para que su dibujo se ve diferente cada vez.

0:05:08.120,0:05:11.000
Y, eso es todo!