Aller au contenu

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îne key 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.