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;
async function setup() {
    createCanvas(670, 200);
    font = await loadFont("UbuntuCondensed.ttf");
    textSize(240);
    let parametri = { sampleFactor: 0.1, simplifyThreshold: 0 };
    let punti = font.textToPoints("testo", 105, 180, 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:

  line(this.pos.x, this.pos.y, this.pos.x+10, this.pos.y-10);

magari usando anche la proprietà pt.alpha, cioè la direzione del contorno in quel punto:

  push();
translate(this.pos.x, this.pos.y);
rotate(this.pt.alpha);
line(0, 0, 10, 0);
pop();

Far cambiare la posizione dei punti nel tempo, aggiungendo alla fine del metodo display() un piccolo spostamento in una direzione casuale:

  this.pos.add(p5.Vector.random2D());

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():

  function preload() {
    font = loadFont("UbuntuCondensed.ttf");
}
...
    let punti = font.textToPoints("testo", 30, 250, 320, parametri);