Intro Processing v1.5 - 11 - Raúl Lacabanne

47

Punto 11 – Interactividad a través del ratón y del tecladoHasta el momento hemos visto cómo asignar valores a las variables: de forma 1) directa (a = 10;), 2) mediante operaciones aritméticas (b = 5 +a;), ó 3) como retorno de funciones pseudoaleatorias (c = random(10);). A continuación veremos una cuarta forma, que utiliza el ingreso de datos por parte de un usuario mediante dispositivos de entrada como el ratón o el teclado.

Ratón: variables de sistema

El puntero de ratón no es más que un indicador bidimensional de los elementos disponibles en la interfaz gráfica de usuario. Las variables de sistema más usadas en Processing relacionadas al ratón son:

• mouseX

• mouseY

• pmouseX

• pmouseY

• mousePressed

• mouseButton

Veamos algunos ejemplos de uso de variables de sistema mouseX y mouseY:void draw() { frameRate(12); println(mouseX + " : " + mouseY);}

void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipseMode(CENTER); ellipse(mouseX, mouseY, 33, 33);}

void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipse(mouseX, 16, 33, 33); ellipse(mouseX + 20, 50, 33, 33); ellipse(mouseX 20, 84, 33, 33);}

Introducción a Processing v1.5+ Docente: Raúl Lacabanne

48

void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipse(mouseX, 16, 33, 33); ellipse(mouseX / 2, 50, 33, 33); ellipse(mouseX * 2, 84, 33, 33);}

void setup() { size(200, 200); smooth(); noStroke();}void draw() { float x = mouseX; float y = mouseY; float ix = width mouseX; // Inverso de X float iy = height mouseY; // Inverso de Y background(126); fill(255, 150); ellipse(x, height/2, y, y); fill(0, 159); ellipse(ix, height/2, iy, iy);}

void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); float normX = mouseX / float(width); ellipse(mouseX, 16, 33, 33); ellipse(pow(normX, 4) * width, 50, 33, 33); ellipse(pow(normX, 8) * width, 84, 33, 33);}

A continuación dos ejemplos de uso de variables de sistema pmouseX y pmouseY:void draw() { frameRate(12); println(pmouseX mouseX);}


49

void setup() { size(100, 100); strokeWeight(8); smooth();}void draw() { background(204); line(mouseX, mouseY, pmouseX, pmouseY);}

Ejemplo de estructura if y variable de sistema mousePressed:void setup() { size(640, 200); background(102);}

void draw() { stroke(255); if(mousePressed == true) { line(mouseX, mouseY, pmouseX, pmouseY); }}

Otro ejemplo de estructura if y variable de sistema mousePressed:// Pinta el relleno a negro cuando se presiona el botón del ratón.

void draw() { if (mousePressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50);}

Ejemplo de estructura if y variable de sistema mouseButton:// Pinta el relleno a negro si presiono el botón izquierdo,// a blanco si es el derecho y a gris si es el medio.// mouseButton acepta las constantes: LEFT, RIGHT y CENTER.

void setup() { size(100, 100);}

void draw() { if (mouseButton == LEFT) { fill(0); // Negro } else if (mouseButton == RIGHT) { fill(255); // Blanco } else { fill(126); // Gris } rect(25, 25, 50, 50);}


50

Versión alternativa del ejemplo anterior:void setup() { size(100, 100);}

void draw() { if (mousePressed == true) { if (mouseButton == LEFT) { fill(0); // Negro } else if (mouseButton == RIGHT) { fill(255); // Blanco } } else { fill(126); // Gris } rect(25, 25, 50, 50);}

Teclado: variables de sistema

Las tres variables de sistema que devuelven valores relacionados al teclado son:• keyPressed

• key

• keyCode

Dos ejemplo de uso de variable de sistema keyPressed:// Dibuja un rectángulo mientras se mantiene presionada una tecla.

void setup() { size(100, 100); smooth(); strokeWeight(4);}

void draw() { background(204); if (keyPressed == true) { rect(40, 40, 20, 20); } else { line(20, 20, 80, 80); }}

// Mueve una línea si se mantiene presionada una tecla.

int x = 20;



51

void draw() { background(204); if (keyPressed == true) { x++; } line(x, 20, x60, 80);}

Ejemplo de uso de variables de sistema keyPressed y key:// Dibuja una línea si se mantiene presionada la tecla 'a' o 'A'.


void draw() { background(204); if ((keyPressed == true) && ((key == 'a') || (key == 'A'))) { line(50, 25, 50, 75); } else { ellipse(50, 50, 50, 50); }}

Ejemplo de uso de variables de sistema keyPressed, key y keyCode:// Uso de variable de sistema keyCode.// keyCode acepta como constantes:// las teclas de dirección UP, DOWN, LEFT, RIGHT, ALT, CONTROL y SHIFT.

int y = 35;

void setup() { size(100, 100);}

void draw() { background(204); line(10, 50, 90, 50); if (key == CODED) { if (keyCode == UP) { y = 20; } else if (keyCode == DOWN) { y = 50; } } else { y = 35; } rect(25, y, 50, 30);}


52

Ratón: funciones de evento

Además de las variables de sistema existen también lo que se denomina función de evento. Esto hace referencia a una bloque que se dispara cada vez que el sistema detecta el evento en cuestión (por ejemplo la presión de un botón del ratón, o la liberación de dicho botón, etc.). Las funciones de evento más usadas son:

• mousePressed()

◦ // El código dentro de esta función se ejecuta una vez cuando se presiona un botón de ratón.

• mouseReleased()

◦ // El código dentro de esta función se ejecuta una vez cuando se libera un botón de ratón.

• mouseMoved()

◦ // El código dentro de esta función se ejecuta una vez cuando se mueve un ratón.

• mouseDragged()

◦ // El código dentro de esta función se ejecuta una vez cuando se mueve un ratón mientras se encuentra presionado un botón de ratón.

Ejemplo de if...else y uso de función de evento mouseReleased:int valor = 0;

void draw() { fill(valor); rect(25, 25, 50, 50);}

void mouseReleased() { if(valor == 0) { valor = 255; } else { valor = 0; }}

Teclado: funciones de evento

Y por supuesto también disponemos de eventos de teclado:• keyPressed()

◦ // El código dentro de esta función se ejecuta una vez cuando se presiona cualquier tecla.

• keyReleased()

◦ // El código dentro de esta función se ejecuta una vez cuando se libera cualquier tecla.


53

Ejemplo de uso de función de evento keyPressed() y keyReleased():boolean dibujoT = false;

void setup() { size(100, 100); noStroke();}void draw() { background(204); if (dibujoT == true) { rect(20, 20, 60, 20); rect(39, 40, 22, 45); }}void keyPressed() { if ((key == 'T') || (key == 't')) { dibujoT = true; }}void keyReleased() { dibujoT = false;}

Por último un ejemplo que combina el uso de las funciones de evento mousePressed() y keyPressed():void setup() { size(200, 200); background(255); fill(0, 102);}

void draw() {}

void mousePressed() { rectMode(CENTER); rect(mouseX, mouseY, 32, 32);}

void keyPressed() { background(255);}

Lectura recomendada

• Buioli, I. & Pérez Marín, J. "Processing: un lenguaje al alcance de todos", Autoedición, 2013, Unidad 21 "Valores de entrada: Mouse" (pag. 110), Unidad 22 "Dibujo: Formas estáticas" (pag. 117), Unidad 23 "Valores de entrada: Teclado" (pag. 120) y Unidad 24 "Valores de entrada: Eventos" (pag. 123).


54

• Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists”, MIT Press, 2007, Capítulo "Input 1: Mouse I" (pag. 205), Capítulo "Drawing 1: Static Forms" (pag. 217), Capítulo "Input 2: Keyboard" (pag. 223) y Capítulo "Input 3: Events" (pag. 229).

Información complementaria

Ejemplos de estructura if y variables de sistema mouseX y mouseY

// La posición del cursor pinta la mitad izquierda// o derecha de la ventana de visualizació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 }}

// La posición del cursor pinta el tercio izquierdo// central o derecho de la ventana de visualización.


void draw() { background(204); if (mouseX < 33) { rect(0, 0, 33, 100); // Izquierda } else if ((mouseX >= 33) && (mouseX <= 66)) { rect(33, 0, 33, 100); // Centro } else { rect(66, 0, 33, 100); // Derecha }}


55

// La posición del cursor pinta un cuadrante// de la ventana de visualización.


void draw() { background(204); if ((mouseX <= 50) && (mouseY <= 50)) { rect(0, 0, 50, 50); // Superiorizquierdo } else if ((mouseX <= 50) && (mouseY > 50)) { rect(0, 50, 50, 50); // Inferiorizquierdo } else if ((mouseX > 50) && (mouseY < 50)) { rect(50, 0, 50, 50); // Superiorderecho } else { rect(50, 50, 50, 50); // Inferiorderecho }}

// La posición del cursor cambia el color// de relleno de un área rectangular.


void draw() { background(204); if ((mouseX > 40) && (mouseX < 80) && (mouseY > 20) && (mouseY < 80)) { fill(255); } else { fill(0); } rect(40, 20, 40, 60);}


56

Ejemplo de estructura if...else if, variables de sistema mouseX, mouseY y operadores lógicos:void setup() { size(200, 200);}

void draw() { background(255); stroke(0); line(100, 0, 100, 200); line(0, 100, 200, 100);

// Relleno de color negro noStroke(); fill(0); if (mouseX < 100 && mouseY < 100) { rect(0, 0, 100, 100); } else if (mouseX > 100 && mouseY < 100) { rect(100, 0, 100, 100); } else if (mouseX < 100 && mouseY > 100) { rect(0, 100, 100, 100); } else if (mouseX > 100 && mouseY > 100) { rect(100, 100, 100, 100); }}

Ejercicio 12

• Animar tres círculos de acuerdo a los datos ingresados mediante el ratón. • Comentar todas las instrucciones.


Documents

Intro Processing v1.5 - 11 - Raúl Lacabanne