Curve di Bézier, storia di un’idea nata tra Renault e Citroën che usi ogni volta che trascini una maniglia

Sullo schermo, su fondo nero, si vede una linea blu sottile che sale, fa una gobba morbida, ridiscende e si distende. È una S pigra. Ai due estremi ci sono due quadratini vuoti. Attraverso ciascuno passa un segmento dritto e inclinato che finisce con due pallini pieni. Qualcuno ci ha scritto sopra a mano, in rosso: 1 sul quadratino, 2 sul pallino, 3 lungo il segmento. È lo schema più semplice di una curva di Bézier, e in pratica è la domanda che mi fanno tutti gli studenti la prima volta che aprono un programma vettoriale: come si chiamano queste cose?

Lavoro con lo strumento penna da più di vent’anni. Ci ho disegnato loghi, pittogrammi, lettere e profili di oggetti da mandare alla fresa. Ogni volta che spiego queste tre parti mi accorgo che dietro quei pallini blu c’è una storia che pochi conoscono: è nata nelle sale progetto dell’industria automobilistica francese, è stata trovata due volte e una delle due è rimasta segreta per anni.

Anatomia della foto: ancoraggio, maniglia, linea di direzione

Partiamo da quello che si vede nell’immagine, perché i numeri in rosso sono messi bene.

1 – Punto di ancoraggio. È il quadratino vuoto, il punto da cui la curva passa davvero. Alcuni programmi lo chiamano nodo, ma è la stessa cosa. Gli ancoraggi sono i punti fissi del tracciato. Tutto il resto serve a decidere come la linea arriva e riparte da lì.
2 – Maniglia, o punto di controllo. È il pallino pieno in cima al segmento. La curva non ci passa sopra: ne viene attirata, come un filo tirato da un magnete. Più la maniglia è lontana dall’ancoraggio, più la curva insiste in quella direzione prima di piegare.
3 – Linea di direzione. È il segmento che collega l’ancoraggio alla maniglia. Adobe la chiama proprio così, direction line. In molta documentazione tecnica la trovate come braccio di controllo. Dal punto di vista geometrico è la tangente alla curva in quel punto. Quell’inclinazione è la direzione esatta che la linea ha nel momento in cui lascia l’ancoraggio.

C’è un dettaglio che nella foto si vede bene: in ciascun ancoraggio le due maniglie stanno sulla stessa retta, una da una parte e una dall’altra. Si parla di punto smussato (smooth point). Visto che le due tangenti sono allineate, la curva attraversa il nodo senza spigoli. Se spezzate quell’allineamento ottenete un punto d’angolo. Tutto il disegno vettoriale si regge su questa coppia di casi.

Citroën, 1959: la curva che nessuno doveva vedere

Alla fine degli anni Cinquanta le carrozzerie si definivano ancora con dime, modelli in gesso e tavole tracciate a mano in scala 1:1. Passare dal modello fisico a una macchina utensile a controllo numerico voleva dire descrivere una superficie libera con dei numeri. Allora nessuno sapeva farlo in modo stabile e facile da modificare.

Nel 1958 entra in Citroën Paul de Faget de Casteljau, un giovane matematico appena tornato dal servizio militare in Algeria. Lui stesso, nella breve autobiografia uscita molto più tardi su Computer Aided Geometric Design, racconta con un’ironia rara l’impatto con un ambiente in cui tutto era ancora pneumatico, nastri perforati compresi. Nel 1959 mette a punto un metodo ricorsivo per costruire una curva polinomiale partendo da un poligono di punti di controllo. È quello che oggi tutti chiamano algoritmo di de Casteljau: si prendono i punti medi dei segmenti del poligono, poi i punti medi dei nuovi segmenti, e si continua finché resta un solo punto, che sta sulla curva.

Citroën considerava il lavoro un vantaggio industriale e lo tenne riservato nei rapporti interni. Per questo per anni il nome di de Casteljau è rimasto fuori dalla letteratura. Le ricostruzioni storiche più serie, come quella di Gerald Farin sulla storia della geometria computazionale e il recente tour d’horizon sull’opera di de Casteljau, gli riconoscono la priorità cronologica. In pratica, però, la riscoperta dei suoi rapporti è arrivata solo negli anni Settanta.

Renault, anni Sessanta: Pierre Bézier e UNISURF

Più o meno negli stessi anni, dall’altra parte della concorrenza, Pierre Bézier lavorava in Renault come ingegnere della produzione e delle macchine utensili. Lui partiva da un problema molto concreto: far parlare la stessa lingua stilisti, disegnatori e frese. A differenza di de Casteljau, Bézier pubblicò. A partire dai primi anni Sessanta presentò il suo metodo in articoli e conferenze, e lo sviluppò fino a farne il cuore di UNISURF, il sistema CAD/CAM Renault per il disegno e l’attrezzaggio delle carrozzerie.

Per un progettista l’idea di Bézier era geniale perché era visiva. Non si impostavano coefficienti di equazioni: si spostavano i vertici di un poligono e la curva lo seguiva in modo prevedibile. Un’analisi pubblicata negli atti dell’ACSA, l’associazione delle scuole di architettura nordamericane, legge la curva di Bézier proprio così: un linguaggio di mediazione tra la mano di chi disegna e la macchina.

Solo dopo si capì che le due strade portavano allo stesso risultato. Le curve di Bézier e quelle di de Casteljau si scrivono con i polinomi di Bernstein, una base matematica che Sergej Bernstein aveva introdotto nel 1912 per tutt’altro scopo, cioè dimostrare un teorema di approssimazione. Rida Farouki, nella sua retrospettiva per il centenario di quella base, spiega perché proprio quei polinomi si prestano così bene al disegno. La curva resta sempre dentro l’involucro convesso dei punti di controllo, comincia e finisce sui punti estremi e parte tangente al primo lato del poligono. Tradotto nel linguaggio della foto: la linea sta dentro la gabbia delle maniglie, passa dagli ancoraggi e lascia ogni ancoraggio lungo la sua linea di direzione.

Il nome rimase a Bézier perché era stato il primo a pubblicare. È una delle tante ingiustizie della storia della tecnica, e la comunità scientifica l’ha in parte riparata chiamando con il nome di de Casteljau l’algoritmo che usiamo per calcolare queste curve.

Dalla carrozzeria alla tipografia: perché ogni lettera è fatta di Bézier

Il salto decisivo verso il mondo grafico arrivò con la stampa digitale. Quando si cercò un modo per descrivere le lettere indipendentemente dalla risoluzione, la soluzione era già pronta. PostScript descrive i contorni con curve di Bézier cubiche, cioè due ancoraggi e due maniglie per tratto, esattamente come nella foto. TrueType invece usa curve quadratiche, con un solo punto di controllo per tratto. La documentazione tecnica di FontForge lo spiega con chiarezza, e i manuali dei programmi di type design avvertono che passando dal cubico al quadratico il contorno viene approssimato, con differenze minime ma reali.

Chi disegna caratteri lo sa bene. Una o ben fatta di solito ha quattro ancoraggi sugli estremi, in alto, in basso, a destra e a sinistra, con maniglie perfettamente orizzontali o verticali. Quando ho iniziato ne mettevo il doppio, convinto di avere più controllo. Il risultato erano curve gibbose, con piccoli cambi di tensione che a schermo non si notavano ma in stampa, a corpo grande, saltavano all’occhio.

Oggi le stesse curve si trovano ovunque: nei loghi e nelle icone, nei tracciati SVG di una pagina web e nelle curve di animazione. La funzione CSS cubic-bezier(), presentata nei materiali del W3C sulle transizioni, è una Bézier cubica con i due ancoraggi bloccati agli estremi del tempo e dello stato. Le due maniglie decidono se il movimento parte piano, frena all’arrivo o rimbalza. Quando in un programma di motion trascinate le maniglie del grafico di velocità, state facendo la stessa operazione che Bézier faceva sul profilo di un parafango.

Come si disegna una curva vettoriale pulita: tre regole

Arrivo alla parte pratica, perché qui l’aggancio con il lavoro quotidiano viene da sé. Sono tre regole che ho imparato sbagliando, e tornano con la geometria che abbiamo visto.

Pochi punti, messi nei posti giusti. Ogni ancoraggio in più è un punto in cui la continuità può rompersi. Mettete gli ancoraggi sugli estremi della forma, dove la tangente è orizzontale o verticale, e nei flessi, dove la curva cambia verso. Nella foto la S ha due soli ancoraggi e basta così.
Maniglie a circa un terzo del tratto. È una regola empirica, non un dogma, ma ha una base. Quando una cubica disegna un segmento dritto con velocità uniforme, i punti di controllo cadono esattamente a un terzo e a due terzi. Partire da lì e poi aggiustare a occhio evita le due patologie classiche: maniglie cortissime, che fanno curve quasi spigolose, e maniglie lunghissime che si incrociano e producono cappi o tratti tesi e piatti.
Tangenti allineate nei punti smussati. Se un nodo deve essere morbido, le due maniglie devono stare sulla stessa retta, come nella foto. Basta un grado di scarto e l’occhio legge uno spigolo, soprattutto sui riflessi di una superficie lucida. Non a caso il problema è nato sulle carrozzerie, dove una discontinuità di tangenza si vede come una riga spezzata nella luce.

Un consiglio in più: guardate la gabbia, non solo la linea. Se il poligono delle maniglie è ordinato, anche la curva lo sarà, perché la proprietà dell’involucro convesso la tiene lì dentro.

Una parola su nomi e programmi

La confusione sui termini è normale e non è colpa vostra. Adobe parla di anchor point, direction line e direction point. Altri programmi usano nodo, handle, braccio di controllo. Un matematico direbbe semplicemente punti di controllo e tangente. Il concetto è uno solo: due punti per cui la curva passa e due punti che la orientano. Se ricordate la foto, con 1, 2 e 3 in rosso, vi orientate in qualsiasi software.

Evoluzioni: oltre la singola curva

Le curve di Bézier hanno un limite che chi fa progettazione industriale conosce bene. Se spostate un punto di controllo cambia l’intero tratto, e per forme complesse servono molti tratti cuciti insieme. Per questo dalla stessa famiglia sono nate le B-spline e le NURBS, che oggi dominano i software di modellazione per il design di prodotto e l’automotive. Le Bézier restano però la grammatica di base: ogni NURBS si può scomporre in tratti di Bézier, e l’algoritmo di de Casteljau è ancora il modo più robusto per calcolarle.

A me piace pensare a questo quando un cliente mi chiede di ammorbidire un logo. Sto usando, con il mouse, lo stesso ragionamento che sessant’anni fa due ingegneri francesi, senza sapere l’uno dell’altro, applicavano al cofano di un’auto.

Fonti

Tag:Interfacce digitali