[Tutorial Processing] Eventos e interrupciones

[singlepic id=755 w=320 h=240 float=center]

Hasta el momento hemos codificado programas solamente secuenciales, es decir, ejecutando linea a linea de principio a fin, si bien nos ha servido para los ejemplos es hora de dar un paso mas allá. En esta ocasión veremos lo que son los eventos del sistema y como ejecutarlos.

Un evento es una interrupción en el programa principal, ocurre cuando se tiene un cambio externo como por ejemplo cuando se presiona una tecla o un clic del mouse. Cuando uno de estos eventos sucede se llama a una funcion, dentro de esta función colocaremos el codigo a ejecutar.

Las funciones disponibles son las siguientes:

  • mouseClicked(): Ocurre cuando se presiona y se libera un boton del mouse
  • mousePressed(): Cuando se presiona un boton del mouse
  • mouseDragged(): Ocurre cuando se da clic con el mouse y se arrastra
  • mouseReleased(): Ocurre cuando se libera un boton del mouse que estaba presionado
  • keyPressed(): Ocurre cuando se presiona un tecla
  • keyReleased(): Ocurre cuando se libera una tecla que estaba presionada

Para aprovechar al maximo estas funciones se debe hacer uso de las variables del sistema vistas anteriormente, de este modo sabremos exactamente que tecla o botón genero la interrupción.

Las funciones anteriores son del tipo void y no necesitan parámetros para su funcionamiento, veamos un ejemplo para comprenderlo mejor:

[code language=c]
//Variables para la posicion, tamaño y color de la elipse
int x=50;
int y=50;
int s=40;
int col=255;

//Valores iniciales de la ventana
void setup() {
size( 600, 400 );
frameRate(60);
smooth();
}

//Dibujamos el fondo y la elipse
void draw() {
println(col);
background(128);
fill(col);
ellipse(x, y, s, s);
}

//Cuando se presiona una tecla
void keyPressed() {

if (key==CODED) {
if (keyCode==UP) {
y-=4;
}
else if (keyCode==DOWN) {
y+=4;
}
else if (keyCode==LEFT) {
x-=4;
}
else if (keyCode==RIGHT) {
x+=4;
}
}
else {
if (key==’+’) {
s+=2;
}
else if (key==’-‘) {
s-=2;
}
}
}

//Cuando se arrastra el mouse
void mouseDragged() {
if (mouseButton==RIGHT) {
if (pmouseX < mouseX ) { s+=2; } else if (pmouseX>mouseX) {
s-=2;
}

if (pmouseY < mouseY ) { col+=2; col=constrain(col, 0, 255); } else if (pmouseY>mouseY) {
col-=2;
col=constrain(col, 0, 255);
}
}
else {
x=mouseX;
y=mouseY;
}
}
[/code]

Ahora la explicación, primero que nada declaramos unas variables que guardaran el tamaño, color y posición de la figura a manipular, en este caso una elipse, en la función setup() configuramos el tamaño de la ventana y los cuadros por segundo, en el draw() solo dibujamos la elipse usando las variables anteriores.

Ahora cada vez que se presione una tecla se llamara a la funcion keyPressed() dentro de ella tenemos codigo que verifica la tecla presionada haciendo uso de las variables del sistema key que devuelve la tecla presionada, comprobamos si la tecla esta codificada comparandola con la variable CODED, haciendo uso de las flechas del teclado modificamos la posicion en X e Y de la elipse, con las teclas + y modificamos el tamaño.

La función mouseDragged() se ejecuta cuando se da clic y se arrastra el mouse, con un if comprobamos el boton presionado, si es el boton derecho verifica hacia que dirección se arrastra el mouse, para esto hacemos uso de las varibles mouseX y mouseY que guardan la posicion actual del mouse y las comparamos con la posicion anterior que obtenemos usando las variables pmouseX y pmouseY, arrastrando en el eje X modificamos el tamaño de la elipse y en el eje Y el color; En caso de que se arrastre dando clic izquierdo la elipse seguirá la posicion del mouse.

Por ultimo cabe mencionar que algunas librerías contienen eventos propios, por ejemplo la librería serial contiene un evento que se ejecuta cada vez que recibe datos por el puerto; pero esto es algo que veremos en otra ocasión. Para el próximo tutorial aprenderemos a usar imágenes en nuestros programas.

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...