Outils pour utilisateurs

Outils du site


p5.js:interaction_avec_le_clavier

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/

p5.js/interaction_avec_le_clavier.txt · Dernière modification: 10/07/2019 21:51 par Stéphane LAURENT