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));
}

Clique dans le canvas puis appuis sur une touche du clavier.

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);
}

Clique dans le canvas puis appuis sur une touche du clavier.

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
  }
}

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.

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

Outils pour utilisateurs

Outils du site

Table des matières

Interaction avec le clavier

Fonctions pour interagir avec le clavier

Variables pour interagir avec le clavier

Interagir en fonction de la touche enfoncée

Outils de la page