p5js_workshop

6 hours workshop about p5.js and p5play.js

View the Project on GitHub

Probabilmente incontrerete un sacco di typos e errori, aiutatemi a rendere il materiale del workshop più bello con ISSUES e PR

Giorno 1 - Parte 3 - interazioni con il mouse

mouseX e mouseY

Vogliamo che il personaggio che abbiamo disegnato segui la posizione del mouse. p5.js così come progessing ci mette a disposizione due variabili che possiamo usare per conoscere la posizione del mouse. mouseX e mouseY.

Possiamo dunque modificare il codice dello sketch.js per disegnare il nostro oggetto non più nella posizione fissata al centro dello schermo (width/2, height/2), ma in posizione (mouseX, mouseY)


function setup() {
  createCanvas(400, 300);
}

function draw() {
background(153);

strokeWeight(4);

fill(200,200,0);
rect(mouseX-50, mouseY-50, 100, 100);

fill (255);
ellipse(mouseX-50+25, mouseY-50+30, 20, 20)
ellipse(mouseX-50+70, mouseY-50+30, 30, 30)

stroke(0);
line(mouseX-30, mouseY+30, mouseX+30, mouseY+30)

noStroke();
rect(mouseX-30, mouseY+18, 10, 10);
rect(mouseX+20, mouseY+18, 10, 10);

push();
stroke(0);
translate(mouseX-60,mouseY-60);
fill(255,100,30);
triangle(0, 0, 0, 60, 60, 0);
pop();

}

Possiamo anche monitorare se il bottone del mouse è premuto oppure no con la variabile mouseIsPressed

if (mouseIsPressed) {
    //fai una cosa
  } else {
    //fai qualcos'altro
  }

puoi vedere il risultato dello sketch qui

appunti del giorno 1: