Testo particellare: animazione

Una volta definita la classe e create le istanze di ogni punto, è sufficiente far modificare ciclicamente le proprietà per far muovere tutte le particelle.

    class Particella {
    constructor(pt) {
        this.pt = pt;
        this.pos = createVector(pt.x, pt.y);
    }
    display() {
        point(this.pos.x, this.pos.y);
        // ruota intorno al punto originario 
        let angolo = frameCount / this.pt.alpha * 5;   // angolo rotazione
        let vettore = p5.Vector.fromAngle(angolo, 10); // vettore di 10 px
        this.pos = createVector(this.pt.x, this.pt.y); // centro rotazione
        this.pos.add( vettore );               // aggiunta vettore ruotato
    }
}

let particelle = [];
let font;
function preload() {
    font = loadFont("UbuntuCondensed.ttf");
}
function setup() {
    createCanvas(670, 300);
    let parametri = { sampleFactor: 1, simplifyThreshold: 0 };
    let punti = font.textToPoints("testo", 30, 250, 320, parametri);
    for (let punto of punti) {
        particelle.push( new Particella(punto) ); 
    }
}
function draw() {
    background(255); 
    for (let particella of particelle) {
        particella.display(); 
    }
}

In sostanza, il punto memorizzato attraverso il vettore pos viene fatto ruotare attorno alla posizione iniziale (proprietà pt) usando una velocità dipendente dal suo orientamento nel tracciato (proprietà pt.alpha).

Provare a modificare il moltiplicatore della variabile angolo usando valori diversi da 5.

Provare a modificare la lunghezza di vettore usando valori diversi da 10.

Provare a utilizzare anche le coordinate del punto iniziale, ad esempio:

Strutturazione dei file:

p5.Vector, JavaScript For Of