1
00:00:00,746 --> 00:00:03,033
Hay varias maneras de hacer que algo se vea animado,

2
00:00:03,033 --> 00:00:05,233
Pero el principio básico es el mismo.

3
00:00:05,243 --> 00:00:07,133
Si tomas un conjunto de fotos

4
00:00:07,133 --> 00:00:09,733
en la que cada una es sólo un poco diferente de la anterior

5
00:00:09,733 --> 00:00:11,463
y te mueves entre ellas lo mas rápido posible

6
00:00:11,463 --> 00:00:13,273
se verá como si tu dibujo se estuviera moviendo.

7
00:00:13,273 --> 00:00:16,173
Allá en los viejos tiempos estos dibujos se hacían a mano,

8
00:00:16,173 --> 00:00:19,626
y se tardaban mucho tiempo en hacer 3 segundos de animación.

9
00:00:19,633 --> 00:00:22,626
Afortunadamente, vivimos en el futuro.

10
00:00:22,626 --> 00:00:26,056
Es muy fácil hacer una animación sencilla con código.

11
00:00:26,056 --> 00:00:27,735
¡Y les mostraré como!

12
00:00:27,735 --> 00:00:31,344
A la derecha ves un carrito hermoso y un color de fondo amarillo encantador.

13
00:00:31,344 --> 00:00:34,273
Y sí, yo diseñe este carrito, gracias.

14
00:00:34,273 --> 00:00:38,263
Bueno, aquí arriba ves que estamos configurando este bello color de fondo

15
00:00:38,263 --> 00:00:42,330
Y el carro no tiene ningún contorno, porque estamos llamando a esta función "noStroke()".

16
00:00:42,330 --> 00:00:47,427
Y aquí estamos haciendo esta nueva variable "x", que es la posición del carro y le asignamos el valor 10.

17
00:00:47,427 --> 00:00:49,441
y puedes ver que si cambiamos el valor

18
00:00:49,441 --> 00:00:51,623
entonces el carro se mueve hacia atrás y hacia adelante.

19
00:00:51,623 --> 00:00:53,103
Lo vamos a traer hasta 10.

20
00:00:53,103 --> 00:00:55,213
Y luego aquí estamos estableciendo el color de relleno del carro

21
00:00:55,213 --> 00:00:57,603
y dibujando dos rectángulos para la carrocería.

22
00:00:57,603 --> 00:01:00,073
Así que este primer rectángulo es para la parte de abajo,

23
00:01:00,073 --> 00:01:02,373
y este rectángulo es para la parte superior.

24
00:01:02,401 --> 00:01:04,900
Y entonces aquí estamos haciendo lo mismo con las ruedas.

25
00:01:04,900 --> 00:01:06,971
Establecemos el color de relleno y dibujamos dos elipses.

26
00:01:06,971 --> 00:01:08,431
Una en "x + 25",

27
00:01:08,449 --> 00:01:10,077
y en "x + 75".

28
00:01:10,077 --> 00:01:12,527
Y finalmente llegamos a las cosas nuevas.

29
00:01:12,532 --> 00:01:15,002
A esto que está aquí le llamamos definición de una función.

30
00:01:15,002 --> 00:01:16,692
Tú lo aprenderás más adelante.

31
00:01:16,692 --> 00:01:19,332
Así que por ahora basta con memorizar lo que tenemos aquí.

32
00:01:19,332 --> 00:01:24,132
Las cosas importantes en que debes poner atención son: esta palabra 'draw' y estas llaves.

33
00:01:24,142 --> 00:01:25,412
Esta de aquí es la llave de apertura.

34
00:01:25,412 --> 00:01:26,762
Y esta es la llave de cierre.

35
00:01:26,762 --> 00:01:29,956
Todo esto es lo que llamamos el ciclo "draw", o el ciclo de animación.

36
00:01:29,956 --> 00:01:34,910
Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rápido.

37
00:01:34,910 --> 00:01:36,340
Es por eso que se llama ciclo.

38
00:01:36,360 --> 00:01:41,420
Y entonces todo lo que está fuera de estas llaves se ejecuta sólo una vez al comienzo del programa.

39
00:01:41,420 --> 00:01:45,160
Así que el primer paso de la animación es poner todo el código dentro de las llaves

40
00:01:45,160 --> 00:01:47,490
Para que las imágenes se repitan una y otra vez.

41
00:01:47,490 --> 00:01:48,490
Así que vamos a hacer eso.

42
00:01:48,490 --> 00:01:51,290
Lo que haré será jalar todo el código del dibujo,

43
00:01:51,290 --> 00:01:53,740
y lo pondré aquí abajo dentro del ciclo.

44
00:01:53,863 --> 00:01:58,223
Y para recordarme que este bloque del código va dentro de estas llaves,

45
00:01:58,223 --> 00:02:02,193
voy a indentar todo esto, seleccionándolo y presionando la tecla "Tab".

46
00:02:02,193 --> 00:02:05,363
Y ahora sé que todo este código está dentro de las llaves.

47
00:02:05,424 --> 00:02:08,797
Pero podrías decir que todo esto está exactamente igual,

48
00:02:08,797 --> 00:02:10,157
nada ha cambiado.

49
00:02:10,157 --> 00:02:12,177
Porque la primera vez que se ejecuta el ciclo "draw",

50
00:02:12,177 --> 00:02:14,617
la computadora va a decir: "Ok, haz una nueva variable 'x',

51
00:02:14,617 --> 00:02:16,467
asígnale el valor 10, dibuja dos rectángulos,

52
00:02:16,467 --> 00:02:17,667
y dibuja dos elipses".

53
00:02:17,667 --> 00:02:19,087
Y luego se va a ir otra vez hasta arriba,

54
00:02:19,087 --> 00:02:19,957
y va a decir:

55
00:02:19,957 --> 00:02:21,787
"Haz una nueva variable 'x', configúrala con el valor 10,

56
00:02:21,787 --> 00:02:24,187
dibuja dos rectángulos, dibujar dos elipses"

57
00:02:24,187 --> 00:02:26,587
Y luego, '" haz una nueva variable "x", configúrala con el valor 10,

58
00:02:26,587 --> 00:02:27,757
exactamente lo mismo.

59
00:02:27,757 --> 00:02:31,017
No ha cambiado nada, claro, no vamos a ver ninguna animación.

60
00:02:31,030 --> 00:02:34,610
Y es que dibuja los rectángulos y elipses encima de los anteriores.

61
00:02:34,610 --> 00:02:37,305
Recuerda lo que dijimos: si queremos hacer algo que parezca animado,

62
00:02:37,305 --> 00:02:40,105
necesitamos cambiar el dibujo un poquito cada vez.

63
00:02:40,105 --> 00:02:42,575
Entonces si quiero que mi carro avance,

64
00:02:42,575 --> 00:02:45,165
debería cambiar el valor de esta variable "x", ¿cierto?

65
00:02:45,165 --> 00:02:47,715
Sí, sólo déjame igualarla a 11.

66
00:02:47,715 --> 00:02:50,996
¡Ah! ¡No! Pero ahora ésta sólo va a ser 11 cada vez.

67
00:02:50,996 --> 00:02:54,413
¿Cómo rayos se supone que voy a hacer para que el valor de "x" esté cambiando,

68
00:02:54,413 --> 00:02:57,413
cuando la computadora ejecuta el mismo código una y otra vez?

69
00:02:57,413 --> 00:02:59,403
Ok, observen este truco de magia.

70
00:02:59,403 --> 00:03:02,556
Recuerden, esta instrucción "var x" crea una nueva variable.

71
00:03:02,556 --> 00:03:04,570
Cuando la tenemos dentro de un ciclo "draw" como éste,

72
00:03:04,570 --> 00:03:08,110
crea una nueva variable "x" cada vez.

73
00:03:08,110 --> 00:03:10,863
Lo que tenemos que hacer es crear esta variable fuera del ciclo "draw".

74
00:03:10,863 --> 00:03:13,343
De esa manera sólo la creará una vez.

75
00:03:13,343 --> 00:03:17,569
Y luego, cada vez que la computadora ejecute este código y vea la variable "x",

76
00:03:17,569 --> 00:03:22,729
va a volver a utilizar la misma variable que antes, usando el último valor que le asignamos.

77
00:03:22,729 --> 00:03:25,259
Así que sólo voy a hacer eso, voy a tomar esta variable,

