Interactivité clavier

Le clavier sert à déclencher une action : exporter une image avec la touche s, effacer le dessin, passer d’un mode à l’autre. Il sert aussi à piloter : les flèches déplacent un personnage, comme dans un jeu.

Il se combine très bien avec la souris : une main dessine, l’autre choisit la couleur. Comme pour la souris, p5.js vous donne des variables (quelle touche ? est-elle enfoncée ?) et une fonction, keyPressed(), qu’il appelle à chaque frappe.

L'idée à retenir

keyPressed() est exécutée une fois, à chaque frappe. keyIsPressed et keyIsDown() répondent tant que la touche est enfoncée : on les teste dans draw(). Et key dit quelle touche a été tapée.

N’importe quelle touche : keyPressed()

let fond = 0;

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(fond);
}

function keyPressed() {
  if (fond == 0) {
    fond = 255;
  } else {
    fond = 0;
  }
}

Cliquez, puis tapez une touche

aEspaceEntrée

keyPressed() est une fonction au nom réservé, comme mousePressed() : vous l’écrivez au même niveau que draw(), et p5.js l’appelle tout seul, une fois à chaque fois qu’une touche s’enfonce. Peu importe laquelle : lettre, Espace, Entrée.

Le fond passe de 0 (noir) à 255 (blanc), puis de 255 à 0 : c’est l’interrupteur de la page conditions, au clavier. La ligne 13 ou la ligne 15 s’allume un instant, à chaque frappe.

Le clavier ne répond pas ?

Pour recevoir les touches, le sketch doit avoir le focus. Dans l’éditeur p5.js, après avoir cliqué sur Play, cliquez dans le canevas. Sinon, vos touches sont envoyées à l’éditeur de code, et vous écrivez dans votre programme.

Quelle touche ? key

La variable key contient la dernière touche tapée. Pour une lettre, c’est cette lettre, entre guillemets : 'r'. Voici un pinceau dont on change la couleur au clavier :

function setup() {
  createCanvas(400, 300);
  background(240);
  noStroke();
}

function draw() {
  if (mouseIsPressed) {
    circle(mouseX, mouseY, 20);
  }
}

function keyPressed() {
  if (key == 'r') {
    fill(255, 120, 141); // rose
  } else if (key == 'j') {
    fill(255, 200, 0); // jaune
  } else if (key == 'b') {
    fill(29, 161, 242); // bleu
  } else if (key == ' ') {
    background(240); // efface
  }
}

Tapez r, j ou b, puis dessinez

rjbEspace

À chaque frappe, keyPressed() compare key aux lettres prévues, dans l’ordre. Si aucun test n’est vrai (une autre touche), rien ne se passe. La barre d’espace s’écrit ' ' : un espace entre deux guillemets.

Un fill() reste actif jusqu’au fill() suivant. Le pinceau garde donc sa couleur d’une image à l’autre, jusqu’à la prochaine touche. Au départ, il est blanc : c’est le fill() par défaut.

Attention aux majuscules : avec Maj ou le verrouillage des majuscules, key vaut 'R', et 'R' n’est pas égal à 'r'. Pour accepter les deux, combinez les tests : if (key == 'r' || key == 'R').

Le même principe sert à exporter une image quand on tape s : voir la page Exporter.

Tant qu’une touche est enfoncée : keyIsPressed

keyIsPressed est l’équivalent de mouseIsPressed pour le clavier : elle vaut true tant qu’une touche (n’importe laquelle) est enfoncée. On la teste dans draw() :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);
  if (keyIsPressed &&
      key == 'b') {
    fill(0);
  } else {
    fill(255);
  }
  rect(150, 100, 100, 100);
}

Gardez la touche b enfoncée

ab

Le carré est noir tant que deux conditions sont vraies : une touche est enfoncée, et c’est la touche b. Gardez a enfoncée : la première est vraie, la seconde fausse, le carré reste blanc.

Pourquoi tester keyIsPressed ? Avec p5.js 1, key garde la dernière touche tapée, même une fois relâchée : sans ce test, le carré resterait noir. Écrit ainsi, le code marche avec toutes les versions.

Les touches spéciales

Pour les touches qui n’écrivent pas de caractère, key contient leur nom, en anglais :

Touche	key vaut
Espace	' '
Entrée	'Enter'
Retour arrière	'Backspace'
Échap	'Escape'
Maj	'Shift'
Les flèches	'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'

Pour connaître le nom d’une autre touche, tapez-la sur keycode.info : c’est la case event.key. Ici, la touche ⌘ Cmd d’un Mac, qui s’appelle 'Meta' :

keycode.info : le nom de la touche est dans la case event.keykeycode.info

Avec les flèches, on peut déplacer un cercle d’un pas à chaque frappe :

let x = 300;

function setup() {
  createCanvas(600, 150);
}

function draw() {
  background(240);
  circle(x, 75, 40);
}

function keyPressed() {
  if (key == 'ArrowLeft') {
    x = x - 50;
  } else if (key == 'ArrowRight') {
    x = x + 50;
  }
}

