Testo particellare: visualizzazione

Usando una classe è possibile gestire più facilmente la memorizzazione, l’uso e l’aggiornamento delle proprietà di ogni punto.

    class Particella {
    constructor(pt) {
        this.pt = pt;                         // salvataggio punto testo
        this.pos = createVector(pt.x, pt.y);  // posizione corrente
    }
    display() {
        circle(this.pos.x, this.pos.y, 2);    // visualizzazione 
    }
}
let particelle = [];
let font;
function preload() {
    font = loadFont("UbuntuCondensed.ttf");
}
function setup() {
    createCanvas(670, 300);
    let parametri = { sampleFactor: 0.1, simplifyThreshold: 0 };
    let punti = font.textToPoints("testo", 30, 250, 320, parametri);
    // CREA LE PARTICELLE E SALVALE 
    for (let punto of punti) {
        particelle.push( new Particella(punto) ); 
    }
}
function draw() {
    background(255); 
    for (let particella of particelle) {
        particella.display(); 
    }
}

Intervenire sul metodo display() modificando il diametro del cerchio o usando una figura diversa. Per le istruzioni che richiedono più di un punto, è possibile ricavare gli altri con delle semplici somme o sottrazioni:

magari usando anche la proprietà pt.alpha:

Strutturazione dei file:

p5.Font.textToPoints(), JavaScript For Of