Rilevare se il mouse è sopra un poligono

Attraverso la libreria p5.collide2d è possibile controllare se un punto o una figura geometrica (linea, cerchio, ellisse, rettangolo, arco, poligono) si sovrappone a un’altra figura.

    let poligono = [];  // vertici del poligono

function setup() {
    createCanvas(400, 200);

    poligono[0] = createVector(80, 30);
    poligono[1] = createVector(320, 50);
    poligono[2] = createVector(90, 180);
    poligono[3] = createVector(190, 70);
}

function draw() {
    let sopra = collidePointPoly(mouseX, mouseY, poligono); 
    let colore = (sopra ? color(255,0,0) : color(0));
    
    background(255);
    stroke(colore);
    beginShape();
    for (let vertice of poligono) {
        vertex(vertice.x, vertice.y);
    }    
    endShape(CLOSE);
}


  poligono[0] = createVector(80, 30);
....

Definizione dei vertici del poligono creati come istanze della classe p5.Vector contenente le proprietà x e y.


  let sopra = collidePointPoly(mouseX, mouseY, poligono);

Controlla se la posizione del cursore del mouse si trova sopra il poligono. La variabile sopra assumerà il valore true se il cursore è interno al poligono e false in caso contrario.


  let colore = (sopra ? color(255,0,0) : color(0));

Il colore sarà rosso (color(255,0,0)) se sopra è true e nero in caso contrario.

La libreria p5.collide2d va inclusa nel file “index.html” facendo riferimento al file eventualmente caricato nella cartella o a quello disponibile attraverso un servizio CDN:
  <head>
    .... 
   <script src="https://unpkg.com/p5.collide2d"></script>
</head>    