0:00:00.115,0:00:03.180
Hasta este punto, te habrás dado cuenta de que has definido

0:00:03.180,0:00:07.202
una función particular cada vez que quieres animar un programa,

0:00:07.202,0:00:09.191
la función "draw".

0:00:09.191,0:00:13.436
Para recordártelo, aquí está nuestro programa del carro animado nuevamente.

0:00:13.436,0:00:16.992
Tiene esta variable llamada "x" y que está inicializada en 11.

0:00:16.992,0:00:22.648
Y luego dentro de la función "draw", se dibuja el carro en la variable "x",

0:00:22.648,0:00:26.638
y luego suma 3 a la variable cada vez.

0:00:26.638,0:00:28.501
Y eso da como resultado un carro

0:00:28.501,0:00:32.447
que se mueve tres pixeles continuamente a lo largo de la pantalla.

0:00:32.447,0:00:34.723
Así es como funciona.

0:00:34.723,0:00:37.683
Pero ahora que has aprendido cómo hacer tus propias funciones,

0:00:37.683,0:00:41.583
probablemente te preguntes, ¿qué pasa con la función "draw"?

0:00:41.583,0:00:44.109
¿Por qué siempre la llamamos "draw"?

0:00:44.109,0:00:45.904
¿Es una función personalizada?

0:00:45.904,0:00:48.894
Y esas son muy buenas preguntas.

0:00:48.894,0:00:51.985
Verás, en la librería "ProcessingJS",

0:00:51.985,0:00:56.132
la función "draw" es una de las pocas funciones predefinidas

0:00:56.132,0:01:01.009
que da a nuestros programas más control sobre lo que pasa en la pantalla.

0:01:01.009,0:01:04.831
Una función predefinida es una función que ha sido definida

0:01:04.831,0:01:07.209
por la librería "ProcessingJS".

0:01:07.209,0:01:11.149
Pero generalmente comienza como una definición vacía.

0:01:11.149,0:01:17.045
Por ejemplo, en la librería "ProcessingJS", hay un código que se ve así:

0:01:17.045,0:01:19.434
"var draw = function() {}"

0:01:19.434,0:01:23.266
y luego está vacío, completamente vacío.

0:01:23.266,0:01:28.620
Ahora, llamamos a la librería "ProcessingJS" en cada programa que hacemos en Khan Academy,

0:01:28.620,0:01:30.904
Así que nunca ves ese código.

0:01:30.904,0:01:33.647
Pero creeme, existe.

0:01:33.647,0:01:41.049
Ahora, voy a comentar el código, ya que "ProcessingJS" lo hace por nosotros.

0:01:41.049,0:01:45.308
Cuando defines "draw" en nuestro programa,

0:01:45.308,0:01:49.809
esta nueva definición anula la definición anterior.

0:01:49.809,0:01:51.632
Y ahora la función "draw"

0:01:51.632,0:01:55.497
en realidad hace cosas emocionantes, como dibujar un carro.

0:01:55.497,0:02:01.375
Ahora, la pregunta es, ¿por qué la función "draw" se llama repetidas veces?

0:02:01.375,0:02:05.964
Bueno, también hay código en la librería "ProcessingJS"

0:02:05.964,0:02:11.111
que establece un temporizador del navegador y llama a la función repetidamente,

0:02:11.111,0:02:13.998
una vez tras otra.

0:02:13.998,0:02:19.239
Tenemos que darle a la función el nombre de "draw" porque es el nombre de la función

0:02:19.239,0:02:22.073
que la librería "ProcessingJS" está llamando repetidamente.

0:02:22.073,0:02:27.543
Si renombramos esta función como... digamos "drawCar",

0:02:27.543,0:02:33.730
en primer lugar obtendremos un error de definición, así que tendríamos que decir "var drawCar".

0:02:33.730,0:02:37.087
Entonces ahora puedes ver que si renombramos esto como "drawCar",

0:02:37.087,0:02:39.651
no vemos ninguna animación.

0:02:39.651,0:02:44.692
Y esto es porque esta función no se está llamando repetidamente,

0:02:44.692,0:02:47.188
porque no se llama "draw".

0:02:47.188,0:02:50.796
Así que tenemos que poner el código que queremos que se llame repetidamente

0:02:50.796,0:02:55.912
dentro de una función a la que nombremos "draw" exactamente.

0:02:55.912,0:03:00.594
Así que voy a hacerlo de nuevo, y voy a llamar a "drawCar" desde aquí.

