Interaction avec le clavier

Fonctions pour interagir avec le clavier

P5.js dispose de plusieurs fonctions permettant d'interagir avec le clavier :

keyPressed() : une touche du clavier est appuyée ;
keyReleased() : une touche du clavier est relâchée.

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
}
 
function keyPressed() {
  background(220);
  fill(random(255), random(255), random(255));
  ellipse(200, 200, random(10, 400));
}

<html> <center> Clique dans le canvas puis appuis sur une touche du clavier. </center></html>

<html>

</html>

Variables pour interagir avec le clavier

Certains paramètres relatifs au clavier sont également stockés en permanence dans des variables :

key : dernière touche enfoncée ;
keyCode : code de la dernière touche enfoncée.

Exemple :

function setup() {
  createCanvas(300, 100);
  textSize(40);
}
 
function draw() {
  background('#ff9d00');
  text(key ,10,60);
}

<html> <center></html> Clique dans le canvas puis appuis sur une touche du clavier. <html> </center></html>

<html>

</html>

Interagir en fonction de la touche enfoncée

La dernière touche qui a été touchée est stockée dans les variables key ou keyCode. On peut ainsi interagir en fonction des différentes touches sur lesquelles on a appuyé.

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
}
 
function draw() {
  fill(random(255), random(255), random(255), random(200, 255));
  ellipse(random(0, 400), random(0, 400), random(10, 100));
}
 
function keyPressed() {
  if (key == 'a' || key == 'A') { 
    noLoop();   // arrête le dessin si la touche "a' ou "A" est enfoncée
  }
  if (key == 'r' || key == 'R') { 
    loop();   // reprendre le dessin si la touche "r' ou "R" est enfoncée
  }
  if (keyCode == 32) { 
    background(220);   // efface le canvas si la touche "espace" est enfoncée
  }
}

<html> <center></html>
Clique dans le canvas puis appuis sur la touche :
- a ou A pour arrêter le dessin ;
- r ou R pour reprendre le dessin ;
- espace pour effacer le canvas.
<html> </center></html>

<html>

</html>

Vous trouverez sur cette page la liste des codes pour la variable keyCode : http://keycode.info/