1
00:00:00,869 --> 00:00:03,972
Ya aprendiste ha crear tus propias variables y a usarlas.

2
00:00:03,972 --> 00:00:10,790
Ahora aprenderemos 2 variables especiales: mouseX y mouseY.

3
00:00:10,790 --> 00:00:16,658
Nunca tendras que crear estas variables, por que de hecho, ya existen.

4
00:00:16,658 --> 00:00:28,171
El programa establece los valores de estas variable, detrás de las cortinas, asegurándose que el valor de mouseX sea siempre la posición x de tu ratón y mouseY la posición de tu ratón.

5
00:00:28,171 --> 00:00:33,278
Esto permite hacer facilmente cosas interactivas que dependen de la posición del ratón.

6
00:00:33,278 --> 00:00:36,508
Veamos la elipse que estoy dibujando aqui.

7
00:00:36,508 --> 00:00:41,192
Ahorita, la estoy dibujando en 200, 200.

8
00:00:41,192 --> 00:00:49,718
Si uso mouseX y mouseY, las variables especiales, entonces puedo dibujarla la elipse en las coordinadas mouseX y mouseY.

9
00:00:49,718 --> 00:00:57,743
Ahora, si muevo el ratón sobre el canvas, puedes ver la elipse es dibujada en donde el ratón esta - entonces sigue a donde el ratón va.

10
00:00:57,743 --> 00:01:01,760
Esto es super cool, puedes ver lo que estoy dibujando? Woo!

11
00:01:01,760 --> 00:01:13,839
Si vas a use mouseX y mouseY, tiene que asegurarte que esten dentro de la función draw, porque mira que pase si movemos estas dos lineas fuera de la función draw

12
00:01:13,839 --> 00:01:15,501
Ves?

13
00:01:15,501 --> 00:01:26,955
Este codigo solo corre una vez, entonces la elipse es dibujada una vez nada más, y es dibujada donde mi ratón esta al principio del programa.

14
00:01:26,955 --> 00:01:36,303
Por eso es que necesitamos ponerlo dentro de la función draw, porque la función draw es la función que es llamada repetidamente mientras nuestro programa esta corriendo.

15
00:01:36,303 --> 00:01:43,735
Entonces queremos que cuando sea llamada, vea cuales son los valores actuales de mouseX y mouseY en ese momento, para que dibuje la elipse en esa posicion.

16
00:01:43,735 --> 00:01:49,481
Si te pones a pensar, en realidad es bien similar a una animación - cambia en la medida que pasa el tiempo, solo que en una forma diferente.

17
00:01:49,481 --> 00:01:52,957
Muy bien, ahora podemos hacer cosas mas entretenidas.

18
00:01:52,957 --> 00:02:03,871
Que tal si, en vez de dibujar la elipse sobre las coordinadas mouseX y mouseY, la dibujo en mouseX pero fijo mouseY a algo asi como 300?

19
00:02:03,871 --> 00:02:10,589
Ahora puedes ver que la elipse solo sigue mi coordinada x, ignorando el valor de la coordinada y de mi ratón.

20
00:02:10,589 --> 00:02:21,937
Entonces, que tal si dibujo la elipse en las coordinadas mouseX y mouseY de nuevo, pero quito la llamada a la función background al commentarla?

21
00:02:21,937 --> 00:02:27,933
Ahora mira, woo! Tengo esta cosa que parece como un genial pincel.

22
00:02:27,933 --> 00:02:39,509
O, tambien puedo intercambiar estas variables. Dejame traer de regreso la llamada a la función background.

23
00:02:39,509 --> 00:02:45,907
Se siente raro. Tengo los controles del ratón haciendo lo opuesto a lo que normalmente hacen.

24
00:02:45,907 --> 00:02:53,400
Pero esta genial, te puedes imaginar el hacer un juego que trata de dibujar algo o hacer algo mientras usas los controles del ratón invertidos.

25
00:02:53,400 --> 00:02:59,808
Esto es todo sobre mouseX y mouseY - muy divertido. Disfruta!