jardínBit

Interactividad con mouse y teclado

El ciclo de animación en Processing, en combinación con expresiones condicionales, permite agregar interactividad en tiempo real a nuestros sketches.

[Ciclo de animación]

[Expresiones condicionales]

1 Variables especiales

Processing incluye y se encarga de actualizar en cada frame variables relacionadas con el estado del mouse y del teclado.

Estas variables son:

[Variables: Fundamentos]

[Variables y expresiones booleanas]

2 Plantillas / Ejemplos

Estos son ejemplos básicos para usar ya sea la interacción de la posición o click del mouse, o de teclas presionadas.

Todos estos ejemplos revisan en cada frame de animación el estado de las variables.

Recuerda que el else puedes eliminarlo si no lo necesitas en lo que desarrolles.

2.1 Sigue al mouse…

void setup(){
  size(640, 480);
}
void draw(){
  // dibuja círculo en la posición del mouse
  ellipse( mouseX, mouseY, 50, 50);
}

2.2 Si el mouse está en cierta ubicación…

void setup(){
  size(500, 500);
}
void draw(){
  // si el mouse está del lado izquierdo
  if( mouseX < width/2 ){

  } else { // si no

  }
}

2.3 Si el mouse está presionado…

void setup(){
  size(640, 480);
}
void draw(){
  // aquí iría código a ejecutar siempre:
  // ...

  if( mousePressed ){
    // realiza esto si el mouse está presionado
    // ...
  }
  else {
    // realiza esto si no
    // ...
  }

  // aquí puede ir más código a ejecutar siempre:
  // ...
}

2.4 Si alguna tecla está presionada…

void setup(){
  size(640, 480);
}

void draw(){
  // aquí iría código a ejecutar siempre:
  // ...

  if( keyPressed ){ // si alguna tecla está presionada
    if( key == ' '){
      // realiza esto si la barra espaciadora está presionada
      // ...
    }
    else if( key == 'a'){
      // realiza esto si la tecla 'a' está presionada
      // ...
    }
    else if( key == 'd'){
      // realiza esto si la tecla 'd' está presionada
      // ...
    }
    // ... etc
  } // cierra if( keyPressed )
  else {
    // realiza esto cuando no hay tecla presionada
    // ...
  }

  // aquí puede ir más código a ejecutar siempre:
  // ...
}

2.5 Teclado WASD

Este ejemplo permite cambiar la posición de un círculo utilizando las teclas WASD.

// declara variables de posiciones
float px, py;

void setup(){
  size(640, 480);

  // inicializa las variables a la mitad del lienzo:
  px = width/2;
  py = height/2;
}

void draw(){
  background( 0 );

  // dibuja el círculo en px, px
  ellipse( px, py, 50, 50);

  if( keyPressed ){ // si alguna tecla está presionada
    if( key == 'w'){ // arriba
      py = py - 1;  // decrementa py
    }
    else if( key == 's'){ // abajo
      py = py + 1;  // incrementa py
    }
    else if( key == 'a'){ // izquierda
      px = px - 1; // decrementa px
    }
    else if( key == 'd'){ // izquierda
      px = px + 1; // incrementa px
    }
  } // cierra if( keyPressed )

} // cierra draw()

3 Eventos

En ocasiones conviene realizar alguna acción solamente en el momento en el que sucede un cambio de estado.

Para esto, en lugar de revisar el estado de las variables de mouse y teclado en cada frame, podemos utilizar las funciones que Processing ya tiene programadas:

3.1 Ejemplos de uso de eventos

3.1.1 Cambio de color de fondo

Este ejemplo genera un color de fondo aleatorio una vez cada vez que se presiona el mouse

// cambia de color de fondo 
// una vez cada vez que se presiona el mouse

color colorFondo;
void setup(){
  size(500, 500);
}

void draw(){
 background(colorFondo);
}

void mousePressed(){
 colorFondo = color(random(255), random(255), random(255)); 
}

[Números pseudo-aleatorios]

Compara cómo el funcionamiento es diferente respecto a la revisión constante (polling) de la variable mousePressed, cuando el mouse se mantiene presionado:

// cambia de color de fondo 
// en cada frame mientras el mouse esté presionado

color colorFondo;
void setup() {
  size(500, 500);
}

void draw() {
  background(colorFondo);

  if (mousePressed) {
    colorFondo = color(random(255), random(255), random(255));
  }
}