Creazione di forme attraverso i vettori
// height=100 lines=auto
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:
translate( width/2, height/2 );
rotate( frameCount/50 );
Modificando anche i parametri del translate() è possibile spostare facilmente la figura.