[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.12,0:00:03.18,Default,,0000,0000,0000,,Hasta este punto, te habrás dado cuenta de que has definido
Dialogue: 0,0:00:03.18,0:00:07.20,Default,,0000,0000,0000,,una función particular cada vez que quieres animar un programa,
Dialogue: 0,0:00:07.20,0:00:09.19,Default,,0000,0000,0000,,la función "draw".
Dialogue: 0,0:00:09.19,0:00:13.44,Default,,0000,0000,0000,,Para recordártelo, aquí está nuestro programa del carro animado nuevamente.
Dialogue: 0,0:00:13.44,0:00:16.99,Default,,0000,0000,0000,,Tiene esta variable llamada "x" y que está inicializada en 11.
Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,,Y luego dentro de la función "draw", se dibuja el carro en la variable "x",
Dialogue: 0,0:00:22.65,0:00:26.64,Default,,0000,0000,0000,,y luego suma 3 a la variable cada vez.
Dialogue: 0,0:00:26.64,0:00:28.50,Default,,0000,0000,0000,,Y eso da como resultado un carro
Dialogue: 0,0:00:28.50,0:00:32.45,Default,,0000,0000,0000,,que se mueve tres pixeles continuamente a lo largo de la pantalla.
Dialogue: 0,0:00:32.45,0:00:34.72,Default,,0000,0000,0000,,Así es como funciona.
Dialogue: 0,0:00:34.72,0:00:37.68,Default,,0000,0000,0000,,Pero ahora que has aprendido cómo hacer tus propias funciones,
Dialogue: 0,0:00:37.68,0:00:41.58,Default,,0000,0000,0000,,probablemente te preguntes, ¿qué pasa con la función "draw"?
Dialogue: 0,0:00:41.58,0:00:44.11,Default,,0000,0000,0000,,¿Por qué siempre la llamamos "draw"?
Dialogue: 0,0:00:44.11,0:00:45.90,Default,,0000,0000,0000,,¿Es una función personalizada?
Dialogue: 0,0:00:45.90,0:00:48.89,Default,,0000,0000,0000,,Y esas son muy buenas preguntas.
Dialogue: 0,0:00:48.89,0:00:51.98,Default,,0000,0000,0000,,Verás, en la librería "ProcessingJS",
Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,,la función "draw" es una de las pocas funciones predefinidas
Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,,que da a nuestros programas más control sobre lo que pasa en la pantalla.
Dialogue: 0,0:01:01.01,0:01:04.83,Default,,0000,0000,0000,,Una función predefinida es una función que ha sido definida
Dialogue: 0,0:01:04.83,0:01:07.21,Default,,0000,0000,0000,,por la librería "ProcessingJS".
Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,,Pero generalmente comienza como una definición vacía.
Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,,Por ejemplo, en la librería "ProcessingJS", hay un código que se ve así:
Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,,"var draw = function() {}"
Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,,y luego está vacío, completamente vacío.
Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,,Ahora, llamamos a la librería "ProcessingJS" en cada programa que hacemos en Khan Academy,
Dialogue: 0,0:01:28.62,0:01:30.90,Default,,0000,0000,0000,,Así que nunca ves ese código.
Dialogue: 0,0:01:30.90,0:01:33.65,Default,,0000,0000,0000,,Pero creeme, existe.
Dialogue: 0,0:01:33.65,0:01:41.05,Default,,0000,0000,0000,,Ahora, voy a comentar el código, ya que "ProcessingJS" lo hace por nosotros.
Dialogue: 0,0:01:41.05,0:01:45.31,Default,,0000,0000,0000,,Cuando defines "draw" en nuestro programa,
Dialogue: 0,0:01:45.31,0:01:49.81,Default,,0000,0000,0000,,esta nueva definición anula la definición anterior.
Dialogue: 0,0:01:49.81,0:01:51.63,Default,,0000,0000,0000,,Y ahora la función "draw"
Dialogue: 0,0:01:51.63,0:01:55.50,Default,,0000,0000,0000,,en realidad hace cosas emocionantes, como dibujar un carro.
Dialogue: 0,0:01:55.50,0:02:01.38,Default,,0000,0000,0000,,Ahora, la pregunta es, ¿por qué la función "draw" se llama repetidas veces?
Dialogue: 0,0:02:01.38,0:02:05.96,Default,,0000,0000,0000,,Bueno, también hay código en la librería "ProcessingJS"
Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,,que establece un temporizador del navegador y llama a la función repetidamente,
Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,,una vez tras otra.
Dialogue: 0,0:02:13.100,0:02:19.24,Default,,0000,0000,0000,,Tenemos que darle a la función el nombre de "draw" porque es el nombre de la función
Dialogue: 0,0:02:19.24,0:02:22.07,Default,,0000,0000,0000,,que la librería "ProcessingJS" está llamando repetidamente.
Dialogue: 0,0:02:22.07,0:02:27.54,Default,,0000,0000,0000,,Si renombramos esta función como... digamos "drawCar",
Dialogue: 0,0:02:27.54,0:02:33.73,Default,,0000,0000,0000,,en primer lugar obtendremos un error de definición, así que tendríamos que decir "var drawCar".
Dialogue: 0,0:02:33.73,0:02:37.09,Default,,0000,0000,0000,,Entonces ahora puedes ver que si renombramos esto como "drawCar",
Dialogue: 0,0:02:37.09,0:02:39.65,Default,,0000,0000,0000,,no vemos ninguna animación.
Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,,Y esto es porque esta función no se está llamando repetidamente,
Dialogue: 0,0:02:44.69,0:02:47.19,Default,,0000,0000,0000,,porque no se llama "draw".
Dialogue: 0,0:02:47.19,0:02:50.80,Default,,0000,0000,0000,,Así que tenemos que poner el código que queremos que se llame repetidamente
Dialogue: 0,0:02:50.80,0:02:55.91,Default,,0000,0000,0000,,dentro de una función a la que nombremos "draw" exactamente.
Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,,Así que voy a hacerlo de nuevo, y voy a llamar a "drawCar" desde aquí.
Dialogue: 0,0:03:00.59,0:03:03.24,Default,,0000,0000,0000,,¡Ajá! Lo tenemos nuevamente.
Dialogue: 0,0:03:03.24,0:03:07.21,Default,,0000,0000,0000,,Muy bien, así que se debe llamar "draw",
Dialogue: 0,0:03:07.21,0:03:12.97,Default,,0000,0000,0000,,y esto también significa que no deberías llamar "draw" a tus funciones personalizadas,
Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,,a menos que quieras que se consideren de una manera especial y que sean llamadas una y otra vez.
Dialogue: 0,0:03:18.23,0:03:23.53,Default,,0000,0000,0000,,Y recuerda también que no puedes tener muchas funciones llamadas "draw".
Dialogue: 0,0:03:23.53,0:03:27.89,Default,,0000,0000,0000,,Sólo la última sería considerada.
Dialogue: 0,0:03:27.89,0:03:30.81,Default,,0000,0000,0000,,Si tenemos "rect" aquí dentro
Dialogue: 0,0:03:30.81,0:03:35.14,Default,,0000,0000,0000,,Entonces ahora podemos ver que nuestro carro ya no se está dibujando,
Dialogue: 0,0:03:35.14,0:03:40.50,Default,,0000,0000,0000,,y sólo se está dibujando "rect" en su lugar, porque sólo se considera la última definición.
Dialogue: 0,0:03:40.50,0:03:43.17,Default,,0000,0000,0000,,Así que vamos a deshacernos de ésta.
Dialogue: 0,0:03:43.17,0:03:48.29,Default,,0000,0000,0000,,Ahora, la función "draw" no es la única función predefinida
Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,,que tiene este comportamiento especial.
Dialogue: 0,0:03:50.50,0:03:52.68,Default,,0000,0000,0000,,Hay muchas otras funciones también,
Dialogue: 0,0:03:52.68,0:03:56.69,Default,,0000,0000,0000,,para responder a las interacciones del ratón y al uso de teclas.
Dialogue: 0,0:03:56.69,0:04:01.62,Default,,0000,0000,0000,,Digamos que queremos tener un programa que dibuja una elipse coloreada
Dialogue: 0,0:04:01.62,0:04:04.72,Default,,0000,0000,0000,,por donde el usuario pasa el ratón.
Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,,Podríamos hacer eso con una función como ésta...
Dialogue: 0,0:04:09.04,0:04:19.99,Default,,0000,0000,0000,,digamos "mouseX, mouseY, mouseY" y luego "ellipse(mouseX, mouseY, 10, 10)"
Dialogue: 0,0:04:19.100,0:04:22.54,Default,,0000,0000,0000,,Muy bien, oh, hermoso.
Dialogue: 0,0:04:22.54,0:04:27.22,Default,,0000,0000,0000,,Ahora, esta función se está llamando una y otra vez,
Dialogue: 0,0:04:27.22,0:04:31.18,Default,,0000,0000,0000,,aún cuando el usuario no está moviendo el ratón, como en este momento.
Dialogue: 0,0:04:31.18,0:04:34.70,Default,,0000,0000,0000,,Y este programa, funciona, hace lo que queremos que haga,
Dialogue: 0,0:04:34.70,0:04:37.90,Default,,0000,0000,0000,,está pintando esas lindas elipses por toda la pantalla.
Dialogue: 0,0:04:37.90,0:04:42.11,Default,,0000,0000,0000,,Pero resulta que hay una mejor manera de hacer lo mismo
Dialogue: 0,0:04:42.11,0:04:44.29,Default,,0000,0000,0000,,y que es más eficiente.
Dialogue: 0,0:04:44.29,0:04:51.89,Default,,0000,0000,0000,,Entonces podemos cambiar la función "draw" a "mouseMoved" y vamos a ver.
Dialogue: 0,0:04:51.89,0:04:54.58,Default,,0000,0000,0000,,Sigue funcionando.
Dialogue: 0,0:04:54.58,0:04:58.36,Default,,0000,0000,0000,,Verás, nuestro entorno revisa los programas
Dialogue: 0,0:04:58.36,0:05:00.75,Default,,0000,0000,0000,,para ver si se ha definido una función "mouseMoved",
Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,,y si se ha hecho, llama a la función cada vez que el usuario mueve el ratón.
Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,,Pero no se llamará si el usuario no mueve el ratón.
Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,,Así que antes, estábamos llamando al código de la función "draw"
Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,,cuando no lo necesitábamos, una y otra vez.
Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,,Y ahora, sólo llamamos al código en "mouseMoved"
Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,,cuando "mouseX" o "mouseY" han cambiado.
Dialogue: 0,0:05:23.29,0:05:27.31,Default,,0000,0000,0000,,Así que nuestro programa es más eficiente y eso es algo bueno.
Dialogue: 0,0:05:27.31,0:05:30.73,Default,,0000,0000,0000,,Generalmente, si sólo quieres cambiar el resultado de tu programa
Dialogue: 0,0:05:30.73,0:05:34.52,Default,,0000,0000,0000,,cuando el usuario mueve el ratón, entonces es mejor que tengas tu código
Dialogue: 0,0:05:34.52,0:05:37.21,Default,,0000,0000,0000,,dentro de la función "mouseMoved".
Dialogue: 0,0:05:37.21,0:05:40.99,Default,,0000,0000,0000,,Y existen muchas funciones predefinidas como ésta,
Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,,puedes ver más ejemplos en la documentación.
Dialogue: 0,0:05:44.66,0:05:48.87,Default,,0000,0000,0000,,Como "mousePressed", "mouseReleased", "keyPressed", y otras.
Dialogue: 0,0:05:48.87,0:05:53.99,Default,,0000,0000,0000,,Así que recuerda, si quieres usar una función especial predefinida,
Dialogue: 0,0:05:53.99,0:05:59.24,Default,,0000,0000,0000,,como "mouseMoved" o "draw", escríbelas correctamente, y úsalas correctamente.
Dialogue: 0,0:05:59.24,0:06:03.41,Default,,0000,0000,0000,,Si no es así, entonces asegurate de que los nombres de tus funciones
Dialogue: 0,0:06:03.45,0:06:06.62,Default,,0000,0000,0000,,sean nuevos y únicos.