Blog

function mousePressed() {}

De function mousePressed wordt in P5js vanzelf aangeroepen als je de muis klikt. En ook precies 1x. mousePressed is niet gecshikt om te slepen / ingedrukt te houden en dan te tekenen. Het is wel geschikt als je 1x op een button wilt drukken en geen 2x, want dan zou de button uit gaan.

mouseIsPressed

mouseIsPressed is een systeem variabele – die P5js dus voor je bijhoudt – die aangeeft of de muis op dit moment is ingedrukt. De waarde is dus true of false. Je gebruikt mouseIsPressed typisch in de draw() om te zien of je nu moet gaan tekenen.

Resultaat

function draw() {
  if(mouseIsPressed) {
  fill("green")
  circle(mouseX,mouseY, 10)
}

function mousePressed() {
  fill("yellow")
  circle(mouseX,mouseY,30)
}

Met mousePressed() wordt het helemaal niks. Het resultaat met mouseIsPressed is ook niet geweldig, maar die gaan we verbeteren,

Verbeter je tekenwerk met een lijn

Je ziet dat de mouseIsPressed wat losse cirkels geeft. De afstand is te groot. We gaan dus een nieuwe truuk doen:

• pmouseX : de vorige positie van mouseX
• pmouseY: de vorige positie van mouseY

Met “de vorige positie” bedoelen we: die in het vorige frame. In de vorige draw(). En daarom sluit het wel goed aan als je het zo doet:

function draw() {
  if(mouseIsPressed) {
    stroke("green")
    strokeWeight(5)
   line(pmouseX,pmouseY,     mouseX,mouseY)
  }
}

Door een lijn te trekken van de vorige positie van de muis – in het vorige frame – naar de huidige positie – en dat herhalen we elk frame, krijgen we een gesloten lijn.