Práctica 9: Interacción con el ratón

En esta práctica vamos a ver cómo Processing nos permite ejecutar acciones al detectar determinados eventos del ratón (como cuando es pulsado, soltado, arrastrado, obtener sus coordenadas sobre pantalla, etc).

Para ello disponemos de las siguientes funciones:

mouseX, mouseY

Nos da la coordenada X e Y (respectivamente) de donde se encuentra situado el cursor del ratón.

Ejemplo:

void setup()
{
size(400,400);
background(255,0,10);
}

void draw()
{
 ellipse(mouseX, mouseY, 80, 80); 
}

Resultado:

En la imagen podemos apreciar cómo se va formando un halo a lo largo de la trayectoria del puntero del ratón. Esto se debe a que se van superponiendo todos los círculos dibujados, y esto es porque no refrescamos el fondo con la función background() cada vez que dibujamos un círculo.

La solución está pasando la función background() del bucle setup() al bucle draw(). De esta manera se limpia el fondo antes de dibujar cada círculo.

void setup()
{
size(400,400);

}

void draw()
{
 background(255,0,10);
 ellipse(mouseX, mouseY, 80, 80); 
}

Se puede apreciar ahora cómo el círculo va siguiendo la trayectoria del ratón pero sin dejar rastro de los círculos dibujados anteriormente.