intro processing v1.5 - 11 - raúl lacabanne
Post on 06-Dec-2015
214 Views
Preview:
DESCRIPTION
TRANSCRIPT
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);}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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);}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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;
void setup() { size(100, 100); smooth(); strokeWeight(4);}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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 setup() { size(100, 100); smooth(); strokeWeight(4);}
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);}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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.
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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).
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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 setup() { size(100, 100); noStroke(); fill(0);}
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 }}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
55
// La posición del cursor pinta un cuadrante// de la ventana de visualización.
void setup() { size(100, 100); noStroke(); fill(0);}
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 setup() { size(100, 100); noStroke(); fill(0);}
void draw() { background(204); if ((mouseX > 40) && (mouseX < 80) && (mouseY > 20) && (mouseY < 80)) { fill(255); } else { fill(0); } rect(40, 20, 40, 60);}
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
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.
Introducción a Processing v1.5+ Docente: Raúl Lacabanne
top related