WEBVTT

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

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

00:00:07.202 --> 00:00:09.191
la función "draw".

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

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

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

00:00:22.648 --> 00:00:26.638
y luego suma 3 a la variable cada vez.

00:00:26.638 --> 00:00:28.501
Y eso da como resultado un carro

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

00:00:32.447 --> 00:00:34.723
Así es como funciona.

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

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

00:00:41.583 --> 00:00:44.109
¿Por qué siempre la llamamos "draw"?

00:00:44.109 --> 00:00:45.904
¿Es una función personalizada?

00:00:45.904 --> 00:00:48.894
Y esas son muy buenas preguntas.

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

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

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

00:01:01.009 --> 00:01:04.831
Una función predefinida es una función que ha sido definida

00:01:04.831 --> 00:01:07.209
por la librería "ProcessingJS".

00:01:07.209 --> 00:01:11.149
Pero generalmente comienza como una definición vacía.

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

00:01:17.045 --> 00:01:19.434
"var draw = function() {}"

00:01:19.434 --> 00:01:23.266
y luego está vacío, completamente vacío.

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

00:01:28.620 --> 00:01:30.904
Así que nunca ves ese código.

00:01:30.904 --> 00:01:33.647
Pero creeme, existe.

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

00:01:41.049 --> 00:01:45.308
Cuando defines "draw" en nuestro programa,

00:01:45.308 --> 00:01:49.809
esta nueva definición anula la definición anterior.

00:01:49.809 --> 00:01:51.632
Y ahora la función "draw"

00:01:51.632 --> 00:01:55.497
en realidad hace cosas emocionantes, como dibujar un carro.

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

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

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

00:02:11.111 --> 00:02:13.998
una vez tras otra.

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

00:02:19.239 --> 00:02:22.073
que la librería "ProcessingJS" está llamando repetidamente.

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

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".

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

00:02:37.087 --> 00:02:39.651
no vemos ninguna animación.

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

00:02:44.692 --> 00:02:47.188
porque no se llama "draw".

00:02:47.188 --> 00:02:50.796
Así que tenemos que poner el código que queremos que se llame repetidamente

00:02:50.796 --> 00:02:55.912
dentro de una función a la que nombremos "draw" exactamente.

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

00:03:00.594 --> 00:03:03.237
¡Ajá! Lo tenemos nuevamente.

00:03:03.237 --> 00:03:07.206
Muy bien, así que se debe llamar "draw",

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

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.

00:03:18.228 --> 00:03:23.528
Y recuerda también que no puedes tener muchas funciones llamadas "draw".

00:03:23.528 --> 00:03:27.889
Sólo la última sería considerada.

00:03:27.889 --> 00:03:30.813
Si tenemos "rect" aquí dentro

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

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.

00:03:40.495 --> 00:03:43.166
Así que vamos a deshacernos de ésta.

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

00:03:48.289 --> 00:03:50.499
que tiene este comportamiento especial.

00:03:50.499 --> 00:03:52.682
Hay muchas otras funciones también,

00:03:52.682 --> 00:03:56.692
para responder a las interacciones del ratón y al uso de teclas.

00:03:56.692 --> 00:04:01.624
Digamos que queremos tener un programa que dibuja una elipse coloreada

00:04:01.624 --> 00:04:04.716
por donde el usuario pasa el ratón.

00:04:04.716 --> 00:04:09.042
Podríamos hacer eso con una función como ésta...

00:04:09.042 --> 00:04:19.986
digamos "mouseX, mouseY, mouseY" y luego "ellipse(mouseX, mouseY, 10, 10)"

00:04:19.998 --> 00:04:22.545
Muy bien, oh, hermoso.

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

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

00:04:31.176 --> 00:04:34.703
Y este programa, funciona, hace lo que queremos que haga,

00:04:34.703 --> 00:04:37.902
está pintando esas lindas elipses por toda la pantalla.

00:04:37.902 --> 00:04:42.114
Pero resulta que hay una mejor manera de hacer lo mismo

00:04:42.114 --> 00:04:44.288
y que es más eficiente.

00:04:44.288 --> 00:04:51.892
Entonces podemos cambiar la función "draw" a "mouseMoved" y vamos a ver.

00:04:51.892 --> 00:04:54.577
Sigue funcionando.

00:04:54.577 --> 00:04:58.361
Verás, nuestro entorno revisa los programas

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

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.

00:05:05.457 --> 00:05:10.029
Pero no se llamará si el usuario no mueve el ratón.

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

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

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

00:05:20.265 --> 00:05:23.292
cuando "mouseX" o "mouseY" han cambiado.

00:05:23.292 --> 00:05:27.313
Así que nuestro programa es más eficiente y eso es algo bueno.

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

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

00:05:34.525 --> 00:05:37.212
dentro de la función "mouseMoved".

00:05:37.212 --> 00:05:40.987
Y existen muchas funciones predefinidas como ésta,

00:05:40.987 --> 00:05:44.655
puedes ver más ejemplos en la documentación.

00:05:44.655 --> 00:05:48.872
Como "mousePressed", "mouseReleased", "keyPressed", y otras.

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

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

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

00:06:03.451 --> 00:06:06.621
sean nuevos y únicos.