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() {
        circle(this.pos.x, this.pos.y, 1);
        // ruota intorno al punto originario, con una velocità
        // che dipende dall'orientamento del tracciato
        let velocita = map(this.pt.alpha, -PI, PI, 0.01, 0.03);
        let angolo = frameCount * velocita;            // 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
    }
}

let particelle = [];
let font;
async function setup() {
    createCanvas(670, 200);
    font = await loadFont("UbuntuCondensed.ttf");
    textSize(240);
    let parametri = { sampleFactor: 1, simplifyThreshold: 0 };
    let punti = font.textToPoints("testo", 105, 180, 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). La funzione map() trasforma l’orientamento, che va da -PI a PI, in una velocità da 0.01 a 0.03 radianti per fotogramma.

Provare a modificare gli ultimi due valori di map(), la velocità minima e massima.

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

Per vedere i vettori che ruotano, ridurre il numero dei punti con sampleFactor: 0.2 e disegnare all’inizio del metodo display() il punto originario e il vettore:

  circle(this.pt.x, this.pt.y, 2);                     // punto originario
line(this.pt.x, this.pt.y, this.pos.x, this.pos.y);  // vettore ruotato

I punti sono disegnati con circle() e non con point(): con p5.js dalla versione 2.3.1 alla 2.3.4, in Chrome, point() non disegna buona parte dei punti con la coordinata x oltre 256, e il risultato sfarfalla. La correzione arriverà con la versione successiva.

Strutturazione dei file:

• CARTELLA-SKETCH
  • index.html
  • sketch.js
  • style.css
  • UbuntuCondensed.ttf

Con p5.js 1 i font si caricano nella funzione preload(), che p5.js 2 non usa più, e la dimensione del testo è il quarto parametro di textToPoints(). L’orientamento alpha era in gradi, sempre positivo, e l’angolo si ricavava con una divisione:

  function preload() {
    font = loadFont("UbuntuCondensed.ttf");
}
...
        let angolo = frameCount / this.pt.alpha * 5;
...
    let punti = font.textToPoints("testo", 30, 250, 320, parametri);