Cliquez, puis utilisez les flèches

←→

Chaque frappe sur une flèche déplace le cercle de 50 pixels, et une seule fois : garder la flèche enfoncée ne fait pas avancer plus loin. Rien n’empêche le cercle de sortir du canevas : on le fait revenir avec l’autre flèche.

keyCode et UP_ARROW, avec p5.js 2

Les anciens exemples, et l’ancienne version de cette page, écrivent if (keyCode === UP_ARROW). Avec p5.js 2, ce test est toujours faux : keyCode est un nombre (38 pour la flèche du haut), alors que UP_ARROW est devenu un texte ('ArrowUp'). Aucune erreur ne s’affiche, il ne se passe simplement rien. Écrivez plutôt key == 'ArrowUp', qui fonctionne avec toutes les versions.

Dans l’éditeur, les flèches et la barre d’espace peuvent aussi faire défiler la page. Pour l’empêcher, ajoutez return false; à la fin de keyPressed() : p5.js dit alors au navigateur de ne rien faire d’autre avec la touche.

Garder une touche enfoncée : keyIsDown()

Pour un déplacement continu, comme dans un jeu, on ne compte pas les frappes : on demande, à chaque image, si la touche est enfoncée. C’est le rôle de keyIsDown() :

let x = 200;
let y = 150;

function draw() {
  background(240);
  if (keyIsDown(LEFT_ARROW)) {
    x = x - 3;
  }
  if (keyIsDown(RIGHT_ARROW)) {
    x = x + 3;
  }
  if (keyIsDown(UP_ARROW)) {
    y = y - 3;
  }
  if (keyIsDown(DOWN_ARROW)) {
    y = y + 3;
  }
  circle(x, y, 40);
}

Cliquez, puis gardez une flèche enfoncée

←↑↓→

keyIsDown(LEFT_ARROW) répond à la question « la flèche de gauche est-elle enfoncée en ce moment ? ». Comme le test est dans draw(), il est posé 60 fois par seconde : tant que la flèche est enfoncée, le cercle avance de 3 pixels à chaque image, soit 180 pixels par seconde, sans à-coups.

Les quatre tests sont des if séparés, pas des else if : chacun est vérifié, quoi qu’il arrive aux autres. Gardez deux flèches enfoncées, ← et ↑ : deux lignes s’allument, et le cercle part en diagonale.

C’est l’avantage de keyIsDown() sur key. key ne connaît que la dernière touche tapée, alors que keyIsDown() vérifie chaque touche séparément, même quand plusieurs sont enfoncées à la fois. LEFT_ARROW, RIGHT_ARROW, UP_ARROW et DOWN_ARROW sont les noms que p5.js donne aux flèches. Avec p5.js 2, on peut aussi donner une lettre : keyIsDown('a').

Les fonctions du clavier

1. function keyPressed() {1Un nom réservé : p5.js l'appelle à chaque frappe
2. if (key == 'r') {2key : la touche qui vient d'être tapée
3. fill(255, 120, 141);
4. }
5. }3Au même niveau que draw(), jamais dedans

keyPressed() a deux cousines :

Fonction	p5.js l’appelle…
keyPressed()	quand une touche s’enfonce
keyReleased()	quand une touche est relâchée
keyTyped()	quand une touche qui écrit un caractère s’enfonce (pas pour les flèches, Maj, Échap…)

Si vous venez de Processing

En Processing, keyPressed est à la fois la variable et la fonction : en p5.js, la variable s’appelle keyIsPressed. Et pour les flèches, Processing écrit if (key == CODED) puis if (keyCode == UP). En p5.js, il suffit de if (key == 'ArrowUp').

En résumé

key            // la dernière touche : 'a', ' '…
keyIsPressed   // true tant qu'une touche est enfoncée
keyIsDown(LEFT_ARROW)   // cette touche-là ?

function keyPressed() {
  // une fois, à chaque frappe
}

• keyPressed() est appelée une fois à chaque frappe : pour une action unique (changer de couleur, effacer, exporter).
• keyIsDown() et keyIsPressed se testent dans draw() : pour une action continue (avancer tant qu’on appuie).
• key vaut une lettre entre guillemets ('r', et 'R' en majuscule), ' ' pour Espace, ou un nom pour les touches spéciales ('Enter', 'ArrowUp').
• Avec p5.js 2, keyCode === UP_ARROW ne marche plus : écrivez key == 'ArrowUp' ou keyIsDown(UP_ARROW).
• Pour que le sketch reçoive les touches, cliquez d’abord dans le canevas.

Pour aller plus loin

• keycode.info : le nom de chaque touche
• La page Exporter : enregistrer une image en tapant une touche
• Dans la référence p5.js : key, keyPressed(), keyIsDown()
• Avec p5.js 2, la variable code donne la position de la touche sur le clavier, quelle que soit la lettre qui y est imprimée. Par exemple, 'KeyQ' est la touche en haut à gauche des lettres, A sur un clavier AZERTY, Q sur un QWERTY. C’est pratique pour un jeu qui doit marcher sur tous les claviers.