3. Repte 3. Interaccions

3.3. Clic

Començant

Hem vist que per a interactuar amb el moviment del ratolí fem servir les variables mouseX i mouseY. Per a detectar el clic del ratolí també tenim una variable, es diu mouseIsPressed i, tot i que ja l’hem fet servir en el repte 1, no hem explicat com funcionava. És fàcil, com a tota variable, emmagatzema un valor que serà cert si algun botó del ratolí està premut i fals en cas contrari.

L’exemple 5-10 ens serveix per a veure de manera molt senzilla com fer servir aquesta instrucció. Què passa en aquest exemple quan premem el botó del ratolí?

  1. La variable mouseIsPressed agafa el valor de True (cert).
  2. Es determina que el color de pintura és el negre.

Per què la segona línia canvia de color quan premem el botó esquerre del ratolí? Perquè es pinta després de l’if i si hem entrat dins de l’if (perquè el botó estava premut) haurem seleccionat el color negre.

function setup() {
  createCanvas(240, 120);
  strokeWeight(30);
}
function draw() {
  background(204);
  stroke(102);               // Seleccionem el color gris
  line(40, 0, 70, height);   // Dibuixem una línia
  if (mouseIsPressed == true) {
   stroke(0);                // Seleccionem el color negre
 }
  line(0, 70, width, 50);    // Dibuixem una segona línia 
}

L’exercici 5-11 afegeix un else. Per tant, quan el ratolí no estigui premut, el color seleccionat serà el blanc.

function setup() {
 createCanvas(240, 120);
 strokeWeight(30);
}
function draw() {
 background(204);     // 1
 stroke(102);       // 2
 line(40, 0, 70, height); // 3
 if (mouseIsPressed) {  // 4
  stroke(0);       // 5 
 } else {
  stroke(255);      // 6
 }
line(0, 70, width, 50);  // 7
}

A cada iteració –cada cop que la funció draw() s’executa (50 cops per segon)– es fa el procés següent:

  1. Es pinta el fons (esborrant tot el que hi hagi a sobre)
  2. Es selecciona el color gris
  3. Es pinta la línia vertical
  4. Es comprova si el ratolí està premut
  5. Si és així, se selecciona el color negre
  6. En cas contrari, se selecciona el color blanc
  7. Es pinta la línia horitzontal

Prova aquest exercici clicant qualsevol dels tres botons del ratolí.

L’exemple 5-12, a més de comprovar si s’ha clicat un botó, es comprova específicament si és el botó esquerre. No cal dir que podem canviar LEFT per RIGHT o per CENTER per a seleccionar un altre dels botons del ratolí. Prova-ho.

En la pàgina 72 ens mostren, amb diagrames diferents, casos que ens podem trobar quan fem servir la instrucció if. Podem niar els if, la qual cosa és molt útil i alhora una complicació. Cal que tinguem molt clar com funciona aquesta instrucció per a entendre-la bé quan estigui niada.

Exercicis

  1. Veient el que fa aquest programa, explica què són les variables height i width.
  2. Fes que en comptes de pintar-se de color blanc, la línia es pinti de color groc. Pots consultar com pintar diferents colors en aquesta pàgina del manual de referència de p5.js: https://p5js.org/reference/#/p5/stroke.
  3. Modifica el codi perquè siguin les dues línies les que canviïn de color quan cliquem el botó esquerre del ratolí.