Funciones especiales de ProcessingJS

Hasta este punto, te habrás dado cuenta de que has definido

una función particular cada vez que quieres animar un programa,

la función "draw".

Para recordártelo, aquí está nuestro programa del carro animado nuevamente.

Tiene esta variable llamada "x" y que está inicializada en 11.

Y luego dentro de la función "draw", se dibuja el carro en la variable "x",

y luego suma 3 a la variable cada vez.

Y eso da como resultado un carro

que se mueve tres pixeles continuamente a lo largo de la pantalla.

Así es como funciona.

Pero ahora que has aprendido cómo hacer tus propias funciones,

probablemente te preguntes, ¿qué pasa con la función "draw"?

¿Por qué siempre la llamamos "draw"?

¿Es una función personalizada?

Y esas son muy buenas preguntas.

Verás, en la librería "ProcessingJS",

la función "draw" es una de las pocas funciones predefinidas

que da a nuestros programas más control sobre lo que pasa en la pantalla.

Una función predefinida es una función que ha sido definida

por la librería "ProcessingJS".

Pero generalmente comienza como una definición vacía.

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

"var draw = function() {}"

y luego está vacío, completamente vacío.

Ahora, llamamos a la librería "ProcessingJS" en cada programa que hacemos en Khan Academy,

Así que nunca ves ese código.

Pero creeme, existe.

Ahora, voy a comentar el código, ya que "ProcessingJS" lo hace por nosotros.

Cuando defines "draw" en nuestro programa,

esta nueva definición anula la definición anterior.

Y ahora la función "draw"

en realidad hace cosas emocionantes, como dibujar un carro.

Ahora, la pregunta es, ¿por qué la función "draw" se llama repetidas veces?

Bueno, también hay código en la librería "ProcessingJS"

que establece un temporizador del navegador y llama a la función repetidamente,

una vez tras otra.

Tenemos que darle a la función el nombre de "draw" porque es el nombre de la función

que la librería "ProcessingJS" está llamando repetidamente.

Si renombramos esta función como... digamos "drawCar",

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

Entonces ahora puedes ver que si renombramos esto como "drawCar",

no vemos ninguna animación.

Y esto es porque esta función no se está llamando repetidamente,

porque no se llama "draw".

Así que tenemos que poner el código que queremos que se llame repetidamente

dentro de una función a la que nombremos "draw" exactamente.

Así que voy a hacerlo de nuevo, y voy a llamar a "drawCar" desde aquí.

¡Ajá! Lo tenemos nuevamente.

Muy bien, así que se debe llamar "draw",

y esto también significa que no deberías llamar "draw" a tus funciones personalizadas,

a menos que quieras que se consideren de una manera especial y que sean llamadas una y otra vez.

Y recuerda también que no puedes tener muchas funciones llamadas "draw".

Sólo la última sería considerada.

Si tenemos "rect" aquí dentro

Entonces ahora podemos ver que nuestro carro ya no se está dibujando,

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

Así que vamos a deshacernos de ésta.

Ahora, la función "draw" no es la única función predefinida

que tiene este comportamiento especial.

Hay muchas otras funciones también,

para responder a las interacciones del ratón y al uso de teclas.

Digamos que queremos tener un programa que dibuja una elipse coloreada

por donde el usuario pasa el ratón.

Podríamos hacer eso con una función como ésta...

digamos "mouseX, mouseY, mouseY" y luego "ellipse(mouseX, mouseY, 10, 10)"

Muy bien, oh, hermoso.

Ahora, esta función se está llamando una y otra vez,

aún cuando el usuario no está moviendo el ratón, como en este momento.

Y este programa, funciona, hace lo que queremos que haga,

está pintando esas lindas elipses por toda la pantalla.

Pero resulta que hay una mejor manera de hacer lo mismo

y que es más eficiente.

Entonces podemos cambiar la función "draw" a "mouseMoved" y vamos a ver.

Sigue funcionando.

Verás, nuestro entorno revisa los programas

para ver si se ha definido una función "mouseMoved",

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

Pero no se llamará si el usuario no mueve el ratón.

Así que antes, estábamos llamando al código de la función "draw"

cuando no lo necesitábamos, una y otra vez.

Y ahora, sólo llamamos al código en "mouseMoved"

cuando "mouseX" o "mouseY" han cambiado.

Así que nuestro programa es más eficiente y eso es algo bueno.

Generalmente, si sólo quieres cambiar el resultado de tu programa

cuando el usuario mueve el ratón, entonces es mejor que tengas tu código

dentro de la función "mouseMoved".

Y existen muchas funciones predefinidas como ésta,

puedes ver más ejemplos en la documentación.

Como "mousePressed", "mouseReleased", "keyPressed", y otras.

Así que recuerda, si quieres usar una función especial predefinida,

como "mouseMoved" o "draw", escríbelas correctamente, y úsalas correctamente.

Si no es así, entonces asegurate de que los nombres de tus funciones

sean nuevos y únicos.