1
00:00:00,115 --> 00:00:03,180
Hasta este punto, te habrás dado cuenta de que has definido

2
00:00:03,180 --> 00:00:07,202
una función particular cada vez que quieres animar un programa,

3
00:00:07,202 --> 00:00:09,191
la función "draw".

4
00:00:09,191 --> 00:00:13,436
Para recordártelo, aquí está nuestro programa del carro animado nuevamente.

5
00:00:13,436 --> 00:00:16,992
Tiene esta variable llamada "x" y que está inicializada en 11.

6
00:00:16,992 --> 00:00:22,648
Y luego dentro de la función "draw", se dibuja el carro en la variable "x",

7
00:00:22,648 --> 00:00:26,638
y luego suma 3 a la variable cada vez.

8
00:00:26,638 --> 00:00:28,501
Y eso da como resultado un carro

9
00:00:28,501 --> 00:00:32,447
que se mueve tres pixeles continuamente a lo largo de la pantalla.

10
00:00:32,447 --> 00:00:34,723
Así es como funciona.

11
00:00:34,723 --> 00:00:37,683
Pero ahora que has aprendido cómo hacer tus propias funciones,

12
00:00:37,683 --> 00:00:41,583
probablemente te preguntes, ¿qué pasa con la función "draw"?

13
00:00:41,583 --> 00:00:44,109
¿Por qué siempre la llamamos "draw"?

14
00:00:44,109 --> 00:00:45,904
¿Es una función personalizada?

15
00:00:45,904 --> 00:00:48,894
Y esas son muy buenas preguntas.

16
00:00:48,894 --> 00:00:51,985
Verás, en la librería "ProcessingJS",

17
00:00:51,985 --> 00:00:56,132
la función "draw" es una de las pocas funciones predefinidas

18
00:00:56,132 --> 00:01:01,009
que da a nuestros programas más control sobre lo que pasa en la pantalla.

19
00:01:01,009 --> 00:01:04,831
Una función predefinida es una función que ha sido definida

20
00:01:04,831 --> 00:01:07,209
por la librería "ProcessingJS".

21
00:01:07,209 --> 00:01:11,149
Pero generalmente comienza como una definición vacía.

22
00:01:11,149 --> 00:01:17,045
Por ejemplo, en la librería "ProcessingJS", hay un código que se ve así:

23
00:01:17,045 --> 00:01:19,434
"var draw = function() {}"

24
00:01:19,434 --> 00:01:23,266
y luego está vacío, completamente vacío.

25
00:01:23,266 --> 00:01:28,620
Ahora, llamamos a la librería "ProcessingJS" en cada programa que hacemos en Khan Academy,

26
00:01:28,620 --> 00:01:30,904
Así que nunca ves ese código.

27
00:01:30,904 --> 00:01:33,647
Pero creeme, existe.

28
00:01:33,647 --> 00:01:41,049
Ahora, voy a comentar el código, ya que "ProcessingJS" lo hace por nosotros.

29
00:01:41,049 --> 00:01:45,308
Cuando defines "draw" en nuestro programa,

30
00:01:45,308 --> 00:01:49,809
esta nueva definición anula la definición anterior.

31
00:01:49,809 --> 00:01:51,632
Y ahora la función "draw"

32
00:01:51,632 --> 00:01:55,497
en realidad hace cosas emocionantes, como dibujar un carro.

33
00:01:55,497 --> 00:02:01,375
Ahora, la pregunta es, ¿por qué la función "draw" se llama repetidas veces?

34
00:02:01,375 --> 00:02:05,964
Bueno, también hay código en la librería "ProcessingJS"

35
00:02:05,964 --> 00:02:11,111
que establece un temporizador del navegador y llama a la función repetidamente,

36
00:02:11,111 --> 00:02:13,998
una vez tras otra.

37
00:02:13,998 --> 00:02:19,239
Tenemos que darle a la función el nombre de "draw" porque es el nombre de la función

38
00:02:19,239 --> 00:02:22,073
que la librería "ProcessingJS" está llamando repetidamente.

39
00:02:22,073 --> 00:02:27,543
Si renombramos esta función como... digamos "drawCar",

40
00:02:27,543 --> 00:02:33,730
en primer lugar obtendremos un error de definición, así que tendríamos que decir "var drawCar".

41
00:02:33,730 --> 00:02:37,087
Entonces ahora puedes ver que si renombramos esto como "drawCar",

42
00:02:37,087 --> 00:02:39,651
no vemos ninguna animación.

43
00:02:39,651 --> 00:02:44,692
Y esto es porque esta función no se está llamando repetidamente,

44
00:02:44,692 --> 00:02:47,188
porque no se llama "draw".

45
00:02:47,188 --> 00:02:50,796
Así que tenemos que poner el código que queremos que se llame repetidamente

46
00:02:50,796 --> 00:02:55,912
dentro de una función a la que nombremos "draw" exactamente.

47
00:02:55,912 --> 00:03:00,594
Así que voy a hacerlo de nuevo, y voy a llamar a "drawCar" desde aquí.

