3. Reto 3. Interacciones

3.3. Clic

Empezando

Hemos visto que para interactuar con el movimiento del ratón usamos las variables mouseX y mouseY. Para detectar el clic del ratón también tenemos una variable; se llama mouseIsPressed y, a pesar de que ya se había usado en el reto 1, no habíamos explicado cómo funcionaba. Es fácil; como toda variable, almacena un valor que será cierto si algún botón del ratón está pulsado y falso en caso contrario.

El ejemplo 5-10 nos sirve para ver de manera muy sencilla una manera de usar esta instrucción. ¿Qué pasa en este ejemplo cuando pulsamos el botón del ratón?

  1. La variable mouseIsPressed coge el valor de True (cierto).
  2. Se determina que el color de pintura sea el negro.

¿Por qué la segunda línea cambia de color cuando pulsamos el botón izquierdo del ratón? Porque se pinta después del if y si hemos entrado dentro del if (porque el botón estaba apretado), habremos seleccionado el color negro.

function setup() {
  createCanvas(240, 120);
  strokeWeight(30);
}
function draw() {
  background(204);
  stroke(102);               // Seleccionamos el color gris
  line(40, 0, 70, height);   // Dibujamos una línea
  if (mouseIsPressed == true) {
   stroke(0);               // Seleccionamos el color negro
 }
  line(0, 70, width, 50);   // Dibujamos una segunda línea  
}

El ejercicio 5-11 añade un else para que, cuando el ratón no esté apretado, el color seleccionado sea blanco.

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
}

En cada iteración –cada vez que la función draw() se ejecuta (50 veces por segundo)– se hace el siguiente proceso:

  1. Se pinta el fondo (borrando todo lo que haya encima)
  2. Se selecciona el color gris
  3. Se pinta la línea vertical
  4. Se comprueba si el ratón está pulsado
  5. Si es así se selecciona el color negro
  6. En caso contrario, se selecciona el color blanco
  7. Se pinta la línea horizontal

Probad este ejercicio apretando cualquiera de los tres botones del ratón.

El ejemplo 5-12, además de comprobar si se ha pulsado un botón, se comprueba específicamente si es el botón izquierdo. Huelga decir que podemos cambiar LEFT por RIGHT o por CENTER para seleccionar otro de los botones del ratón. Probadlo.

En la página 72 nos muestran con diagramas diferentes casos que nos podemos encontrar cuando usemos la instrucción if. Podemos anidar los if, lo cual es muy útil y a la vez una complicación. Hace falta que tengamos muy claro cómo funciona esta instrucción para entenderla bien cuando esté anidada.

Ejercicios

  1. Viendo lo que hace este programa, explicad qué son las variables height y  width.
  2. Haced que, en vez de pintarse de color blanco, la línea se pinte de color amarillo. Podéis consultar cómo pintar diferentes colores en esta página del manual de referencia de p5.js: https://p5js.org/reference/#/p5/stroke.
  3. Modificad el código para que sean las dos líneas las que cambien de color cuando pulsemos el botón izquierdo del ratón.