Les événements souris

Dans ce chapitre, nous allons voir comment interagir avec la souris, en récupérant des informations comme sa position ou bien les actions de clics. Pour illustrer ces fonctionnalités, nous allons créer un petit logiciel de dessin, à base de cercles, en introduisant même du mouvement aléatoire !

Position de la souris

Les coordonnées de la souris dans la fenêtre sont accessibles par les deux variables mouseX et mouseY, disponibles par défaut dans Processing. Elles permettent de connaître la position de la souris par rapport à notre fenêtre de dessin, en prenant pour origine le coin gauche supérieur de la fenêtre. Dans l'exemple suivant, nous allons créer un programme qui va dessiner un cercle à partir de la position de la souris.

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

void draw() {
  ellipse(mouseX,mouseY,15,15);
}

A présent, nous allons modifier très légèrement l'exemple précédent en changeant dynamiquement le rayon du cercle. Celui-ci est choisi au hasard grâce à la méthode random(), qui génère un nombre aléatoirement au sein d'une plage de valeur. A chaque fois que Processing va exécuter draw(), la variable r sera remplie avec un nombre au hasard compris entre 3 et 30 : 12, 25, 23, 11, 22, 4, 10, 11, 25 ... Le changement de valeur du rayon va provoquer le tremblotement du cercle autour du curseur de la souris.

void setup() {
  size(300,300);
  smooth();
}

void draw() {
  float r = random(3,30);
  ellipse(mouseX,mouseY,r,r);
}

Dès que la souris sort de la fenêtre, la position de la souris n'est plus relayée à notre programme. Les cercles se dessinent et s'accumulent à la dernière position captée par notre sketch.

Clics de souris

Nous pouvons intercepter les clics de souris grâce aux méthodes mousePressed() et mouseReleased().

Ces deux méthodes permettent de savoir si l'utilisateur a appuyé ou relâché un des boutons de la souris. Reprenons l'exemple précédent en changeant la couleur de remplissage de notre cercle lorsque l'utilisateur appuie sur un des boutons de la souris. Nous allons choisir un niveau de gris pris au hasard au moment du clic que nous appliquerons au cercle à l'aide de la commande fill().

 

float ton_de_gris = 255;

void setup() {
  size(300, 300);
  smooth();
}

void draw() {
  float r = random(10, 80);
  fill(grey);
  ellipse(mouseX, mouseY, r, r);
}

void mousePressed() {
  grey = random(255);
}

Processing nous permet d'identifier quel bouton de la souris a été appuyé. Pour cela, nous pouvons utiliser la variable mouseButton qui va contenir soit LEFT, RIGHT ou CENTER correspondant au bouton droit, gauche et central (si la souris dispose de tous ces boutons). Utilisons cette variable dans un exemple pour dessiner un cercle qui change de couleur en fonction du type de bouton pressé.

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

void draw() {
  background(255);
  ellipse(100,100,200,200);
}

void mousePressed() {
  if (mouseButton == LEFT)   fill(0);
  if (mouseButton == RIGHT)  fill(255);
  if (mouseButton == CENTER) fill(128);
}

Autres événements

Processing permet de capter deux autres événements souris, notamment lorsqu'elle est en mouvement au-dessus de la fenêtre.

mouseMoved() va permettre de détecter le mouvement de la souris lorsque celle-ci se déplace au-dessus de la fenêtre de dessin. Si le pointeur de souris sort de la zone de la fenêtre ou s'il ne bouge plus, alors la méthode n'est plus appelée.

mouseDragged() est appelée lorsque l'utilisateur a cliqué sur un bouton tout en bougeant la souris au-dessus de la fenêtre. Cette instruction permet notamment de gérer le glisser-déposer, par exemple. mouseDragged() continue d'être actif même si la souris sort de la fenêtre.

Dans l'exemple suivant, nous allons utiliser ces méthodes. Lorsque mouseMoved() est appelé suite à l'action de l'utilisateur, on change la couleur de remplissage du cercle et quand c'est mouseDragged() qui l'est, on ajuste sa taille.

int r = 100;
int c = 100;

void setup() {
  size(255, 255);
  smooth();
}

void draw() {
  background(255);
  fill(c);
  ellipse(width/2, height/2, r, r);
}

void mouseMoved() {
    c = mouseY;
}

void mouseDragged() {
  r = mouseX;
}

Curseur

Parfois il est bien pratique de cacher le curseur de la souris, par exemple dans le cas d'une installation artistique où le pointeur pourrait venir malencontreusement parasiter l'affichage de votre animation. Dans Processing, il existe fort heureusement une instruction pour masquer le pointeur :

noCursor();

Il est également possible de modifier la forme du curseur pour signaler certains évènements à l'utilisateur, par exemple changer la forme du curseur au survol d'un élément. Il suffit pour cela d'utiliser cursor() avec comme paramètre une des valeurs suivantes : ARROW, CROSS, HAND, MOVE, TEXT, WAIT. L'exemple ci-après affiche une forme différente de curseur (une flèche, une croix, une main, un sablier) selon la zone de dessin survolée par la souris.

void setup() { 
   fill(255);
   rect(10, 10, 20, 80);
   fill(175);
   rect(40, 10, 20, 80);
   fill(100);
   rect(70, 10, 20, 80);
}

void draw() {
  // Nous vérifions si on survole un des 3 rectangles
  // et modifions le curseur en conséquence

   if (mouseX > 10 && mouseX < 30 && mouseY > 10 && mouseY < 90) {
      cursor(HAND); // Affiche une main
   }
   else
   if (mouseX > 40 && mouseX < 60 && mouseY > 10 && mouseY < 90) {
      cursor(ARROW); // Affiche une flèche
   }
   else
   if (mouseX > 70 && mouseX < 90 && mouseY > 10 && mouseY < 90) {
      cursor(WAIT); // Affiche un sablier
  }
  else {
     cursor(CROSS); // Affiche une croix si on ne survole rien
  }
}