Nous allons maintenant nous intéresser à l'interaction avec l'utilisateur. Pour l'instant nous allons nous contenter de la souris et du clavier. Commençons par la souris

p5js 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 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 7.1

Saisissez, analysez et testez ce code

var r;
function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
  r=10;
}
function draw(){
  background(240);
  ellipse(200,200,2*r,2*r);
}
function mousePressed(){
  if (r<200){
    r=r+5;
  }
}
       

---

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 7.2

Saisissez, analysez et testez ce code

var r;
function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
  r=10;
}
function draw(){
  background(240);
  ellipse(200,200,2*r,2*r);
}
function mousePressed(){
  r=r+100;
}
function mouseReleased(){
  r=r-100;
}
       

---

À faire vous-même 7.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 7.4

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
}
function draw(){
  background(240);
  ellipse(mouseX,mouseY,30,30);
}
       

---

À faire vous-même 7.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 7.6

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

Cliquez uniquement dans le rectangle rouge

---

À faire vous-même 7.7

Saisissez, analysez et testez ce code

var val;
function setup(){
  createCanvas(200,200);
  background(240);
  val=0;
}
function draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

function mouseMoved()
{
  val = val + 5;
  if (val > 255) {
    val = 0;
  }
}
       

À faire vous-même 7.8

Saisissez, analysez et testez ce code

var val;
function setup(){
  createCanvas(200,200);
  background(240);
  val=0;
}
function draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

function 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 7.9

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(300,300);
  background(240);
}
function draw() {

}

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