1NSI : p5.js - Touches du Clavier⚓︎
Warning
ATTENTION : Il faut OBLIGATOIREMENT CLIQUER sur les zones blanches de p5*
ci-dessous, pour que celles-ci aient le focus, et donc que l'appui sur les touches correspondantes soit bien détecté.
variable keyIsPressed
⚓︎
La variable booléenne keyIsPressed
peut prendre deux valeurs :
true
lorsque n'importe quelle touche est en train d'être appuyée (aussi longtemps qu'elle l'est)false
sinon
keyPressed()
⚓︎
La fonction keyPressed()
est appelée à chaque fois qu'une touche est appuyée : à vous de renseigner dans cette fonction, ce que vous souhaitez faire lorsque cela se produit. Pour ce faire, il est fréquent de commencer par détecter quelle touche précisément a été appuyée, pour réagir différemment selon que ce soit une touche ou une autre qui ait été appuyée. On peut détecter de quelle il s'agit grâce à:
- la variable
key
, qui contient une chaîne de caractère ou bien - la variable
keyCode
qui contient un nombre entier (le code ASCII du caractère appuyé)
let value = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function keyPressed() {
if (key === "ArrowLeft") {
value = "red";
} else if (key==="ArrowRight") {
value = "blue";
} else if (key===" ") {
value = "green";
}
}
la variable key
⚓︎
La variable key
contient une chaîne de caractère correspondant à la touche pressée :
- Soit la touche est un caractère imprimable (lettre, nombre, ou autre caractère affichable du clavier
$ù=&é"
etc..) : la chaînekey
contient alors cet unique caractère - Soit la touche du clavier porte un nom spécial car le caractère n'est pas affichable:
Delete
,Enter
, etc.. cf tableau ci-dessous
Touche | key |
---|---|
Backspace (Retour Arrière \(\leftarrow\)) |
"Backspace" |
Suppr | "Delete" |
Entrée | "Enter" |
Retour à la Ligne | "Return" |
Tab (Tabulation) |
"Tab" |
Échap / Esc (Échappe / Escape) |
"Escape" |
Shift/Maj | "Shift" |
Contrôle | "Control" |
Windows | "OS" |
Alt | "Alt" |
AltGr | "AltGraph" |
Flèche Haut | "ArrowUp" |
Flèche Bas | "ArrowDown" |
Flèche Gauche | "ArrowLeft" |
Flèche Droite | "ArrowRight" |
Variable keyCode
⚓︎
La varaible keyCode
contient un nombre entier correspondant à la touche appuyée.
Ce nombre entier est en fait le code ASCII (du caractère) de la touche appuyée.
Plusieurs manières pour connaître ce keyCode (nombre entier) :
- Ou bien vous lisez une table ASCII par exemple sur internet
- Ou bien, Le site https://keycode.info/ permet de connaître le keycode de n'importe quelle touche online et en direct
- Ou bien, certaines touches (mais pas toutes) disposent d'une variable en majuscules (c'est une constante) facile à mémoriser :
Touche | keyCode |
---|---|
Backspace (Retour Arrière \(\leftarrow\)) |
BACKSPACE |
Suppr | DELETE |
Entrée | ENTER |
Retour à la Ligne | RETURN |
Tab (Tabulation) |
TAB |
Échap / Esc (Échappe / Escape) |
ESCAPE |
Shift/Maj | SHIFT |
Contrôle | CONTROL |
Windows | OPTION |
Alt | ALT |
Flèche Haut | UP_ARROW |
Flèche Bas | DOWN_ARROW |
Flèche Gauche | LEFT_ARROW |
Par exemple, pour la touche espace l'entier corresonpdant est 32
, mais il n'y a pas de nom spécial.