Trasformazioni vettoriali (casuali)

Le trasformazioni potrebbero essere fatte direttamente prima di usare le coordinate dei punti ma conviene convertire i punti in vettori per poter sfruttare i metodi della classe p5.Vector e avere a disposizione anche le coordinate non trasformate.

// height=300 lines=auto
let font;
let punti;

function preload() {
    font = loadFont("assets/UbuntuCondensed.ttf");
}
function setup() {
    createCanvas(670,300);
    punti = font.textToPoints("testo", 30, 260, 320);
}
function draw() {
    let vettori = []; 
    for (let i = 0; i < punti.length; ++i) {
        let vettore = createVector(punti[i].x, punti[i].y);

        vettore.x += random(-3, 3); // modifica vettore
        
        vettori[i] = vettore;
    }
    background(255);
    for (let vett of vettori) {  // iterazione vettori 
        circle(vett.x, vett.y, 2);
    }
}

let vettori = [];
for (let i = 0; i < punti.length; ++i) {
    let vettore = createVector(punti[i].x, punti[i].y);
    // istruzioni con trasformazione vettore
    vettori[i] = vettore;
}

I punti vengono letti e usati per creare istanze di p5.Vector (vettore) da aggiungere all'array di tutti i punti trasformati (vettori)

vettore.x += random(-3, 3);

Una trasformazione minima potrebbe essere quella di aggiungere un valore casuale fra -3 e 3 pixel alla coordinata x del vettore, prima di aggiungerlo all'array.

Strutturazione dei file: