Outils pour utilisateurs

Outils du site


Vous n'êtes pas autorisé à effectuer cette action.
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));
}

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

<html>

<iframe src=“https://editor.p5js.org/slaurent/embed/JQdDaeU2o” scrolling=“no” frameborder=“0” style=“height: 100%; width: 100%; ”></iframe>

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

<iframe src=“https://editor.p5js.org/slaurent/embed/5427CiVyX” scrolling=“no” frameborder=“0” style=“height: 100%; width: 100%; ”></iframe>

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

<iframe src=“https://editor.p5js.org/slaurent/embed/Rk-42RiUR” scrolling=“no” frameborder=“0” style=“height: 100%; width: 100%; ”></iframe>

</html>

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 : 05/12/2023 22:23 de 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki