Profitez-en, après celui là c'est fini

Processing, neuvième cours

novembre 29th, 2008 Posted in Processing

Processing ne sert pas qu’à produire des images fixes, comme on l’a vu avec la fonction draw() que nous allons à nouveau employer ici.
Parmi les « sens » (les périphériques d’entrée) de processing, les deux plus évidents sont la souris et le clavier de l’ordinateur. Il en existe bien d’autres, accessibles directement ou par le biais de librairies externes : micro, webcam, réseau, etc. Pour l’instant, nous allons parler de la souris.
Une première chose à savoir est que la position de la souris sur un écran ou dans une fenêtre de programme est toujours relative au coin supérieur gauche de cet espace.

Les coordonnées de la souris

Ce simple exemple sera sans doute suffisamment éloquent :

void draw(){
  point(mouseX, mouseY);
}

Si vous saisissez ce code dans processing et que vous cliquez sur le bouton « play », un point noir sera dessiné sous votre curseur de souris, ce qui fait que vous dessinerez sur l’écran. Nous connaissons déjà la fonction draw(), qui est exécutée x fois par seconde, et la fonction point(x,y) qui dessine un point à l’emplacement (x,y). Ici, x et y sont remplacés par deux variables système, mouseX et mouseY qui sont, respectivement, la coordonnée horizontale de la souris (abscisse) et sa coordonnée verticale (ordonnée).
Nous pouvons remplacer le point par une ellipse, et repeindre la scène en noir à chaque cycle, afin que l’ellipse ne dessine pas sur la scène mais semble bouger avec la souris.

void draw(){
  background(0);
  ellipse(mouseX, mouseY,20,20);
}

Compliquons encore un peu plus notre programme en ajoutant un script setup :

void setup(){
   smooth(); noStroke();background(0);
}

void draw(){
  background(0);
  ellipse(mouseX, mouseY,20,20);
}

Cette fois, même résultat (une ellipse semble suivre la souris) mais l’affichage est amélioré puisque l’on a supprimé le trait de contour (stroke), peint la scène en noir dès le départ (background) et activé l’anti-aliasing (smooth). On aurait aussi pu changer la couleur de remplissage de l’ellipse, par exemple en écrivant dans le setup fill(255,0,0); (l’ellipse apparaîtrait alors en rouge).
On remarque au passage que Processing n’accepte comme coordonnées de la souris que des valeurs correspondant à la fenêtre d’affichage. Au passage, signalons que l’on peut masquer le curseur avec la commande noCursor();
La position de la souris peut être utilisée pour d’autres choses que pour faire bouger un objet, bien entendu. On peut par exemple demander que l’écran ait un fond d’une certaine couleur si la position verticale du curseur de la souris est inférieure à 50 pixels et d’une autre couleur sinon.

void draw(){
  if(mouseY<50){ background(255);} else { background(0);}
}

Au passage nous venons de découvrir une nouvelle fonction, le test conditionnel (if), qui permet d’agir d’une manière ou d’une autre en fonction d’un paramètre donné. Nous y reviendrons.
Les créateurs de Processing ont pensé à y ajouter deux variables système extrêmement utiles : pmouseX et pmouseY. Ces deux variables servent à stocker la position précédente de la souris. Si mon curseur se trouvait à (10,11) au moment précédent (il y a 1/20e de seconde si nous sommes à 20 images par seconde par ex.) et qu’il se trouve à (13,12) sur l’image suivante, pmouseX aura la valeur de 10, pmouseY la valeur de 11, mouseX la valeur de 13 et mouseY la valeur de 12. Un petit calcul de la distance parcourue nous permettra d’estimer la vélocité de la souris sur l’écran par exemple.

Le clic

Les utilisateurs y pensent rarement, quoiqu’ils les emploient quotidiennement, mais il existe deux sortes de clics avec une souris. Le demi-clic et le simple clic. Le demi-clic intervient lorsque l’on appuie sur le bouton de la souris, tandis que le simple clic intervient lorsque l’on relache le bouton de la souris. Évidemment, si l’on effectue un simple clic, c’est après avoir effectué un demi-clic. On utilise souvent le demi-clic pour le glisser-déplacer et le clic, pour exécuter ou valider une action.

Nous pouvons tester trois possibilités :

  • L’instant où le bouton de la souris vient d’être enfoncé. C’est la fonction d’évènement mousePressed().
  • L’instant où le bouton de la souris est relâché (clic). C’est la fonction d’évènement mouseReleased().
  • Enfin, à tout instant nous pouvons vérifier si le clic est maintenu, avec la propriété mousePressed.

L’exemple qui suit recourt à toutes ces possibilités à la fois.
Dans le fonction draw(), qui s’exécute régulièrement, je vérifie si le curseur de la souris est enfoncé, avec la condition if (mousePressed). Si c’est le cas, je dessine une ellipse de 20×20 pixels aux coordonnées de la souris.
La fonction mousePressed() est exécutée lorsque le bouton de la souris est enfoncé. Ici, je l’utilise pour « repeindre » la fenêtre en blanc.
La fonction mouseReleased() est invoquée lorsque la souris a été enfoncée puis est relâchée. Ici, je lui demande de « repeindre » la fenêtre en noir.

void draw(){
  if (mousePressed){
    ellipse(mouseX, mouseY, 20,20);
  }
}

void mousePressed(){
  background(255);
}

void mouseReleased(){
  background(0);
}

Il existe par ailleurs deux fonctions relatives au déplacement de la souris, mouseMoved(), qui est invoquée chaque fois que la souris a bougé, et mouseDragged(), qui est invoquée chaque fois que la souris a bougé et que son bouton est maintenu enfoncé.
Dans l’exemple suivant, à chaque fois que la souris est déplacée et que le clic est maintenu, processing dessine une ligne entre l’ancienne position de la souris et la nouvelle.

(l’image ci-dessus n’est pas une animation Processing mais juste une image fixe qui évoque le résultat obtenu avec le programme reproduit plus bas).
Notez qu’il faut que le script contienne une fonction draw() pour que la fonction mouseDragged() soit prise en compte.

void draw(){
  // sans action, mais obligatoire
}

void mouseDragged(){
  line(pmouseX, pmouseY, mouseX, mouseY);
}

Pour finir, il existe une dernière propriété relative à la souris qui se nomme mouseButton et qui permet de vérifier quel bouton de la souris est cliqué, à savoir le droit, le gauche ou le bouton central (RIGHT, LEFT, CENTER). Par exemple : if (mouseButton== RIGHT){ instructions }, où instructions sera remplacé par les commandes à exécuter si la condition (le clic gauche) est remplie.

  1. 2 Responses to “Processing, neuvième cours”

  2. By SOLIVERES on Avr 4, 2012

    Bonjour,
    Lorsque vous dites « La fonction mousePressed() n’est exécutée que la toute première fois … », ne faudrait-il pas dire plutôt « La fonction mousePressed() est exécutée à chaque fois que… » ?
    Merci.

    P.S. : bravo pour ces tutoriels clarissimes !!

  3. By Jean-no on Avr 4, 2012

    @Solivieres : si si, bien sûr.

Postez un commentaire


Veuillez noter que l'auteur de ce blog s'autorise à modifier vos commentaires afin d'améliorer leur mise en forme (liens, orthographe) si cela est nécessaire.
En ajoutant un commentaire à cette page, vous acceptez implicitement que celui-ci soit diffusé non seulement ici-même mais aussi sous une autre forme, électronique ou imprimée par exemple.