3. Reto 3. Interacciones

3.4. Localización del ratón en la pantalla

Los siguientes ejemplos tratan de tener localizado el ratón en la pantalla para poder interactuar con él.

A pesar de que es muy sencillo de entender, comentaremos un poco el ejemplo 5-13.

var x;
var offset = 10;   // Esta variable determina el tamaño de la 
                   // flecha.
function setup() {
      createCanvas(240, 120);
      x = width/2;	// El tamaño del canvas dividido por dos. Esto
			// situará inicialmente la línea en medio de la
			// pantalla.
}
function draw() {
      background(204);
      if (mouseX > x) {	        // Si el ratón está a la derecha de la
				// línea
	   x += 0.5;
	   offset = -10;
      }
      if (mouseX < x) {	        // Si el ratón está a la izquierda de la
				// línea
	   x -= 0.5;
	   offset = 10;
      }
      // Draw arrow left or right depending on "offset" value
      line(x, 0, x, height); // Línea vertical
      // Las tres siguientes instrucciones sirven para dibujar la
      // flecha.
      line(mouseX, mouseY, mouseX + offset, mouseY - 10);
      line(mouseX, mouseY, mouseX + offset, mouseY + 10);
      line(mouseX, mouseY, mouseX + offset*3, mouseY);
}

Cómo hemos visto, detectamos si el ratón está a la derecha o a la izquierda de una determinada posición, usando la variable mouseX que ya habíamos usado.

En el ejemplo 5-14 lo complica algo más; detecta si el ratón está dentro de un círculo que tenemos dibujado en la pantalla. La detección la hace mediante la instrucción dist() que determina la distancia entre dos puntos (usa la posición del ratón y el centro del círculo).

Finalmente, en el ejemplo 5-15, lo complica todavía más, detectando si el ratón está dentro de un rectángulo. En este ejemplo introduce el operador && que nos servirá para indicar que queremos que se tengan que cumplir todas las condiciones que hemos puesto (4 en el ejemplo).

En realidad, si os fijáis, la complicación radica en el hecho de tener que comprobar si el ratón está o no dentro del rectángulo.

Ejercicios

Revisad el código del ejemplo 5-13 y responded a estas preguntas:

1. ¿Qué significa que mouseX sea más grande que x? ¿Por qué? Quizás os va bien dibujar unas coordenadas para responder.
2. ¿Por qué tenemos dos instrucciones if? ¿Qué posibilidad no está directamente contemplada?
3. En el ejemplo 5-14 la circunferencia crece si el ratón está dentro del círculo. ¿Qué cambio haríais para hacer que, cuando el ratón esté fuera del círculo, este se haga más pequeño? Probadlo antes de mirar el código que encontraréis al final de este reto (antes del anexo). Pero no os asustéis si el resultado no es lo que esperáis.