0:00:00.869,0:00:03.972
Ya aprendiste a crear tus propias variables y a usarlas.

0:00:03.972,0:00:06.540
Ahora aprenderemos 2 variables especiales:

0:00:06.540,0:00:10.300
"mouseX" y "mouseY".

0:00:10.300,0:00:16.128
Nunca tendrás que crear estas variables, porque de hecho, ya existen.

0:00:16.128,0:00:19.811
El programa establece los valores de estas variable, detrás de bastidores,

0:00:19.811,0:00:24.221
asegurándose de que el valor de "mouseX" sea siempre la posición "x" de tu ratón,

0:00:24.221,0:00:27.541
y que el valor de "mouseY" sea la posición "y" de tu ratón.

0:00:27.541,0:00:30.728
Esto permite hacer fácilmente cosas interactivas,

0:00:30.728,0:00:33.278
que dependen de la posición del ratón.

0:00:33.278,0:00:36.508
Veamos la elipse que estoy dibujando aquí.

0:00:36.508,0:00:40.732
En este momento, siempre la estoy dibujando en 200, 200.

0:00:40.732,0:00:44.278
Si uso "mouseX" y "mouseY", las variables especiales,

0:00:44.278,0:00:49.198
entonces puedo dibujar la elipse en las coordenadas "mouseX" y "mouseY".

0:00:49.198,0:00:52.483
Ahora, si muevo el ratón sobre el área de dibujo, puedes ver

0:00:52.483,0:00:55.053
la elipse dibujada en donde el ratón se posiciona,

0:00:55.053,0:00:57.233
la elipse sigue al ratón.

0:00:57.233,0:01:01.220
Esto es super interesante, ¿puedes ver lo que estoy dibujando? ¡Woo!

0:01:01.220,0:01:04.009
Si vas a usar "mouseX" y "mouseY", tienes que asegurarte

0:01:04.009,0:01:06.539
de que las estás usando dentro de la función "draw",

0:01:06.539,0:01:08.229
porque mira qué pasa

0:01:08.229,0:01:13.419
si movemos estas dos líneas de código fuera de la función "draw".

0:01:13.419,0:01:15.001
¿Lo ves?

0:01:15.001,0:01:19.025
Ahora, este código que tenemos aquí sólo corre una vez,

0:01:19.025,0:01:22.215
entonces la elipse se dibuja una vez nada más,

0:01:22.215,0:01:24.677
y se dibuja en la posición de mi ratón,

0:01:24.677,0:01:26.920
muy al principio del programa.

0:01:26.920,0:01:30.573
Es por eso que necesitamos ponerlo dentro de la función "draw",

0:01:30.573,0:01:36.053
porque la función "draw" es llamada repetidamente mientras nuestro programa está corriendo.

0:01:36.053,0:01:40.735
Entonces queremos que cuando sea llamada, vea cuáles son los valores actuales de "mouseX" y "mouseY"

0:01:40.735,0:01:43.505
en ese momento, para que dibuje la elipse en esa posición.

0:01:43.505,0:01:46.181
Si piensas en eso, en realidad es muy similar a una animación,

0:01:46.181,0:01:49.131
está cambiando con el tiempo, sólo que de una manera diferente.

0:01:49.131,0:01:52.547
Muy bien, ahora podemos hacer cosas más entretenidas.

0:01:52.547,0:01:57.261
¿Qué tal si en vez de dibujar la elipse sobre las coordenadas "mouseX" y "mouseY",

0:01:57.261,0:02:03.461
la dibujo en "mouseX" pero configuro "mouseY" a algo así como 300?

0:02:03.461,0:02:07.249
Ahora puedes ver que la elipse sólo sigue mi coordenada "x",

0:02:07.249,0:02:10.189
ignorando el valor de la coordenada "y" de mi ratón.

0:02:10.189,0:02:17.047
Entonces, ¿qué tal si dibujo la elipse en las coordenadas "mouseX" y "mouseY" de nuevo,

0:02:17.047,0:02:20.477
pero quito la llamada a la función "background", comentándola?

0:02:20.477,0:02:24.933
Ok, ¡woo!, Ahora mira, tengo esta cosa que parece como un pincel divertido.

0:02:24.933,0:02:27.233
Es asombroso.

0:02:27.233,0:02:30.709
O, también puedo intercambiar estas variables.

0:02:30.709,0:02:33.199
Déjame traer de regreso la llamada a la función "background".

0:02:33.199,0:02:37.509
Entonces, cambio estas variables aquí, "mouseX" y "mouseY",

0:02:37.509,0:02:38.829
y vemos qué pasa.

0:02:38.829,0:02:41.607
Ok, ahora se siente muy raro.

0:02:41.607,0:02:43.907
Tengo los controles del ratón haciendo lo opuesto,

0:02:43.907,0:02:45.387
a lo que esperamos que hagan.

0:02:45.387,0:02:49.080
Pero es genial, te puedes imaginar el hacer un juego que trata de dibujar algo o

0:02:49.080,0:02:53.400
hacer algo mientras usas los controles del ratón invertidos.

0:02:53.400,0:02:58.818
Esto es todo sobre "mouseX" y "mouseY", muy divertido. ¡Disfruta!