Creazione di forme attraverso i vettori

    let vertici = [];     // array di vertici (p5.Vector)
let numVertici = 50;  // numero dei vertici

function setup() {
    // RICAVA E MEMORIZZA I PUNTI DELLA CIRCONFERENZA
    for (let i=0;  i<numVertici;  ++i) {
      let angolo = map( i, 0, numVertici, 0, TWO_PI );
      let raggio = 30;  
      let v = p5.Vector.fromAngle( angolo, raggio );
      vertici[i] = v;
    }
}

function draw() {
    // DISEGNA IL "POLIGONO"  
    background(220);
    translate( width/2, height/2 );  // origine al centro del canvas
    beginShape();
    for (let i=0;  i<vertici.length;  ++i) {
        vertex( vertici[i].x, vertici[i].y );
    }
    endShape(CLOSE);
}
  

  let angolo = map( i, 0, numVertici, 0, TWO_PI );
let raggio = 30;
let v = p5.Vector.fromAngle( angolo, raggio );

I vertici vengono ricavati a partire da un angolo che varia da 0 a TWO_PI (giro completo) e un raggio fisso di 30 pixel. Grazie al metodo p5.Vector.fromAngle() è possibile ottenere anche i punti di una circonferenza senza dover usare le funzioni sin() e cos().

Far oscillare la lunghezza del raggio nel for() di creazione dei vertici, ad esempio con:

  let raggio = 30 + sin(angolo*5)*20;

provando poi a modificare i parametri ed eventualmente anche il numero di vertici.

Dopo le modifiche precedenti, è possibile far ruotare automaticamente la figura semplicemente aggiungendo un’istruzione rotate() dopo il translate(), ad esempio:

      /*0*/translate( width/2, height/2 );/**/
    rotate( frameCount/50 );

Modificando anche i parametri del translate() è possibile spostare facilmente la figura.