WEBVTT 00:00:00.869 --> 00:00:03.972 Ya aprendiste ha crear tus propias variables y a usarlas. 00:00:03.972 --> 00:00:10.790 Ahora aprenderemos 2 variables especiales: mouseX y mouseY. 00:00:10.790 --> 00:00:16.658 Nunca tendras que crear estas variables, por que de hecho, ya existen. 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. 00:00:28.171 --> 00:00:33.278 Esto permite hacer facilmente cosas interactivas que dependen de la posición del ratón. 00:00:33.278 --> 00:00:36.508 Veamos la elipse que estoy dibujando aqui. 00:00:36.508 --> 00:00:41.192 Ahorita, la estoy dibujando en 200, 200. 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. 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. 00:00:57.743 --> 00:01:01.760 Esto es super cool, puedes ver lo que estoy dibujando? Woo! 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 00:01:13.839 --> 00:01:15.501 Ves? 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. 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. 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. 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. 00:01:49.481 --> 00:01:52.957 Muy bien, ahora podemos hacer cosas mas entretenidas. 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? 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. 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? 00:02:21.937 --> 00:02:27.933 Ahora mira, woo! Tengo esta cosa que parece como un genial pincel. 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. 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. 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. 00:02:53.400 --> 00:02:59.808 Esto es todo sobre mouseX y mouseY - muy divertido. Disfruta!