6. Interacció

6.5. Interactuant amb el teclat

La interacció amb el teclat funciona de manera molt similar a la del ratolí: P5 ens ofereix algunes variables i funcions dedicades amb les quals podem capturar quan es pressiona alguna tecla i també discriminar quina tecla s’ha premut.

Per a determinar si s’ha premut alguna tecla, disposem de la variable del sistema keyIsPressed. Igual que en el cas de mouseIsPressed, es tracta d’una variable booleana, per la qual cosa podem usar fàcilment una estructura condicional per detectar la pulsació de tecles:

Diferenciant entre tecles

De la mateixa manera que interactuant amb el ratolí podíem usar mouseButton per determinar quin botó del ratolí s’havia premut, amb el teclat podem usar key per diferenciar entre unes tecles o altres:

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

A l’exemple anterior observem que podem usar l’operador lògic OR per activar la interacció si premem una tecla de lletra minúscula o majúscula.

Tecles especials

Hi ha algunes tecles a les quals no podem accedir directament amb la paraula clau key, com per exemple les fletxes del teclat o la tecla d’escapada (Esc). Per poder-les utilitzar en P5, necessitem conèixer el seu keyCode:

if(keyIsPressed) {
  if(keyCode == UP_ARROW) {
    // Si premem la fletxa cap amunt
  }
  if(keyCode == ESCAPE) {
    // Si premem la tecla d’escapada
  }
}

Els key codes que P5 reconeix són els següents: UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, RETURN, ESCAPE, DELETE, ALT, OPTION i CONTROL. Depenent del nostre navegador web, algunes tecles es reconeixen de manera diferent, però en general han de funcionar.

Esdeveniments del teclat

Igual que passava amb el ratolí, P5 ens ofereix diverses funcions l’execució de les quals es dispara en detectar certs esdeveniments del teclat: quan premem una tecla, quan deixem anar una tecla, etc. Es poden consultar les diferents funcions a la referència de P5, dins de l’apartat «Events». Vegem-ne un parell d’exemples:

function keyPressed() {
  // S’executa quan pressionem qualsevol tecla
}

function keyReleased() {
  // S’executa quan deixem anar qualsevol tecla
}