78
00:03:25,259 --> 00:03:27,109
y la vamos a crear fuera del ciclo "draw".

79
00:03:27,109 --> 00:03:30,869
Así que ahora sólo la está creando una sola vez.

80
00:03:30,869 --> 00:03:33,240
Y cada vez que pase por esta variable "x",

81
00:03:33,240 --> 00:03:35,280
va a usar nuevamente esta misma variable.

82
00:03:35,280 --> 00:03:37,820
Y en este momento, el último valor que le asignamos fue 11,

83
00:03:37,820 --> 00:03:39,270
entonces siempre va a ser 11.

84
00:03:39,270 --> 00:03:41,517
Y aquí es donde entra la magia .

85
00:03:41,517 --> 00:03:44,435
En algún lugar del ciclo "draw", vamos a cambiar el valor de "x",

86
00:03:44,435 --> 00:03:47,205
para que sea un poco más grande que lo que solía ser, como esto:

87
00:03:47,205 --> 00:03:52,885
a "x" le asignamos el valor anterior de "x", más 1.

88
00:03:52,885 --> 00:03:54,825
¡Sí! ¡Está funcionando!

89
00:03:54,825 --> 00:03:57,006
Excepto que se ve tan grotesco.

90
00:03:57,006 --> 00:03:58,946
Y si te estás preguntando por qué se ve de esa manera,

91
00:03:58,946 --> 00:04:02,436
es porque nos olvidamos de dibujar el fondo en el interior del ciclo "draw".

92
00:04:02,436 --> 00:04:04,556
Así que está dibujando el carro una y otra vez,

93
00:04:04,556 --> 00:04:06,846
pero se puede ver todos los coches viejos por debajo del nuevo.

94
00:04:06,846 --> 00:04:11,696
Así que si jalo esta línea a la parte superior del ciclo "draw",

95
00:04:11,696 --> 00:04:15,764
y luego presiono "Restart" para que pueda ver mi carro de nuevo,

96
00:04:15,764 --> 00:04:18,030
¡Sí! ¡Es perfecto!

97
00:04:18,030 --> 00:04:19,603
Y si queremos hacer que el carro vaya más rápido,

98
00:04:19,603 --> 00:04:22,064
sólo debemos cambiar la cantidad en que aumentamos "x" cada vez.

99
00:04:22,064 --> 00:04:25,064
Así que si lo hacemos 10, ¡uuh! ¡se sale de la pantalla!

100
00:04:25,064 --> 00:04:28,504
Incluso puedo hacer que sea negativo, así que "x - 10" y,

101
00:04:28,504 --> 00:04:30,090
¡Aquí viene!

102
00:04:30,090 --> 00:04:33,320
Lo hacemos positivo de nuevo, ¡woo!

103
00:04:33,320 --> 00:04:34,517
¡Ahí va!

104
00:04:34,517 --> 00:04:36,567
Así que aquí están las cosas importantes para recordar:

105
00:04:36,567 --> 00:04:39,558
Esto que tenemos aquí se llama el ciclo "draw".

106
00:04:39,558 --> 00:04:41,418
Deben poner su código de dibujo dentro de este ciclo,

107
00:04:41,418 --> 00:04:43,568
para que sea ejecutado una y otra vez.

108
00:04:43,568 --> 00:04:46,508
Y luego, van a querer crear una variable fuera del ciclo "draw".

109
00:04:46,508 --> 00:04:49,378
Es super importante crear la variable fuera del ciclo "draw",

110
00:04:49,378 --> 00:04:51,838
para que puedan usar la misma variable cada vez.

111
00:04:51,838 --> 00:04:52,838
Luego, dentro del ciclo "draw", justo aquí

112
00:04:52,838 --> 00:04:55,747
vamos a cambiar la variable un poco,

113
00:04:55,747 --> 00:04:58,687
por lo general la vamos a igualar a su valor anterior,

114
00:04:58,687 --> 00:05:02,137
más algún número, más o menos algún número.

115
00:05:02,137 --> 00:05:05,120
Y por último, van a querer usar su variable en algún lugar de su código de dibujo

116
00:05:05,120 --> 00:05:08,120
para que su dibujo se vea diferente cada vez.

117
00:05:08,120 --> 00:05:09,880
Y, ¡eso es todo!