Jugando con el ratón

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En realidad, empezamos a trabajar con el ratón en el artículo relativo al efecto Moiré. En este vamos a conocer más posibilidades de gestionar, a través de Processing, los movimientos y pulsaciones del ratón. Para ello vamos a ver cómo detectar, no sólo la posición, sino si está pulsado o no, que botón está pulsado, y si estamos o no moviendo la rueda, y cuánto. Vamos, un control total sobre este dispositivo que se ha convertido en imprescindible en el uso diario del ordenador. ¿He captado tu atención? Pues empecemos.

PRIMER EJERCICIO

botones_y_circuloVamos a dibujar una superficie con un círculo y cuatro botones. Cuando pulsemos sobre uno de ellos, se dibujará en inverso, para ver que está pulsado, y el círculo se desplazará, dentro de una zona determinada y sin salir de la misma. Si soltamos el botón, el círculo se parará, y si pulsamos fuera de los botones, simplemente la pulsación será ignorada.

Cuando iniciamos el sketch, tiene un aspecto cómo el que vemos en la imagen de la izquierda.

Arriba ves la zona donde están los cuatro botones. Al pulsar cada uno, el círculo se mueve en la dirección indicada, si no está al límite de lo establecido. El sketch se llama mover_circulo_simple.pde:

 

Cópialo y pegalo en tu IDE de Processing, y ejecútalo para ver cómo opera. No te asustes porque el código parezca un poco largo. Si te paras un momento a mirarlo, verás que la mayoría de las instrucciones ya las conoces individualmente. No obstante, si hay algunas cosas que debemos comentar. Vamos a ello.

Las variables del lenguaje mouseX y mouseY contienen las coordenadas X e Y del ratón en el momento de leerlas. Es importante que aprendas a pensar en modo cíclico, es decir, que no olvides que el cuerpo principal del sketch, contenido en la sección draw, se ejecuta una vez detrás de otra. Cuando llega al final, vuelve a ejecutarse desde el principio. Las variables mencionadas te devuelven la posición del ratón en el momento exacto en que se pasa por la correspondiente instrucción. Si mueves el ratón después, las variables se actualizan internamente, pero no te darán los valores hasta que vuelvas a leerlas en otra instrucción, o en el siguiente ciclo.

La variable del lenguage mousePressed contiene un valor lógico, que será true si alguno de los botones del ratón está pulsado, y false, si están todos sueltos.

Fíjate que dentro del ciclo del sketch, lo único que hacemos es redibujar la parte inferior del lienzo en negro, para que se confunda a la vista con el fondo, y el círculo azul en las coordenadas posX y posY que tenga en ese momento. Tambien leemos la posición del puntero del ratón para comprobar si está sobre alguna de las cuatro zonas que corresponden a los cuatro botones. En cada comprobación, si el puntero está sobre un botón llamamos a la función que lo dibuja, pasándole el estado del botón del ratón en ese momento. Si está fuera, llamamos a la función que dibuja un botón no pulsado.

Las funciones que dibujan los botones, y que, si procede, actualizan las coordenadas del círculo están definidas fuera de las secciones setup y draw, por lo que pueden ser invocadas desde donde nos hagan falta.

Las variables de las coordenadas del círculo también están fuera de las secciones setup y draw. Esto quiere decir que son globales a todo el script. Así, cuando son modificadas en las funciones, los nuevos valores están disponibles en la sección draw, cuando se redibuja el círculo. Es importante que declares fuera las variables que necesites cómo globales. Si las hubieras declarado dentro de las funciones, no estarían disponbles fuera, a menos que las sacarás específicamente con return. Hablaremos más sobre funciones y ámbito de vida de las variables en un artículo posterior.

Por lo demás, el código es bastante simple. Ejecútalo, pruébalo, y analizalo con los comentarios incluidos, para ver cómo funciona.

LA RUEDA

En el sketch anterior, aparte de leer las coordenadas del ratón, leiamos también, si había algún botón pulsado, pero no qué botón está pulsado, o si se está moviendo la rueda. Estos son parámetros que nos permitirían crear sketchs con más funcionalidades. Veamos cómo podemos sacarle más partido al ratoncito. Vamos a jugar un poco con la rueda, en el sketch moviendo_la_rueda.pde:

Observa el código y los comentarios. Cuando ejecutes este sketch verás un lienzo negro. Al girar la rueda del ratón hacia delante y hacia atras verás un medidor amarillo que crece y decrece desde la mitad del lienzo hacia arriba y hacia abajo.

La clave de todo está en la función mouseWheel(), que es propia de processing y se ejecuta, automáticamente, cada vez que se gira la rueda. No necesitas invlocarla tú. Fíjate que en el código no se invoca en ninguna parte. Es la versión Processing de un detector de eventos. Y, efectivamente, la función recibe, cómo argumento, un objeto evento de la clase MouseEvent, del que podemos deducir el sentido y velocidad del giro de la rueda mediante su método.getCount(). Este devuelve un valor negativo, si la rueda gira hacia delante, y positivo si gira hacia atrás. El valor será más elevado, cuanto mayor sea la velocidad de giro. Por defecto, con un giro normal, es -1.0 (hacia delante) y 1.0 (hacia atrás).

 

ATENCIÓN. Quizá podrías pensar que el método getCount() del evento devuelve el valor 0 si la rueda no gira hacia delante ni hacia atrás. Piénsalo. Si la rueda no gira, la función mouseWheel() no se ejecuta, por lo que no hay objeto evento, ni método getCount(), ni se ejecuta nada del código definido en la función.

 

ATENCIÓN. Cómo es lógico, el sketch sólo detecta el giro de la rueda si el ratón se encuentra sobre el lienzo. Evidentemente, si está sobre una zona de la pantalla fuera del lienzo, no detecta nada.

EL BOTÓN PULSADO

Cuando pulsas un botón del ratón se dispara una función propia de Processing, de un modo similar al que hemos visto en el apartado anterior, llamada mousePressed(). No la confundas con la variable mousePressed, que devuelve un valor lógico relativo al estado de pulsado o no pulsado de un botón.

Cuando sueltas un botón que estaba pulsado se dispara una función llmada mouseReleased().

Además, cuando pulsas un botón y lo sueltas se dispara una función llamada mouseClicked().

Existe una variable de Processing llamada mouseButton, que almacena un valor relativo al último botón que ha disparado un evento. Este valor es LEFT si el botón ha sido el izquierdo, RIGHT si ha sido el derecho y CENTER si ha sido el central.

En el siguiente sketch se nos abre un lienzo. Sitúa el ratón sobre él y ve probando a pulsar y soltar los botones. En la consola verás unos mensajes relativos a la última acción que hayas hecho. El sketch se llama los_botones.pde:

     

Un comentario:

  1. Pingback: El teclado y la ventana » eldesvandejose.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *