Interacció amb el ratolí (II)

Del Tema 11 a l'experiència completa

Al Tema 11 vam aprendre a utilitzar mouseX, mouseY i mouseIsPressed per pintar i seguir el cursor. Ara anem més enllà:

• Distingir botons del ratolí: esquerre, dret i roda amb l'objecte mouseButton.
• Crear botons personalitzats (rectangles amb text) que reaccionin al clic.
• Construir una interfície de dibuix amb paleta de colors, selector de mida i goma d'esborrar.

mouseButton: esquerre, dret o roda

A p5.js v2, mouseButton és un objecte amb tres propietats booleanes:

• mouseButton.left — cert si el botó esquerre està premut.
• mouseButton.right — botó dret.
• mouseButton.center — roda central (clic).

Exemple: accions diferents segons el botó premut.

function mousePressed() {
  if (mouseButton.left) {
    background(200, 255, 200);   // esquerre
  } else if (mouseButton.right) {
    background(255, 200, 200);   // dret
  } else if (mouseButton.center) {
    background(200, 200, 255);   // roda
  }
  return false; // evita el menú contextual del navegador
}

Botons personalitzats: detectar clics en àrees

Per crear un botó, comprovem si les coordenades del ratolí en el moment del clic estan dins dels límits d'un rectangle.

if (mouseX > x && mouseX < x+ample && mouseY > y && mouseY < y+alt) { ... }

function mousePressed() {
  if (mouseX > 80 && mouseX < 200 && mouseY > 50 && mouseY < 110) {
    colorBoto = color(random(255), random(255), random(255));
  }
}

Barra d'eines de dibuix

Combinem botons per crear una interfície de dibuix amb selecció de color, mida i goma d'esborrar.

if (mouseY < 40) { // barra superior
  // Botons de color
  if (mouseX > 10+i*50 && mouseX < 50+i*50 && mouseY > 5 && mouseY < 35) {
    colorActual = colors[i]; goma = false;
  }
  // Botó goma
  if (mouseX > 280 && mouseX < 330) { goma = true; }
  // Botons mida +/- 
  if (mouseX > 350 && mouseX < 370) { mida = min(30, mida+2); }
  if (mouseX > 375 && mouseX < 395) { mida = max(1, mida-2); }
}

Doble clic i roda del ratolí

p5.js també ofereix doubleClicked() i mouseWheel(event).

let mida = 50;
function doubleClicked() {
  mida = random(30, 100); // doble clic: mida aleatòria
}
function mouseWheel(event) {
  mida = constrain(mida - event.delta * 0.5, 10, 120);
  return false;
}

Exemples creatius pas a pas

function mousePressed() {
  let d = dist(mouseX, mouseY, width/2, 100);
  if (d < 75 && d > 25) {
    let angle = atan2(mouseY-100, mouseX-width/2);
    if (angle < 0) angle += TWO_PI;
    let i = int(map(angle, 0, TWO_PI, 0, 18));
    colorSel = color(i * 20, 80, 90);
  }
}

function draw() {
  if (mouseIsPressed) {
    if (mouseButton.left) {
      stroke(0, 0, 255); strokeWeight(4);
    } else if (mouseButton.right) {
      stroke(255, 0, 0); strokeWeight(8);
    }
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Consells per a interfícies de dibuix

• Separa la zona d'eines de la zona de dibuix amb una condició if (mouseY > ALTURA_BARRA) per no pintar sobre els botons.
• Utilitza constrain() per limitar valors com la mida del pinzell o la posició d'elements.
• Dissenya botons amb feedback visual: canvia el color o la mida quan el ratolí passa per sobre (efecte hover).
• Empra dist() per a botons circulars o per detectar clics dins de cercles.
• Recorda return false; a mousePressed() si utilitzes el botó dret per evitar el menú contextual.