Trasformazioni in fase di visualizzazione

    let font;
let punti;

function preload() {
    font = loadFont("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);
        vettori[i] = vettore;
    }
    background(255);
    for (let vett of vettori) {
        let vett2 = vett.copy();
        vett2.add(15, random(-10)); // COPIA SPOSTATA DEL VETTORE
        line(vett.x, vett.y, vett2.x, vett2.y);
    }
}
  

  let vett2 = vett.copy();
vett2.add(15, random(-10)); // COPIA SPOSTATA DEL VETTORE
line(vett.x, vett.y, vett2.x, vett2.y);

Duplica il vettore e aggiunge 15 pixel alla coordinata x e un valore casuale fra 0 e -15 alla coordinata y. Usa il nuovo vettore per disegnare la secondo estremità di un segmento.

Modificare il colore delle linee usando valori ricavati dai vettori, ad esempio l’angolo o la distanza rispetto all’origine:

  stroke( vett.heading()*150, vett.mag()*0.4, 0 );
/*0*/line(vett.x, vett.y, vett2.x, vett2.y);/**/

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
  • index.html
  • sketch.js
  • UbuntuCondensed.ttf