Rettangoli che reagiscono al mouse

Spostare il cursore del mouse sopra il rettangolo nel canvas.

    let colore = "white";
let rettX = 15;
let rettY = 30;
let larghezza = 70;
let altezza = 40;

function draw() {
    background( 200 );
    fill( colore );
    rect( rettX, rettY, larghezza, altezza );
}

function mouseMoved() {
    if (mouseX > rettX && mouseX < rettX + larghezza &&
        mouseY > rettY && mouseY < rettY + altezza) {
        colore = "yellow";
    } else {
        colore = "white";
    }
}
  

  let rettX = 15;
let rettY = 30;

Coordinate del vertice in alto a sinistra del rettangolo.

  if (mouseX > rettX && mouseX < rettX + larghezza &&
    mouseY > rettY && mouseY < rettY + altezza) {

Il cursore è dentro il rettangolo quando si trova fra il lato sinistro (rettX) e quello destro (rettX + larghezza) e, nello stesso tempo (&&), fra il lato superiore (rettY) e quello inferiore (rettY + altezza). Per leggerla meglio, la condizione è divisa su due righe, una per direzione.

Per forme più complesse, come i poligoni, la libreria p5.collide2D offre funzioni già pronte, ad esempio collidePointPoly().