Trasformazione dei vertici di una forma

    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;