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

2
00:00:03,972 --> 00:00:06,540
Ahora aprenderemos 2 variables especiales:

3
00:00:06,540 --> 00:00:10,300
"mouseX" y "mouseY".

4
00:00:10,300 --> 00:00:16,128
Nunca tendrás que crear estas variables, porque de hecho, ya existen.

5
00:00:16,128 --> 00:00:19,811
El programa establece los valores de estas variable, detrás de bastidores,

6
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,

7
00:00:24,221 --> 00:00:27,541
y que el valor de "mouseY" sea la posición "y" de tu ratón.

8
00:00:27,541 --> 00:00:30,728
Esto permite hacer fácilmente cosas interactivas,

9
00:00:30,728 --> 00:00:33,278
que dependen de la posición del ratón.

10
00:00:33,278 --> 00:00:36,508
Veamos la elipse que estoy dibujando aquí.

11
00:00:36,508 --> 00:00:40,732
En este momento, siempre la estoy dibujando en 200, 200.

12
00:00:40,732 --> 00:00:44,278
Si uso "mouseX" y "mouseY", las variables especiales,

13
00:00:44,278 --> 00:00:49,198
entonces puedo dibujar la elipse en las coordenadas "mouseX" y "mouseY".

14
00:00:49,198 --> 00:00:52,483
Ahora, si muevo el ratón sobre el área de dibujo, puedes ver

15
00:00:52,483 --> 00:00:55,053
la elipse dibujada en donde el ratón se posiciona,

16
00:00:55,053 --> 00:00:57,233
la elipse sigue al ratón.

17
00:00:57,233 --> 00:01:01,220
Esto es super interesante, ¿puedes ver lo que estoy dibujando? ¡Woo!

18
00:01:01,220 --> 00:01:04,009
Si vas a usar "mouseX" y "mouseY", tienes que asegurarte

19
00:01:04,009 --> 00:01:06,539
de que las estás usando dentro de la función "draw",

20
00:01:06,539 --> 00:01:08,229
porque mira qué pasa

21
00:01:08,229 --> 00:01:13,419
si movemos estas dos líneas de código fuera de la función "draw".

22
00:01:13,419 --> 00:01:15,001
¿Lo ves?

23
00:01:15,001 --> 00:01:19,025
Ahora, este código que tenemos aquí sólo corre una vez,

24
00:01:19,025 --> 00:01:22,215
entonces la elipse se dibuja una vez nada más,

25
00:01:22,215 --> 00:01:24,677
y se dibuja en la posición de mi ratón,

26
00:01:24,677 --> 00:01:26,920
muy al principio del programa.

27
00:01:26,920 --> 00:01:30,573
Es por eso que necesitamos ponerlo dentro de la función "draw",

28
00:01:30,573 --> 00:01:36,053
porque la función "draw" es llamada repetidamente mientras nuestro programa está corriendo.

29
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"

30
00:01:40,735 --> 00:01:43,505
en ese momento, para que dibuje la elipse en esa posición.

31
00:01:43,505 --> 00:01:46,181
Si piensas en eso, en realidad es muy similar a una animación,

32
00:01:46,181 --> 00:01:49,131
está cambiando con el tiempo, sólo que de una manera diferente.

33
00:01:49,131 --> 00:01:52,547
Muy bien, ahora podemos hacer cosas más entretenidas.

34
00:01:52,547 --> 00:01:57,261
¿Qué tal si en vez de dibujar la elipse sobre las coordenadas "mouseX" y "mouseY",

35
00:01:57,261 --> 00:02:03,461
la dibujo en "mouseX" pero configuro "mouseY" a algo así como 300?

36
00:02:03,461 --> 00:02:07,249
Ahora puedes ver que la elipse sólo sigue mi coordenada "x",

37
00:02:07,249 --> 00:02:10,189
ignorando el valor de la coordenada "y" de mi ratón.

38
00:02:10,189 --> 00:02:17,047
Entonces, ¿qué tal si dibujo la elipse en las coordenadas "mouseX" y "mouseY" de nuevo,

39
00:02:17,047 --> 00:02:20,477
pero quito la llamada a la función "background", comentándola?

40
00:02:20,477 --> 00:02:24,933
Ok, ¡woo!, Ahora mira, tengo esta cosa que parece como un pincel divertido.

41
00:02:24,933 --> 00:02:27,233
Es asombroso.

42
00:02:27,233 --> 00:02:30,709
O, también puedo intercambiar estas variables.

43
00:02:30,709 --> 00:02:33,199
Déjame traer de regreso la llamada a la función "background".

44
00:02:33,199 --> 00:02:37,509
Entonces, cambio estas variables aquí, "mouseX" y "mouseY",

45
00:02:37,509 --> 00:02:38,829
y vemos qué pasa.

46
00:02:38,829 --> 00:02:41,607
Ok, ahora se siente muy raro.

47
00:02:41,607 --> 00:02:43,907
Tengo los controles del ratón haciendo lo opuesto,

48
00:02:43,907 --> 00:02:45,387
a lo que esperamos que hagan.

49
00:02:45,387 --> 00:02:49,080
Pero es genial, te puedes imaginar el hacer un juego que trata de dibujar algo o

50
00:02:49,080 --> 00:02:53,400
hacer algo mientras usas los controles del ratón invertidos.

51
00:02:53,400 --> 00:02:58,818
Esto es todo sobre "mouseX" y "mouseY", muy divertido. ¡Disfruta!