6. Interacción

6.5. Interactuando con el teclado

La interacción con el teclado funciona de manera muy similar a la del ratón: P5 nos ofrece algunas variables y funciones dedicadas con las que podemos capturar cuándo se presiona alguna tecla y también discriminar qué tecla se ha pulsado.

Para determinar si se ha pulsado alguna tecla, disponemos de la variable del sistema keyIsPressed. Igual que en el caso de mouseIsPressed, se trata de una variable booleana, por lo que podemos fácilmente usar una estructura condicional para detectar la pulsación de teclas:

Diferenciando entre teclas

De la misma manera que interactuando con el ratón podíamos usar mouseButton para determinar qué botón del ratón había sido pulsado, con el teclado podemos usar key para diferenciar entre unas teclas u otras:

if(keyIsPressed) {
  if(key == "a" || key == "A") {
    // Si pulsamos la tecla A
  }
  if(key == "1") {
    // Si pulsamos la tecla 1
  }
  if(key == " ") {
    // Si pulsamos la barra espaciadora
  }
}

En el ejemplo anterior observamos que podemos usar el operador lógico OR para activar la interacción si pulsamos una tecla de letra minúscula o mayúscula.

Teclas especiales

Hay algunas teclas a las que no podemos acceder directamente con la palabra clave key, como por ejemplo las flechas del teclado o la tecla escape (Esc). Para poder utilizarlas en P5, necesitamos conocer su keyCode:

if(keyIsPressed) {
  if(keyCode == UP_ARROW) {
    // Si pulsamos la flecha hacia arriba
  }
  if(keyCode == ESCAPE) {
    // Si pulsamos la tecla escape
  }
}

Los key codes que P5 reconoce son los siguientes: UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, RETURN, ESCAPE, DELETE, ALT, OPTION y CONTROL. Dependiendo de nuestro navegador web algunas teclas se reconocen de forma distinta, pero por lo general deben funcionar.

Eventos del teclado

Igual que ocurría con el ratón, P5 nos ofrece varias funciones cuya ejecución se dispara al detectar ciertos eventos del teclado: cuando pulsamos una tecla, cuando soltamos una tecla, etc. Se pueden consultar las distintas funciones en la referencia de P5, dentro del apartado «Events». Veamos un par de ejemplos:

function keyPressed() {
  // Se ejecuta cuando presionamos cualquier tecla
}

function keyReleased() {
  // Se ejecuta cuando soltamos cualquier tecla
}