Curve delle lettere: textToPaths()

I contorni delle lettere sono descritti nel font da una sequenza di comandi: spostamenti (M), segmenti (L), curve di Bézier quadratiche (Q) o cubiche (C) e chiusure (Z). Il metodo textToPaths() della classe p5.Font restituisce questi comandi, con le coordinate dei punti.

    let font;
let comandi;

async function setup() {
    createCanvas( 670, 200 );
    font = await loadFont( "UbuntuCondensed.ttf" );
    textFont( font, 200 );
    textAlign( CENTER );
    comandi = font.textToPaths( "curve", width/2, 155 );
}

function draw() {
    background( 255 );
    fill( 0 );
    bezierOrder( 2 );   // curve quadratiche: un solo punto di controllo
    beginShape();
    for (let c of comandi) {
        if (c[0] == "M") {          // inizio di un contorno
            beginContour();
            vertex( c[1], c[2] );
        } else if (c[0] == "L") {   // segmento
            vertex( c[1], c[2] );
        } else if (c[0] == "Q") {   // curva quadratica
            let onda = sin( frameCount * 0.05 + c[1] * 0.02 ) * 15;
            bezierVertex( c[1], c[2] + onda );
            bezierVertex( c[3], c[4] );
        } else if (c[0] == "Z") {   // chiusura del contorno
            endContour( CLOSE );
        }
    }
    endShape();
}

Restituisce un array di comandi. Ogni comando è a sua volta un array, con la lettera del comando seguita dalle coordinate: ad esempio ["Q", 170, 158, 163, 153]. Come per text(), textAlign( CENTER ) centra la parola sulla coordinata x.

Ogni contorno della parola, compresi i “buchi” delle lettere come quello della “e”, diventa un contorno della stessa forma, aperto da beginContour() e chiuso da endContour( CLOSE ).

Con bezierOrder( 2 ) ogni curva richiede due chiamate di bezierVertex(): la prima indica il punto di controllo, che orienta la curva, la seconda il punto di arrivo, che sta sul contorno. Spostando solo i punti di controllo, qui in verticale del valore onda, che oscilla nel tempo, le lettere si deformano senza perdere le curve.

Sostituire fill( 0 ); con noFill(); per disegnare solo i contorni, oppure aggiungere l’onda anche alla coordinata c[4] del punto di arrivo.

I font TrueType, con estensione “.ttf”, descrivono le curve solo con comandi Q. Molti font con estensione “.otf” usano invece le curve cubiche C, che richiedono bezierOrder( 3 ) e tre chiamate di bezierVertex().

Strutturazione dei file:

Approfondimenti: