Interacció amb el ratolí (I)

Per què fer art interactiu?

L'art interactiu transforma l'espectador en participant. Quan l'obra reacciona al moviment, als clics o als gestos, es crea un diàleg entre la persona i el codi. Cada experiència és única.

Amb p5.js, el ratolí és la forma més immediata d'interacció. Les variables integrades mouseX i mouseY ens diuen en tot moment on és el cursor dins del llenç.

mouseX i mouseY

mouseX conté la coordenada X (horitzontal) del ratolí dins del llenç, i mouseY la coordenada Y (vertical). Aquests valors s'actualitzen automàticament a cada fotograma.

Podem utilitzar aquestes variables directament com a paràmetres de qualsevol funció de dibuix. Per exemple, perquè un cercle segueixi el cursor:

function draw() {
  background(240, 10); // fons semi-transparent per deixar rastre
  fill(100, 150, 255);
  noStroke();
  ellipse(mouseX, mouseY, 30, 30); // cercle que segueix el ratolí
}

El fons amb alfa baix crea un efecte de "pinzellada" que deixa rastre del moviment.

El ratolí com a controlador

Més enllà de la posició, podem utilitzar el ratolí per controlar altres propietats: mida, color, velocitat, nombre d'elements... Qualsevol paràmetre pot dependre de mouseX o mouseY.

function draw() {
  background(0, 0, 95);
  let mida = map(mouseX, 0, width, 10, 80);   // mida segons X
  let to = map(mouseY, 0, height, 0, 360);    // color segons Y
  fill(to, 80, 90);
  ellipse(width/2, height/2, mida, mida);
}

Pintar amb el ratolí

Per crear una eina de dibuix, hem de dibuixar contínuament mentre el ratolí estigui premut. La variable mouseIsPressed és true mentre es manté premut qualsevol botó del ratolí.

function draw() {
  if (mouseIsPressed) {
    stroke(0, 0, 200);
    strokeWeight(4);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

pmouseX i pmouseY contenen la posició del ratolí al fotograma anterior. Dibuixant línies entre la posició anterior i l'actual, obtenim un traç continu.

Detectar clics i arrossegar

A més de mouseIsPressed al draw(), p5.js ofereix funcions d'event que s'executen en moments concrets:

• mousePressed() — s'executa un cop quan es prem el ratolí.
• mouseReleased() — s'executa un cop quan s'allibera.
• mouseDragged() — s'executa contínuament mentre s'arrossega.

Exemple: dibuixar cercles en fer clic, i pintar en arrossegar.

function draw() {
  if (mouseIsPressed) {
    stroke(200,0,0,100); strokeWeight(6);
    line(pmouseX, pmouseY, mouseX, mouseY); // arrossegar pinta
  }
}
function mousePressed() {
  fill(0,200,0,150); noStroke();
  ellipse(mouseX, mouseY, 20, 20); // clic deixa un cercle verd
}

Exemples creatius pas a pas

if (mouseIsPressed) {
  let mida = map(mouseY, 0, height, 2, 20);
  let r = map(mouseX, 0, width, 0, 255);
  let g = map(mouseY, 0, height, 0, 255);
  stroke(r, g, 200, 150); strokeWeight(mida);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

function draw() {
  background(10, 10, 30, 20);
  for (let i=0; i<3; i++) {
    let x = mouseX + random(-25, 25);
    let y = mouseY + random(-25, 25);
    let mida = random(2, 8);
    fill(255, 255, 200, random(100,255));
    noStroke(); ellipse(x, y, mida, mida);
  }
}

Consells per a la interacció amb el ratolí

• Fons semi-transparent: background(r,g,b,alfa) amb alfa baix (10-50) crea rastres suaus ideals per pintar.
• Utilitza pmouseX/pmouseY per connectar el punt anterior amb l'actual i evitar forats en el traç.
• Combina amb map(): transforma les coordenades del ratolí en rangs útils per a colors, mides o velocitats.
• Netedat: si vols un llenç net al començament, posa background() sense alfa al setup().