Free Press

Le curve di Bezier sono usate nella computer grafica per disegnare forme, per l’animazione CSS e in molti altri posti.

Sono una cosa molto semplice, vale la pena studiare una volta e poi sentirsi a proprio agio nel mondo della grafica vettoriale e delle animazioni avanzate.

Punti di controllo

Una curva di Bezier è definita da punti di controllo.

Ci possono essere 2, 3, 4 o più.

Per esempio, due punti curva:

Tre punti curva:

Quattro punti curva:

Se guardate attentamente queste curve, potete subito notare:

1. I punti non sono sempre in curva. Questo è perfettamente normale, più tardi vedremo come è costruita la curva.

2. L’ordine della curva è uguale al numero di punti meno uno.Per due punti abbiamo una curva lineare (che è una linea retta), per tre punti – curva quadratica (parabolica), per quattro punti – curva cubica.

3. Una curva è sempre all’interno dello scafo convesso dei punti di controllo:

   

A causa di quest’ultima proprietà, nella computer grafica è possibile ottimizzare i test di intersezione. Se le carene convesse non si intersecano, neanche le curve lo fanno. Quindi controllare prima l’intersezione delle carene convesse può dare un risultato “nessuna intersezione” molto veloce. Controllare l’intersezione delle carene convesse è molto più facile, perché sono rettangoli, triangoli e così via (vedi l’immagine sopra), figure molto più semplici della curva.

Il valore principale delle curve di Bezier per il disegno – spostando i punti la curva cambia in modo intuitivamente ovvio.

Prova a spostare i punti di controllo usando il mouse nell’esempio qui sotto:

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

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

Ecco alcuni esempi:

Algoritmo di De Casteljau

C’è una formula matematica per le curve di Bezier, ma ne parliamo un po’ più tardi, perché l’algoritmo di De Casteljau è identico alla definizione matematica e mostra visivamente come è costruito.

Prima vediamo l’esempio dei 3 punti.

Ecco la demo, segue la spiegazione.

I punti di controllo (1,2 e 3) possono essere spostati con il mouse. Premere il pulsante “play” per eseguirlo.

L’algoritmo di De Casteljau per costruire la curva di bezier a 3 punti:

1. Disegna i punti di controllo. Nella demo qui sopra sono etichettati: 1, 2, 3.

2. Costruisci i segmenti tra i punti di controllo 1 → 2 → 3. Nel demo sopra sono marroni.

3. Il parametro t si sposta da 0 a 1. Nell’esempio qui sopra si usa il passo 0.05: il ciclo va oltre 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Per ognuno di questi valori di t:

   • Su ogni segmento marrone prendiamo un punto situato sulla distanza proporzionale a t dal suo inizio. Poiché ci sono due segmenti, abbiamo due punti.

     Per esempio, per t=0 – entrambi i punti saranno all’inizio dei segmenti, e per t=0.25 – sul 25% della lunghezza del segmento dall’inizio, per t=0.5 – 50% (la metà), per t=1 – alla fine dei segmenti.

   • Colleghiamo i punti. Nell’immagine qui sotto il segmento di collegamento è dipinto di blu.

Per t=0.25	Per t=0.5

1. Ora nel segmento blu prendere un punto sulla distanza proporzionale allo stesso valore di t. Cioè, per t=0.25 (la foto a sinistra) abbiamo un punto alla fine del quarto sinistro del segmento, e per t=0.5 (la foto a destra) – nel mezzo del segmento. Nelle immagini sopra quel punto è rosso.

2. Come t va da 0 a 1, ogni valore di t aggiunge un punto alla curva. L’insieme di tali punti forma la curva di Bezier. È rossa e parabolica nelle immagini sopra.

Questo era un processo per 3 punti. Ma lo stesso è per 4 punti.

La demo per 4 punti (i punti possono essere spostati con il mouse):

L’algoritmo per 4 punti:

