Curve di Bezier

Le curve di Bezier sono utilizzate in computer grafica per disegnare forme, per animazioni CSS ed in molti altri posti.

Sono veramente molto semplici, vale la pena studiarle per poi trovarsi a proprio agio nel mondo della grafica vettoriale e con animazioni avanzate.

Punti di controllo

Una curva di Bezier è composta da punti di controllo.

Possono essercene 2, 3, 4 o più.

Ad esempio, una curva a due punti:

Una curva a tre punti:

Una curva a quattro punti:

Guardando da vicino queste curve, possiamo subito notare:

1. I punti non sono sempre nella curva. Questo è perfettamente normale, più avanti vedremo come viene costruita la curva.

2. Il grado della curva equivale al numero di punti meno uno. Con due punti avremo una curva lineare (una retta), con tre punti, avremo una curva di grado due (una parabola), con quattro punti, avremo una curva di grado tre.

3. Una curva è sempre definita internamente all’inviluppo convesso dei punti di controllo:

   

Proprio grazie a quest’ultima proprietà, in computer grafica è possibile ottimizzare i test di intersezione. Se due inviluppi convessi non si intersecano, allora neanche le curve lo fanno. Quindi le verifiche sugli inviluppi convessi possono dare degli esiti più rapidi nella verifica della “non intersezione”. La verifica di intersezione tra inviluppi convessi è molto più semplice, poiché questi sono rettangoli, triangoli e cosi via (vedi la figura sopra), le quali sono figure molto più semplici rispetto alle curve.

In grafica, ll principale vantaggio delle curve di Bezier è che muovendo i punti, le curve cambiano in maniera piuttosto intuitiva.

Provate a giocare con i punti di controllo in questo esempio:

Come puoi notare, la curva si estende lungo le linee tangenziali 1 → 2 e 3 → 4.

Dopo aver fatto un po’ di pratica diventa ovvio come posizionare i punti per ottenere la curva desiderata. E connettendo diverse curve possiamo ottenere praticamente qualsiasi cosa.

Qui vediamo alcuni esempi:

L’algoritmo di De Casteljau’s

Esiste una formula matematica per la definizione delle curve di Bezier, ma la vederemo tra un po’, perché l’algoritmo di De Casteljau’s è identico e dimostra a livello visivo come vengono definite.

Come prima cosa, vediamo l’esempio con 3 punti.

Qui vediamo la dimostrazione, seguita dalla spiegazione.

I punti di controllo (1,2 e 3) possono essere mossi utilizzando il mouse. Premete il pulsante “Play” per avviare l’esempio.

L’algoritmo di De Casteljau’s per la costruzione di una curva di Bezier a 3 punti:

1. Traccia i punti di controllo. Nella dimostrazione vista sopra, questi sono etichettati come: 1, 2, 3.

2. Traccia le semirette che congiungono i punti di controllo 1 → 2 → 3. Nella dimostrazione vista sopra questi sono di colore marrone.

3. Il parametro t passa da 0 a 1. Nell’esempio sopra questo cresce con passi di 0.05: il ciclo esegue 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Per ognuno dei valori assunti da t:

   • Per ogni segmento marrone prendiamo un punto localizzato in maniera proporzionale fra t ed il suo inizio. Poiché ci sono due segmenti, avremo due punti.

     Ad esempio, per t=0, entrambi i punti si troverano all’inizio del segmento, per t=0.25, si troveranno al 25% della lunghezza del segmento, per 50% (al centro), per t=1, alla fine del segmento.

   • Collega i punti. Nella figura sotto, i segmenti collegati sono colorati di blu.

For t=0.25	For t=0.5

4. Ora nel segmento blu, prende un punto alla stessa distanza proporzionale t. Quindi, per t=0.25 (immagine a sinistra) avremo un punto alla fine del quarto sinistro del segmento, per t=0.5 (la figura di destra), lo avremo a metà del segmento. Nelle figure sopra, questo punto è rosso.

5. Poiché t viene valutato da 0 fino a 1, ogni valore che assume, aggiunge un punto alla curva. L’insieme di questi punti definisce la curva di Bezier. Nella figura è la parabola rossa.

Quello appena descritto, è il processo che si applica per 3 punti. Ma il procedimento è uguale anche con 4 punti.

Qui vediamo la dimostrazione con 4 punti (i punti possono essere mossi utilizzando il mouse):

L’algoritmo applicato per 4 punti:

