Testo particellare: interattività

Usando le coordinate del mouse, o le altre possibilità offerte da p5.js, si può rendere il testo reattivo alle azioni dell’utente.

    class Particella {
    constructor(pt) {
        this.pt = pt;
        this.pos = createVector(pt.x, pt.y);
    }
    display() {
        circle(this.pos.x, this.pos.y, 1);
        // avvicina o allontana il punto dal mouse
        let vettMouse = createVector(mouseX-this.pt.x, mouseY-this.pt.y);
        if (vettMouse.mag() < 60) {
            let vicinanza = 60 - vettMouse.mag();
            vettMouse.setMag(vicinanza / 20);
            this.pos.add(vettMouse);
        } else {
            this.pos = createVector(this.pt.x, this.pt.y);
        } 
    }
}

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, viene verificato che la distanza fra il cursore del mouse e il punto iniziale sia inferiore o meno a 60 pixel…

• se è inferiore, il punto viene avvicinato alla posizione del cursore del mouse;
• altrimenti, il punto viene riportato istantaneamente alla posizione iniziale.

Far allontanare i punti dal cursore del mouse (anziché farli avvicinare) facendo ruotare di 180° il vettore vettMouse:

  ...
vettMouse.rotate(PI);  // rotazione vettore 
this.pos.add(vettMouse);

Far tornare i punti alla loro posizione iniziale in modo graduale (anziché istantaneamente) interpolando le posizioni nell’else:

  let posIniziale = createVector(this.pt.x, this.pt.y);
this.pos.lerp(posIniziale, 0.05);  // provare anche valori diversi da 0.05

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

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