• Collega i punti di controllo per segmenti: 1 → 2, 2 → 3, 3 → 4. Ci saranno 3 segmenti marroni.
• Per ogni t nell’intervallo da 0 a 1:
  • Prendiamo punti su questi segmenti alla distanza proporzionale a t dall’inizio. Questi punti sono collegati, in modo che abbiamo due segmenti verdi.
  • Su questi segmenti prendiamo punti proporzionali a t. Otteniamo un segmento blu.
  • Sul segmento blu prendiamo un punto proporzionale a t. Nell’esempio precedente è rosso.
• Questi punti insieme formano la curva.

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

Dati N punti di controllo:

1. Li colleghiamo per ottenere inizialmente N-1 segmenti.
2. Poi per ogni t da 0 a 1, prendiamo un punto su ogni segmento sulla distanza proporzionale a t e li colleghiamo. Ci saranno N-2 segmenti.
3. Ripetere il passo 2 fino a quando c’è un solo punto.

Questi punti fanno la curva.

Eseguire e mettere in pausa gli esempi per vedere chiaramente i segmenti e come la curva è costruita.

Una curva che assomiglia a y=1/t:

Anche i punti di controllo a zig-zag funzionano bene:

È possibile fare un loop:

Una curva di Bezier non liscia (sì, anche questo è possibile):

Se c’è qualcosa di poco chiaro nella descrizione dell’algoritmo, guarda gli esempi dal vivo qui sopra per vedere come viene costruita la curva.

Come l’algoritmo è ricorsivo, possiamo costruire curve di Bezier di qualsiasi ordine, cioè: usando 5, 6 o più punti di controllo. Ma in pratica molti punti sono meno utili. Di solito prendiamo 2-3 punti, e per linee complesse incolliamo più curve insieme. Questo è più semplice da sviluppare e calcolare.

Matematica

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

Come abbiamo visto – in realtà non c’è bisogno di conoscerla, la maggior parte delle persone semplicemente disegna la curva spostando dei punti con il mouse. Ma se ti piace la matematica – eccola qui.

Date le coordinate dei punti di controllo Pi: il primo punto di controllo ha coordinate P1 = (x1, y1), il secondo: P2 = (x2, y2), e così via, le coordinate della curva sono descritte dall’equazione che dipende dal parametro t dal segmento .

• 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

Sono equazioni vettoriali. In altre parole, possiamo mettere x e y al posto di P per ottenere le coordinate corrispondenti.

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

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

Al posto di x1, y1, x2, y2, x3, y3 dovremmo mettere le coordinate di 3 punti di controllo, e poi come t si sposta da 0 a 1, per ogni valore di t avremo (x,y) della curva.

Per esempio, se i punti di controllo sono (0,0), (0.5, 1) e (1, 0), le equazioni diventano:

• 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 come t va da 0 a 1, l’insieme dei valori (x,y) per ogni t forma la curva per tali punti di controllo.

Sommario

Le curve di Bezier sono definite dai loro punti di controllo.

Abbiamo visto due definizioni di curve di Bezier:

1. Usando un processo di disegno: L’algoritmo di De Casteljau.
2. Utilizzando una formula matematica.

Buone proprietà delle curve di Bezier:

• Possiamo disegnare linee morbide con un mouse spostando i punti di controllo.
• Le forme complesse possono essere fatte con diverse curve di Bezier.

Uso:

• In computer grafica, modellazione, editor di grafica vettoriale. I caratteri sono descritti da curve di Bezier.
• Nello sviluppo web – per la grafica su Canvas e nel formato SVG. A proposito, gli esempi “live” di cui sopra sono scritti in SVG. Sono in realtà un unico documento SVG a cui vengono dati diversi punti come parametri. Puoi aprirlo in una finestra separata e vedere la fonte: demo.svg.
• Nell’animazione CSS per descrivere il percorso e la velocità dell’animazione.