---
title: "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]](/notas/draw.html)

[[Expresiones condicionales]](/notas/condicionales.html)

# 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:

* `mouseX` y `mouseY`: coordenadas del puntero del *mouse* en el canvas (tipo `int`)
* `mousePressed`: variable booleana que indica si el *mouse* está presionado (tipo `boolean`)
* `keyPressed`: variable booleana que indica si alguna tecla está presionada (tipo `boolean`)
* `key`: variable con el valor de la tecla más reciente que fue presionada (tipo `char`)


[[Variables: Fundamentos]](/notas/variables.html)

[[Variables y expresiones booleanas]](/notas/boolean.html)

# 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.

## Sigue al mouse...

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

## Si el mouse está en cierta ubicación...

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

  } else { // si no

  }
}
```

## Si el mouse está presionado...

```java
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:
  // ...
}
```

## Si alguna tecla está presionada...

```java
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:
  // ...
}
```

## Teclado WASD

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

```java
// 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()

```

# 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:

* `mousePressed()`: se llama una vez al presionar el botón del *mouse*
* `mouseReleased()`: se llama una vez al soltar el botón del *mouse*
* `mouseClicked()`: se llama después de presionar y soltar el botón del *mouse*
* `mouseDragged()`: se llama cada *frame* en el que el *mouse* esté presionado y en movimiento
* `mouseMoved()`: se llama cada *frame* en la que el *mouse* NO esté presionado pero sí en movimiento
* `keyPressed()`: se llama una vez al presionar una tecla
* `keyReleased()`: se llama una vez al soltar una tecla

## Ejemplos de uso de eventos

### Cambio de color de fondo

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

```java
// 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]](/notas/random.html)

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

```java
// 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));
  }
}
```