48
00:03:00,594 --> 00:03:03,237
¡Ajá! Lo tenemos nuevamente.

49
00:03:03,237 --> 00:03:07,206
Muy bien, así que se debe llamar "draw",

50
00:03:07,206 --> 00:03:12,970
y esto también significa que no deberías llamar "draw" a tus funciones personalizadas,

51
00:03:12,970 --> 00:03:18,228
a menos que quieras que se consideren de una manera especial y que sean llamadas una y otra vez.

52
00:03:18,228 --> 00:03:23,528
Y recuerda también que no puedes tener muchas funciones llamadas "draw".

53
00:03:23,528 --> 00:03:27,889
Sólo la última sería considerada.

54
00:03:27,889 --> 00:03:30,813
Si tenemos "rect" aquí dentro

55
00:03:30,813 --> 00:03:35,143
Entonces ahora podemos ver que nuestro carro ya no se está dibujando,

56
00:03:35,143 --> 00:03:40,495
y sólo se está dibujando "rect" en su lugar, porque sólo se considera la última definición.

57
00:03:40,495 --> 00:03:43,166
Así que vamos a deshacernos de ésta.

58
00:03:43,166 --> 00:03:48,289
Ahora, la función "draw" no es la única función predefinida

59
00:03:48,289 --> 00:03:50,499
que tiene este comportamiento especial.

60
00:03:50,499 --> 00:03:52,682
Hay muchas otras funciones también,

61
00:03:52,682 --> 00:03:56,692
para responder a las interacciones del ratón y al uso de teclas.

62
00:03:56,692 --> 00:04:01,624
Digamos que queremos tener un programa que dibuja una elipse coloreada

63
00:04:01,624 --> 00:04:04,716
por donde el usuario pasa el ratón.

64
00:04:04,716 --> 00:04:09,042
Podríamos hacer eso con una función como ésta...

65
00:04:09,042 --> 00:04:19,986
digamos "mouseX, mouseY, mouseY" y luego "ellipse(mouseX, mouseY, 10, 10)"

66
00:04:19,998 --> 00:04:22,545
Muy bien, oh, hermoso.

67
00:04:22,545 --> 00:04:27,224
Ahora, esta función se está llamando una y otra vez,

68
00:04:27,224 --> 00:04:31,176
aún cuando el usuario no está moviendo el ratón, como en este momento.

69
00:04:31,176 --> 00:04:34,703
Y este programa, funciona, hace lo que queremos que haga,

70
00:04:34,703 --> 00:04:37,902
está pintando esas lindas elipses por toda la pantalla.

71
00:04:37,902 --> 00:04:42,114
Pero resulta que hay una mejor manera de hacer lo mismo

72
00:04:42,114 --> 00:04:44,288
y que es más eficiente.

73
00:04:44,288 --> 00:04:51,892
Entonces podemos cambiar la función "draw" a "mouseMoved" y vamos a ver.

74
00:04:51,892 --> 00:04:54,577
Sigue funcionando.

75
00:04:54,577 --> 00:04:58,361
Verás, nuestro entorno revisa los programas

76
00:04:58,361 --> 00:05:00,754
para ver si se ha definido una función "mouseMoved",

77
00:05:00,754 --> 00:05:05,457
y si se ha hecho, llama a la función cada vez que el usuario mueve el ratón.

78
00:05:05,457 --> 00:05:10,029
Pero no se llamará si el usuario no mueve el ratón.

79
00:05:10,029 --> 00:05:13,423
Así que antes, estábamos llamando al código de la función "draw"

80
00:05:13,423 --> 00:05:15,908
cuando no lo necesitábamos, una y otra vez.

81
00:05:15,908 --> 00:05:20,265
Y ahora, sólo llamamos al código en "mouseMoved"

82
00:05:20,265 --> 00:05:23,292
cuando "mouseX" o "mouseY" han cambiado.

83
00:05:23,292 --> 00:05:27,313
Así que nuestro programa es más eficiente y eso es algo bueno.

84
00:05:27,313 --> 00:05:30,728
Generalmente, si sólo quieres cambiar el resultado de tu programa

85
00:05:30,728 --> 00:05:34,525
cuando el usuario mueve el ratón, entonces es mejor que tengas tu código

86
00:05:34,525 --> 00:05:37,212
dentro de la función "mouseMoved".

87
00:05:37,212 --> 00:05:40,987
Y existen muchas funciones predefinidas como ésta,

88
00:05:40,987 --> 00:05:44,655
puedes ver más ejemplos en la documentación.

89
00:05:44,655 --> 00:05:48,872
Como "mousePressed", "mouseReleased", "keyPressed", y otras.

90
00:05:48,872 --> 00:05:53,993
Así que recuerda, si quieres usar una función especial predefinida,

91
00:05:53,993 --> 00:05:59,244
como "mouseMoved" o "draw", escríbelas correctamente, y úsalas correctamente.

92
00:05:59,244 --> 00:06:03,410
Si no es así, entonces asegurate de que los nombres de tus funciones

93
00:06:03,451 --> 00:06:06,621
sean nuevos y únicos.