Interacción del Ratón (Version Video)

Este es una video-clase interactive donde puedes ver la pantalla con código , preparado para hacer la creación de subtítulos y traducción mas fácil. Es mejor que veas nuestros video-clase aqui: https://www.khanacademy.org/cs/programming/

Ya aprendiste ha crear tus propias variables y a usarlas.

Ahora aprenderemos 2 variables especiales: mouseX y mouseY.

Nunca tendras que crear estas variables, por que de hecho, ya existen.

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.

Esto permite hacer facilmente cosas interactivas que dependen de la posición del ratón.

Veamos la elipse que estoy dibujando aqui.

Ahorita, la estoy dibujando en 200, 200.

Si uso mouseX y mouseY, las variables especiales, entonces puedo dibujarla la elipse en las coordinadas mouseX y mouseY.

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.

Esto es super cool, puedes ver lo que estoy dibujando? Woo!

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

Ves?

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.

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.

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.

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.

Muy bien, ahora podemos hacer cosas mas entretenidas.

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?

Ahora puedes ver que la elipse solo sigue mi coordinada x, ignorando el valor de la coordinada y de mi ratón.

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?

Ahora mira, woo! Tengo esta cosa que parece como un genial pincel.

O, tambien puedo intercambiar estas variables. Dejame traer de regreso la llamada a la función background.

Se siente raro. Tengo los controles del ratón haciendo lo opuesto a lo que normalmente hacen.

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.

Esto es todo sobre mouseX y mouseY - muy divertido. Disfruta!