P5.js dispose de plusieurs fonctions permettant d'interagir avec le clavier :
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)); }
Certains paramètres relatifs au clavier sont également stockés en permanence dans des variables :
Exemple :
function setup() { createCanvas(300, 100); textSize(40); } function draw() { background('#ff9d00'); text(key ,10,60); }
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 } }
Vous trouverez sur cette page la liste des codes pour la variable keyCode : http://keycode.info/