Testo su curva di Bézier

I caratteri si dispongono uno dopo l’altro lungo una curva più libera di un cerchio, di cui bezierPoint() calcola i punti. I punti di controllo, scelti a caso, cambiano la curva a ogni esecuzione.

    function setup() {
    let frase = "sequenza di lettere su una curva di Bézier ";

    createCanvas( 670, 300 );
    background( 255 );
    textSize( 20 );

    let ax = 20,  ay = random( 30, 270 );              // estremi
    let bx = 650, by = random( 30, 270 );
    let c1x = random( width ), c1y = random( height ); // punti di controllo
    let c2x = random( width ), c2y = random( height );

    let t = 0;   // posizione lungo la curva, da 0 (inizio) a 1 (fine)
    let i = 0;   // posizione del carattere nella frase
    while (t <= 1) {
        let carattere = frase.charAt( i % frase.length );
        let x = bezierPoint( ax, c1x, c2x, bx, t );
        let y = bezierPoint( ay, c1y, c2y, by, t );
        let dx = bezierTangent( ax, c1x, c2x, bx, t );
        let dy = bezierTangent( ay, c1y, c2y, by, t );

        push();
        translate( x, y );
        rotate( atan2( dy, dx ) );
        text( carattere, 0, 0 );
        pop();

        t = t + fontWidth( carattere ) / mag( dx, dy );
        i++;
    }
}
  

  let x = bezierPoint( ax, c1x, c2x, bx, t );
let y = bezierPoint( ay, c1y, c2y, by, t );

Restituisce una coordinata del punto della curva che si trova nella posizione t, dati i due estremi e i due punti di controllo: con t uguale a 0 il punto è il primo estremo, con 1 il secondo. Le due coordinate si calcolano separatamente.

  let dx = bezierTangent( ax, c1x, c2x, bx, t );
let dy = bezierTangent( ay, c1y, c2y, by, t );
...
rotate( atan2( dy, dx ) );

bezierTangent() restituisce la direzione della curva nello stesso punto, come spostamento orizzontale dx e verticale dy. atan2() ne ricava l’angolo, che ruota il carattere.

  t = t + fontWidth( carattere ) / mag( dx, dy );

La curva non si percorre a velocità costante: dove la lunghezza del vettore (dx, dy), calcolata da mag(), è grande, a un piccolo aumento di t corrisponde un tratto lungo. Dividendo per questa lunghezza la larghezza del carattere, i caratteri restano alla stessa distanza anche con un font a larghezza variabile.

  while (t <= 1) {
    let carattere = frase.charAt( i % frase.length );

Il ciclo continua fino alla fine della curva, dove t vale 1. L’operatore % riporta l’indice all’inizio della frase, che si ripete finché c’è spazio.

Riavviare lo sketch con il pulsante sotto il risultato per ottenere curve diverse, oppure disegnare anche la curva aggiungendo prima del ciclo:

  noFill();
bezier( ax, ay, c1x, c1y, c2x, c2y, bx, by );
fill( 0 );