0:03:00.594,0:03:03.237
¡Ajá! Lo tenemos nuevamente.

0:03:03.237,0:03:07.206
Muy bien, así que se debe llamar "draw",

0:03:07.206,0:03:12.970
y esto también significa que no deberías llamar "draw" a tus funciones personalizadas,

0:03:12.970,0:03:18.228
a menos que quieras que se consideren de una manera especial y que sean llamadas una y otra vez.

0:03:18.228,0:03:23.528
Y recuerda también que no puedes tener muchas funciones llamadas "draw".

0:03:23.528,0:03:27.889
Sólo la última sería considerada.

0:03:27.889,0:03:30.813
Si tenemos "rect" aquí dentro

0:03:30.813,0:03:35.143
Entonces ahora podemos ver que nuestro carro ya no se está dibujando,

0:03:35.143,0:03:40.495
y sólo se está dibujando "rect" en su lugar, porque sólo se considera la última definición.

0:03:40.495,0:03:43.166
Así que vamos a deshacernos de ésta.

0:03:43.166,0:03:48.289
Ahora, la función "draw" no es la única función predefinida

0:03:48.289,0:03:50.499
que tiene este comportamiento especial.

0:03:50.499,0:03:52.682
Hay muchas otras funciones también,

0:03:52.682,0:03:56.692
para responder a las interacciones del ratón y al uso de teclas.

0:03:56.692,0:04:01.624
Digamos que queremos tener un programa que dibuja una elipse coloreada

0:04:01.624,0:04:04.716
por donde el usuario pasa el ratón.

0:04:04.716,0:04:09.042
Podríamos hacer eso con una función como ésta...

0:04:09.042,0:04:19.986
digamos "mouseX, mouseY, mouseY" y luego "ellipse(mouseX, mouseY, 10, 10)"

0:04:19.998,0:04:22.545
Muy bien, oh, hermoso.

0:04:22.545,0:04:27.224
Ahora, esta función se está llamando una y otra vez,

0:04:27.224,0:04:31.176
aún cuando el usuario no está moviendo el ratón, como en este momento.

0:04:31.176,0:04:34.703
Y este programa, funciona, hace lo que queremos que haga,

0:04:34.703,0:04:37.902
está pintando esas lindas elipses por toda la pantalla.

0:04:37.902,0:04:42.114
Pero resulta que hay una mejor manera de hacer lo mismo

0:04:42.114,0:04:44.288
y que es más eficiente.

0:04:44.288,0:04:51.892
Entonces podemos cambiar la función "draw" a "mouseMoved" y vamos a ver.

0:04:51.892,0:04:54.577
Sigue funcionando.

0:04:54.577,0:04:58.361
Verás, nuestro entorno revisa los programas

0:04:58.361,0:05:00.754
para ver si se ha definido una función "mouseMoved",

0:05:00.754,0:05:05.457
y si se ha hecho, llama a la función cada vez que el usuario mueve el ratón.

0:05:05.457,0:05:10.029
Pero no se llamará si el usuario no mueve el ratón.

0:05:10.029,0:05:13.423
Así que antes, estábamos llamando al código de la función "draw"

0:05:13.423,0:05:15.908
cuando no lo necesitábamos, una y otra vez.

0:05:15.908,0:05:20.265
Y ahora, sólo llamamos al código en "mouseMoved"

0:05:20.265,0:05:23.292
cuando "mouseX" o "mouseY" han cambiado.

0:05:23.292,0:05:27.313
Así que nuestro programa es más eficiente y eso es algo bueno.

0:05:27.313,0:05:30.728
Generalmente, si sólo quieres cambiar el resultado de tu programa

0:05:30.728,0:05:34.525
cuando el usuario mueve el ratón, entonces es mejor que tengas tu código

0:05:34.525,0:05:37.212
dentro de la función "mouseMoved".

0:05:37.212,0:05:40.987
Y existen muchas funciones predefinidas como ésta,

0:05:40.987,0:05:44.655
puedes ver más ejemplos en la documentación.

0:05:44.655,0:05:48.872
Como "mousePressed", "mouseReleased", "keyPressed", y otras.

0:05:48.872,0:05:53.993
Así que recuerda, si quieres usar una función especial predefinida,

0:05:53.993,0:05:59.244
como "mouseMoved" o "draw", escríbelas correctamente, y úsalas correctamente.

0:05:59.244,0:06:03.410
Si no es así, entonces asegurate de que los nombres de tus funciones

0:06:03.451,0:06:06.621
sean nuevos y únicos.