Sites


Processing

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.

01_Souris_Cercles

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.

02_Souris_Cercles_Random

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().

03_Souris_Cercles_Random_Gris_02 

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é. 07_Souris_Composition_2

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.

04_Souris_Dragged

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.

Screen_shot_2010_09_09_at_23.28.56

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
  }
}

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.