Lettere in rilievo: textToModel()

Il metodo textToModel() della classe p5.Font trasforma i contorni delle lettere in un modello tridimensionale, estruso in profondità come un timbro. Il modello si disegna con model() in un canvas creato in modalità WEBGL.

    let font;
let lettere;

async function setup() {
    createCanvas( 670, 200, WEBGL );
    font = await loadFont( "UbuntuCondensed.ttf" );
    textSize( 150 );
    textAlign( CENTER, CENTER );
    lettere = font.textToModel( "solido", 0, 0,
                                { extrude: 40, sampleFactor: 0.5 } );
}

function draw() {
    background( 255 );
    orbitControl();     // trascinando il mouse si ruota la vista
    normalMaterial();   // colori secondo l'orientamento delle facce
    rotateY( sin( frameCount * 0.02 ) * 0.6 );
    model( lettere );
}

In modalità WEBGL si aggiunge una terza dimensione, la profondità, e l’origine delle coordinate passa al centro del canvas.

Crea il modello della parola “solido” con la dimensione impostata da textSize(), centrato sul punto 0, 0, cioè sul centro del canvas, grazie a textAlign(). extrude indica la profondità del rilievo, sampleFactor la densità dei punti presi lungo i contorni, come in textToPoints().

Trascinare il mouse sul canvas per ruotare la vista, e provare valori diversi di extrude, ad esempio 5 o 120.

Ridurre molto il valore di sampleFactor, provando ad esempio 0.01, 0.02 o 0.03: i contorni vengono descritti da pochi punti, e le lettere diventano poligoni sfaccettati.

Strutturazione dei file:

Approfondimenti: