Trasformazione dei vertici di una forma
// height=100 lines=auto
let vertici = []; // array di vertici (p5.Vector)
let numVertici = 50; // numero dei vertici
function setup() {
// CREA E MEMORIZZA I VERTICI
for (let i=0; i<numVertici; ++i) {
let angolo = map( i, 0, numVertici, 0, TWO_PI );
let raggio = 30+sin(angolo*5)*10;
let v = p5.Vector.fromAngle( angolo, raggio );
vertici[i] = v;
}
}
function draw() {
// TRASFORMA I VERTICI
let trasformati = []; // array con i vettori trasformati
for (let i=0; i<vertici.length; ++i) {
let vertice = vertici[i].copy(); // duplica vertice
let t = ((frameCount+i)/100);
let angolo = map( t%50, 0, 50, 0, TWO_PI*100 );
let raggio = sin(angolo)*6;
let vett = p5.Vector.fromAngle( angolo, raggio );
vertice.add(vett);
trasformati[i] = vertice; // salva vertice trasformato
}
// DISEGNA IL POLIGONO usando l'array 'trasformati'
background(220);
translate( width/2, height/2 );
beginShape();
for (let i=0; i<trasformati.length; ++i) {
vertex( trasformati[i].x, trasformati[i].y );
}
endShape(CLOSE);
}
// TRASFORMA I VERTICI
let trasformati = []; // array con i vettori trasformati
for (let i=0; i<vertici.length; ++i) {
let vertice = vertici[i].copy(); // duplica vertice
// istruzioni di modifica del vertice
trasformati[i] = vertice; // salva vertice trasformato
}
Ogni vertice viene duplicato, modificato e inserito in un nuovo array chiamato trasformati
. Per la visualizzazione verrà quindi usato l'array trasformati
anziché l'array vertici
.
// istruzioni di modifica del vertice: esempio
let t = ((frameCount+i)/100);
let angolo = map( t%50, 0, 50, 0, TWO_PI*100 );
let raggio = sin(angolo)*6;
let vett = p5.Vector.fromAngle( angolo, raggio );
vertice.add(vett);
Una possibile modifica può essere quella di aggiungere, alle coordinate di ogni vertice, un vettore (vett
) con angolo e lunghezza progressivamente diversi.
Provare a sostituire "vertice.add(vett);
" con altre istruzioni che modifichino le coordinate del vertice da trasformare, ad esempio una delle seguenti:
vertice.rotate(raggio/20);
vertice.setMag(vertice.mag()+raggio);
vertice.setMag(vertice.mag()+vett.mag());
vertice.y += vett.y;