3. Repte 3. Interaccions

3.4. Localització del ratolí a la pantalla

Els exemples següents tracten de tenir localitzat el ratolí a la pantalla per a poder interactuar amb aquest.

Tot i que és molt senzill d’entendre, comentarem una mica l’exemple 5-13.

var x;
var offset = 10;   // Aquesta variable determina la mida de la 
                   // fletxa.
function setup() {
      createCanvas(240, 120);
      x = width/2;	// La mida del canvas dividida per dos. Això
			// situarà inicialment la línia al mig de la
			// pantalla.
}
function draw() {
      background(204);
      if (mouseX > x) {	        // Si el ratolí està a la dreta de la
				// línia
	   x += 0.5;
	   offset = -10;
      }
      if (mouseX < x) {	        // Si el ratolí està a l’esquerra de la
				// línia
	   x -= 0.5;
	   offset = 10;
      }
      // Draw arrow left or right depending on "offset" value
      line(x, 0, x, height); // Línia vertical
      // Les tres instruccions següents serveixen per a dibuixar la
      // fletxa.
      line(mouseX, mouseY, mouseX + offset, mouseY - 10);
      line(mouseX, mouseY, mouseX + offset, mouseY + 10);
      line(mouseX, mouseY, mouseX + offset*3, mouseY);
}

Com hem vist, detectem si el ratolí està a la dreta o a l’esquerra d’una determinada posició, fent servir la variable mouseX que ja hem fet servir.

L’exemple 5-14 ho complica una mica més, detecta si el ratolí està dins d’un cercle que tenim dibuixat a la pantalla. La detecció la fa mitjançant la instrucció dist() que determina la distància entre dos punts (fa servir la posició del ratolí i el centre del cercle).

Finalment, l’exemple 5-15, encara ho complica més, detectant si el ratolí està dins d’un rectangle. Aquest exemple introdueix l’operador && que ens servirà per a indicar que volem que s’hagin de complir totes les condicions que hem posat (4 en l’exemple).

En realitat, si us fixeu, la complicació rau en el fet d’haver de comprovar si el ratolí està o no dins el rectangle.

Exercicis

Revisa el codi de l’exemple 5-13 i respon aquestes preguntes:

1. Què significa que mouseX sigui més gran que x? Per què? Potser et va bé dibuixar unes coordenades per a poder-ho respondre.
2. Per què tenim dues instruccions if? Quina possibilitat no està directament prevista?
3. En l’exemple 5-14, la circumferència creix si el ratolí està dins el cercle. Quin canvi faries perquè quan el ratolí estigui fora del cercle aquest es faci més petit? Prova-ho abans de mirar el codi que trobaràs al final d’aquest repte (abans de l’annex). Però no t’espantis si el resultat no és el que esperes.