Ratón
Entradas de ratón.
mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton
cursor(), noCursor()
El más común de los dispositivos de entrada es el ratón.
Las coordenadas de la posición del ratón son guardadas y analizadas, y de ellas podemos extraer información del más alto nivel como la velocidad y dirección del movimiento del ratón.
Las variables del Processing mouseX y mouseY almacenan las coordenadas x e y del cursor, relativas al origen de superior izquierdo de la pantalla.
Co este ejemplo, imprimos en la consola los valores de las coordenadas x e y del ratón:
void draw() {
frameRate(12);
println(mouseX + " : " + mouseY);
}
Ejemplo:
// Creamos un círculo con centro en la posición del ratón
void setup() {
size(200, 200);
smooth();
noStroke();
}
void draw() {
background(126);
ellipse(mouseX, mouseY, 33, 33);
}
Ejemplo:
// rotate()
void setup() {
size(100, 100);
strokeWeight(8);
smooth();
}
void draw() {
background(204);
float angle = map(mouseX, 0, width, 0, TWO_PI);
translate(50, 50);
rotate(angle);
line(0, 0, 40, 0);
}
Ejemplo:
// crea un rectángulo negro según la posición del ratón
void setup() {
size(100, 100);
noStroke();
fill(0);
}
void draw() {
background(204);
if (mouseX < 50) {
rect(0, 0, 50, 100); // Izquierda
} else {
rect(50, 0, 50, 100); // Derecha
}
}
Ejemplo:
// rectángulo en cuatro cuadrantes
void setup() {
size(100, 100);
noStroke();
fill(0);
}
void draw() {
background(204);
if ((mouseX <= 50) && (mouseY <= 50)) {
rect(0, 0, 50, 50); // Upper-left
} else if ((mouseX <= 50) && (mouseY > 50)) {
rect(0, 50, 50, 50); // Lower-left
} else if ((mouseX > 50) && (mouseY < 50)) {
rect(50, 0, 50, 50); // Upper-right
} else {
rect(50, 50, 50, 50); // Lower-right
}
}
pmouseX sirve para medir la diferencia entre la posición del ratón actual y la posición anterior, pmouse en x o en y es la posición anteriror.
void draw(){
background(204);
line(mouseX, 20, pmouseX, 80);
}
pmouseY . Ejemplo en Y:
void draw(){
background(204);
line(20, mouseY, 80, pmouseY);
}
Eventos de ratón
El ordenador puede controlar entre uno y tres botones. Por ejemplo presionar un botón cuando el ratón esta sobre un icono.
La variable mousePressed es true if algún botón del ratón es presionado y false si no lo esta. La variable mouseButton es LEFT, CENTER, o RIGHT dependiendo del último botón que se presione. La variable mousePressed vuelve a ser false tan pronto como el botón presionado sea llevantado. La variable mouseButton retiene su valor hasta que un botón diferente sea presionado.
Ejemplo:
// El cuadrado es blanco cuando se presina el ratón
void setup() {
size(100, 100);
}
void draw() {
background(204);
if (mousePressed == true) {
fill(255); // White
} else {
fill(0); // Black
}
rect(25, 25, 50, 50);
}
Ejemplo:
// con mouseButton se controla si se pulsa el botón izquierdo o derecho
void setup() {
size(100, 100);
}
void draw() {
if (mouseButton == LEFT) {
fill(0); // Black
} else if (mouseButton == RIGHT) {
fill(255); // White
} else {
fill(126); // Gray
}
rect(25, 25, 50, 50);
}
MosePressed() la función se ejecuta, cuando presionas el mouse, en este ejemplo se cambia el color al pulsar:
Ejemplo:
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mousePressed() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}
The mouseReleased() la función se ejecuta cuando se levanta el ratón.
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseReleased() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}
MoseClicked() la función se ejecuta, cuando al presionar levantas el mouse, en este ejemplo similar al anterior se cambia el color al pulsar:
Ejemplo
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseClicked() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}
El mouseDragged () la función se llama una vez cada vez que se mueve el ratón con el botón del ratón presionado. En este ejemplo se cambia el color al pulsar y arrastrar.
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseDragged(){
value = value + 5;
if (value > 255) {
value = 0;
}
}
The mouseMoved() la función se ejecuta cuando mueves el ratón sin pulsar. Este ejemplo similaer al anterior:
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
The mouseWheel() la función da valores positivos +1 si se gira hacia abajo y negativos -1 si lo hace hacia arriba, para que funcione leyendo este valor continuamente es necesario que exista draw().
int x, y;
boolean shiftOn = false;
void setup() {
size(600, 600);
smooth();
fill(0);
}
void keyPressed() {
shiftOn = true;
}
void keyReleased() {
shiftOn = false;
}
void mouseWheel(MouseEvent event) {
float pos = event.getCount();
println(pos);
println(shiftOn);
if(shiftOn){
if (pos>0) {
y -= 5;
} else {
y += 5;
}
}else{
if (pos>0) {
x -= 5;
} else {
x += 5;
}
}
}
void draw() {
background(255);
translate(x, y);
ellipse(width/2, height/2, 200, 200);
}
The mouseButton funciona con el evento MosePressed() al presionar el ratón distingue el botón derecho RIGHT y el izquierdo LEFT.
Ejemplo:
// cambia el color del rectángulo al presionar el botón ixzquierdo y derechjo del ratón
void draw() {
rect(25, 25, 50, 50);
}
void mousePressed() {
if (mouseButton == LEFT) {
fill(0);
} else if (mouseButton == RIGHT) {
fill(255);
} else {
fill(126);
}
}
Cursor
El cursor puede ocultarse con la función noCursor() Un cursor puede dibujarse y controlarse con las variables mouseX y mouseY.
// Una elipse hace de cursor
void setup() {
size(100, 100);
strokeWeight(7);
smooth();
noCursor();
}
void draw() {
background(204);
ellipse(mouseX, mouseY, 10, 10);
}
Ejemplo, el cursor esta oculto hasta que se presina:
void setup() {
size(100, 100);
noCursor();
}
void draw() {
background(204);
if (mousePressed == true) {
cursor();
}
}
El cursor cambia, una cruz o una mano:
void setup() {
size(100, 100);
smooth();
}
void draw() {
background(204);
if (mousePressed == true) {
cursor(HAND);
} else {
cursor(MOVE);
}
line(mouseX, 0, mouseX, height);
line(0, mouseY, height, mouseY);
}
Mediante noLoop() hacemos que draw solo se ejecute una vez, con mousepressed() ejecutamos de nu8evo draw():
void setup() {
size(100, 100);
noLoop();
}
void draw() {
background(204);
line(mouseX, 0, mouseX, 100);
}
void mousePressed() {
redraw(); // Ejecuta el código en draw una vez
}