Nous allons maintenant nous intéresser à l'interaction avec l'utilisateur. Pour l'instant (Processing offre énormément de possibilités) nous allons nous contenter de la souris et du clavier. Commençons par la souris

Processing propose 4 fonctions qui devront être complétées par le programmeur :

• le code se trouvant dans la fonction "mousePressed" est exécuté une fois quand l'utilisateur appuie sur un des boutons de la souris
• le code se trouvant dans la fonction "mouseReleased" est exécuté une fois quand un bouton de la souris qui avait été préalablement pressé est relâché.
• le code se trouvant dans la fonction "mouseMoved" est exécuté à chaque image tant que la souris se déplace
• le code se trouvant dans la fonction "mouseDragged" est est exécuté à chaque image tant que la souris se déplace et que le bouton de la souris est enfoncé.

Ces 4 fonctions ne prennent aucun paramètre et ne retournent aucune valeur.

À faire vous-même 2.1

Saisissez, analysez et testez ce code

int r;
void setup(){
  size(400,400);
  noStroke();
  fill(0);
  r=10;
}
void draw(){
  background(255);
  ellipse(200,200,2*r,2*r);
}
void mousePressed(){
  if (r<200){
    r=r+5;
  }
}
       

---

Attention : le programme ci-dessus fonctionnera uniquement si le curseur de la souris se trouve sur la fenêtre Processing.

Attention : pour pouvoir utiliser les 4 fonctions que nous venons de voir, il faut que la fonction "draw" soit présente dans le programme (même si elle est vide)

À faire vous-même 2.2

Saisissez, analysez et testez ce code

int r;
void setup(){
  size(400,400);
  noStroke();
  fill(0);
  r=10;
}
void draw(){
  background(255);
  ellipse(200,200,2*r,2*r);
}
void mousePressed(){
  r=r+100;
}
void mouseReleased(){
  r=r-100;
}
       

---

À faire vous-même 2.3

Créez un programme permettant d'afficher un carré vert au centre de la fenêtre. En cas d'appui sur un bouton de la souris le carré devient rouge. Ce même carré redevient vert dès que le bouton de la souris est relâché.

---

Il est possible de connaitre les coordonnées du curseur de la souris grâce aux variables proposées par Processing : "mouseX" et "mouseY"

À faire vous-même 2.4

Saisissez, analysez et testez ce code

void setup(){
  size(200,200);
  noStroke();
  fill(0);
}
void draw(){
  background(255);
  ellipse(mouseX,mouseY,30,30);
}
       

---

À faire vous-même 2.5

Créez un programme qui permettra d'afficher un nouveau carré à chaque clic de souris (sans effacer les carrés déjà présents). Le centre du carré devra se trouver au niveau du pointeur de la souris au moment du clic. La couleur du carré devra être aléatoire.

---

À faire vous-même 2.6

Créez un programme qui permettra d'obtenir ceci :

---

À faire vous-même 2.7

Saisissez, analysez et testez ce code

int val;
void setup(){
  size(200,200);
  background(255);
  val=0;
}
void draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

void mouseMove()
{
  val = val + 5;
  if (val > 255) {
    val = 0;
  }
}
       

À faire vous-même 2.8

Saisissez, analysez et testez ce code

int val;
void setup(){
  size(200,200);
  background(255);
  val=0;
}
void draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

void mouseDragged()
{
  val = val + 5;
  if (val > 255) {
    val = 0;
  }
}
       

---

Si "mouseX" et "mouseY" vous donnent la position de la souris à l'instant t, "pmouseX" et "pmouseY" vous permettent d'avoir les coordonnées de la souris à l'instant t-dt, avec dt le temps qui s'est écoulé entre 2 images.

À faire vous-même 2.9

Saisissez, analysez et testez ce code

void setup(){
  size(300,300);
  background(255);
}
void draw() {
  //
}

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