Sites


Processing

Les événements clavier

Capter les actions de l'utilisateur sur le clavier de votre ordinateur (les évènements clavier) et s'en servir pour faire réagir votre programme constitue une première forme d'interactivité. Nous allons découvrir dans ce chapitre comment récupérer les informations liées au clavier en fabriquant une machine à écrire très simple qui nous permettra d'imprimer du texte sur l'écran.

Actions

La valeur de la dernière touche appuyée est stockée dans la variable key proposée par défaut dans Processing. Cette variable ne peut stocker qu'un seul caractère à la fois, symbolisé par l'écriture 'a' , 'b' , 'c', ... Attention, key est sensible à la casse, c'est-à-dire qu'il fait une différence entre les minuscules et majuscules.

Dans l'exemple suivant, nous allons afficher dans la fenêtre de visualisation le caractère correspondant à la touche qui aura été appuyée sur le clavier de votre ordinateur. Pour ce faire, nous employons la méthode text().

02_MachineAEcrire_Char_02

 void draw() {
  background(204);
  fill(0);
  textSize(70);
  text(key,30,70);
}

Par ailleurs, nous pouvons capter dans notre programme le moment où l'utilisateur a appuyé ou relâché une touche du clavier, par le biais des méthodes keyPressed() et keyReleased(). Ces deux méthodes vont être automatiquement appelées par Processing au moment où l'état d'une touche change.

Dans l'exemple suivant, keyPressed() et keyReleased() changent la valeur de la variable y, utilisée pour positionner le caractère à l'écran selon que la touche est appuyée ou relâchée.

03_Pressed_Released_02

int y = 0;

void setup() {
  size(130,200);
  textSize(80);
  stroke(0);
  fill(0);
}

void draw() {
  background(204);
  line(10,100,120,100);
  text(key,35,y);
}

void keyPressed(){
  y = 180;
}

void keyReleased(){
  y = 80;
}

Touches spéciales

Les touches spéciales comme les flèches (UP, DOWN, LEFT, RIGHT) ou ALT, CONTROL, SHIFT sont quant à elles stockées dans la variable keyCode. Le test if (key == CODED) permet de vérifier si la touche appuyée est une touche spéciale ou non. Dans un programme, il faudra distinguer les deux cas en fonction du type de touche appuyée que l'on veut tester.

Dans l'exemple suivant, nous allons créer une machine à écrire un peu particulière, puisqu'il sera possible de déplacer le texte grâce aux flèches.

À chaque fois qu'une touche sera appuyée, elle sera stockée dans une chaîne de caractère, pour pouvoir être affichée dans le draw() à l'aide de la méthode text().

01_MachineAEcrire_02

String s = "";
int x = 50;
int y = 50;

void setup() {
  size(200,200);
}

void draw() {
  background(255);
  fill(0);
  text(s, x, y);
}

void keyPressed() {
  if (key == CODED){
    if (keyCode == LEFT)   x  = x - 1;
    if (keyCode == RIGHT)  x = x + 1;
    if (keyCode == UP)     y = y - 1;
    if (keyCode == DOWN)   y = y + 1;
  }
  else {
    s = s + key;
  }
}

Notons l'omission des accolades après chaque if. Cette syntaxe est possible si le if ne s'applique qu'à une seule instruction. Nous utilisons par ailleurs une variable de type String dénommé dans cet exemple "s" dont la fonction est de stocker une suite de caractères, comme des phrases, par exemple.

Vérification spécifique de l'appui d'une touche

Processing nous permet également de faire appel à la variable keyPressed et de la définir. Attention  ! Bien que la syntaxe soit identique, elle n'est pas à confondre avec la méthode keyPressed() abordée au début de ce chapitre. Cette variable va nous informer en permanence si une touche est appuyée ou non et pourra être utilisée dans la méthode draw() notamment.

Dans l'exemple suivant, nous allons dessiner un cercle si la touche appuyée est 'c', un carré si la touche appuyée est 'r'.

Cercle_Carre

void draw()
{
  rectMode(CENTER);
  background(128);
  if (keyPressed == true)
  {
    if (key == 'c') {
      ellipse(50,50,90,90);
    }
    else if (key == 'r') {
      rect(50,50,90,90);
    }
  }
}

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.