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() {
        point(this.pos.x, this.pos.y);
        // 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;
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, viene verificato che la distanza fra il cursore del mouse e il punto iniziale sia inferiore o meno a 60 pixel…

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

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

Strutturazione dei file:

p5.Vector, JavaScript For Of