WEBVTT

00:00:00.869 --> 00:00:03.972
Ya aprendiste a crear tus propias variables y a usarlas.

00:00:03.972 --> 00:00:06.540
Ahora aprenderemos 2 variables especiales:

00:00:06.540 --> 00:00:10.300
"mouseX" y "mouseY".

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

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

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

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

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

00:00:30.728 --> 00:00:33.278
que dependen de la posición del ratón.

00:00:33.278 --> 00:00:36.508
Veamos la elipse que estoy dibujando aquí.

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

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

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

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

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

00:00:55.053 --> 00:00:57.233
la elipse sigue al ratón.

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

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

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

00:01:06.539 --> 00:01:08.229
porque mira qué pasa

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

00:01:13.419 --> 00:01:15.001
¿Lo ves?

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

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

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

00:01:24.677 --> 00:01:26.920
muy al principio del programa.

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

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

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

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

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

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

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

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

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

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

00:02:07.249 --> 00:02:10.189
ignorando el valor de la coordenada "y" de mi ratón.

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

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

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

00:02:24.933 --> 00:02:27.233
Es asombroso.

00:02:27.233 --> 00:02:30.709
O, también puedo intercambiar estas variables.

00:02:30.709 --> 00:02:33.199
Déjame traer de regreso la llamada a la función "background".

00:02:33.199 --> 00:02:37.509
Entonces, cambio estas variables aquí, "mouseX" y "mouseY",

00:02:37.509 --> 00:02:38.829
y vemos qué pasa.

00:02:38.829 --> 00:02:41.607
Ok, ahora se siente muy raro.

00:02:41.607 --> 00:02:43.907
Tengo los controles del ratón haciendo lo opuesto,

00:02:43.907 --> 00:02:45.387
a lo que esperamos que hagan.

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

00:02:49.080 --> 00:02:53.400
hacer algo mientras usas los controles del ratón invertidos.

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