• Connette i punti di controllo con i segmenti: 1 → 2, 2 → 3, 3 → 4. Ci saranno 3 segmenti marrone.
• Per ogni valore di t nell’intervallo da 0 a 1:
  • Tracciamo i punti nel segmento ad una distanza t partendo dall’inizio. Questi punti vengono connessi, in questo modo avremo due segmenti verdi.
  • Su questi segmenti, tracciamo i punti in base al valore di t. Avremo cosi un segmento blu.
  • Nel segmento blu, tracciamo un punto in base al valore di t. Nell’esempio sopra è rosso.
• L’insieme di questi punti forma la curva.

L’algoritmo è ricorsivo, e può essere quindi generalizzato per un qualsiasi numero di punti di controllo.

Dato un numero N di punti di controllo:

1. Li colleghiamo per ottenere i primi N-1 segmenti.
2. Successivamente, per ogni valore di t nell’intervallo 0-1, tracciamo un punto su ogni segmento ad una distanza t e li colleghiamo. Avremo cosi N-2 segmenti.
3. Ripetiamo il passaggio 2, fino a rimanere con un solo punto.

I punti ottenuti definiscono la curva.

Esegui e metti in pausa gli esempi per vedere con più chiarezza i segmenti e come vengono costruite le curve.

La curva equivalente alla formula y=1/t:

Anche i punti di controllo a zig-zag funzionano:

E’ anche possibile definire un cappio:

Una curva di Bezier acuta (certo, è possibile fare anche questo):

Se c’è ancora qualcosa di poco chiaro riguardo l’algoritmo descritto, riguardate gli esempi interattivi visti sopra, per capire come viene costruita la curva.

Poiché l’algoritmo è ricorsivo, possiamo definire curve di Bezier di qualsiasi grado, ad esempio utilizzando 5,6 o più punti di controllo. Ma nella pratica l’utilizzo di molti punti è poco utile. Solitamente 2-3 punti sono più che sufficienti, è sempre possibile unire diverse curve per ottenerne di più complesse. In questo modo lo sviluppo ed i calcoli non si complicheranno troppo.

Matematica

Una curva di Bezier può essere descritta utilizzando una formula matematica.

Come abbiamo visto, non c’è alcun bisogno di conoscerla, la maggior parte degli sviluppatori tracciano le curve selezionando i punti di controllo con il mouse. Ma se vi interessa il lato matematico, eccovi accontentati.

Date le coordinate dei punti di controllo Pi: il primo punto di controllo ha coordinate P1 = (x1, y1), il secondo: P2 = (x2, y2), e cosi via, le coordinate della curva sono descritte dall’equazione dipendente da t nell’intervallo [0,1].

• La formula per una curva a 2 punti:

  P = (1-t)P1 + tP2

• Per 3 punti di controllo:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• Per 4 punti di controllo:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Queste sono equazioni vettoriali. In altre parole, possiamo utilizzare i valori x ed y piuttosto di P per ottenere le coordinate corrispondenti.

Ad esempio, la curva a 3 punti è formata dai punti (x,y) calcolati come:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Piuttosto di x1, y1, x2, y2, x3, y3 dovremo inserire le coordinate di 3 punti di controllo, e successivamente, mentre t si sposta nell’intervallo 0-1, per ogni valore di t avremo il corrispondente (x,y) della curva.

Ad esempio, se i punti di controllo sono (0,0), (0.5, 1) e (1, 0), le corrispondenti equazioni saranno:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Ora, mentre t cresce da 0 a 1, l’insieme dei valori (x,y) per ogni t definirà la curva per quel punto di controllo.

Riepilogo

Le curve di Bezier sono definite da punti di controllo.

Abbiamo visto due definizioni delle curve di Bezier:

1. Utilizzando un algoritmo: l’algoritmo di De Casteljau’s.
2. Utilizzando una formula matematica.

Le curve di Bezier hanno delle ottime proprietà, tra cui:

• Possiamo definire delle curve “morbide” con il semplice utilizzo del mouse, spostando i punti di controllo.
• Forme complesse possono essere ottenute mettendo insieme più curve di Bezier.

Utilizzo:

• In computer grafica, modellazione, ed editor di grafica vettoriale. I font sono descritti tramite curve di Bezier.
• Nello sviluppo web, per la grafica su Canvas e nel formato SVG. Comunque, gli esempi interattivi visti sopra sono scritti in SVG. In realtà sono un unico documento SVG che accetta diversi punti come parametri. Potete aprirli una finestra separata e vederne il codice sorgente: demo.svg.
• Nelle animazioni CSS per descrivere il percorso e la velocità dell’animazione.