Free Press

Curbele Bezier sunt folosite în grafica pe calculator pentru a desena forme, pentru animația CSS și în multe alte locuri.

Este un lucru foarte simplu, merită studiat o dată și apoi să te simți confortabil în lumea graficii vectoriale și a animațiilor avansate.

Puncte de control

O curbă Bezier este definită de puncte de control.

Pot fi 2, 3, 4 sau mai multe.

De exemplu, curba cu două puncte:

Curba cu trei puncte:

Curba cu patru puncte:

Dacă vă uitați cu atenție la aceste curbe, puteți observa imediat:

1. Punctele nu sunt întotdeauna pe curbă. Acest lucru este perfect normal, mai târziu vom vedea cum se construiește curba.

2. Ordinea curbei este egală cu numărul de puncte minus unu. pentru două puncte avem o curbă liniară (adică o linie dreaptă), pentru trei puncte – curbă pătratică (parabolică), pentru patru puncte – curbă cubică.

3. O curbă se află întotdeauna în interiorul corpului convex al punctelor de control:

   

Datorită acestei ultime proprietăți, în grafica pe calculator este posibilă optimizarea testelor de intersecție. Dacă coca convexă nu se intersectează, atunci nici curbele nu se intersectează. Așadar, verificarea mai întâi a intersecției dintre cochilii convexe poate da un rezultat foarte rapid de „nicio intersecție”. Verificarea intersecției carenelor convexe este mult mai ușoară, deoarece acestea sunt dreptunghiuri, triunghiuri și așa mai departe (vezi imaginea de mai sus), figuri mult mai simple decât curba.

Principala valoare a curbelor Bezier pentru desen – prin mutarea punctelor curba se modifică într-un mod intuitiv evident.

Încercați să mutați punctele de control cu ajutorul mouse-ului în exemplul de mai jos:

După cum puteți observa, curba se întinde de-a lungul liniilor tangențiale 1 → 2 și 3 → 4.

După ceva practică devine evident cum să plasați punctele pentru a obține curba necesară. Și prin conectarea mai multor curbe putem obține practic orice.

Iată câteva exemple:

Algoritmul lui De Casteljau

Există o formulă matematică pentru curbele Bezier, dar să o abordăm puțin mai târziu, pentru că algoritmul luiDe Casteljau este identic cu definiția matematică și arată vizual cum se construiește.

Prima dată să vedem exemplul cu 3 puncte.

Iată demonstrația, iar explicația urmează.

Punctele de control (1,2 și 3) pot fi deplasate cu ajutorul mouse-ului. Apăsați butonul „play” pentru a-l rula.

Algoritmul lui De Casteljau de construire a curbei bezier în 3 puncte:

1. Desenați punctele de control. În demonstrația de mai sus, acestea sunt etichetate: 1, 2, 3.

2. Construiți segmente între punctele de control 1 → 2 → 3. În demonstrația de mai sus, acestea sunt maro.

3. Parametrul tse mută de la 0 la 1. În exemplul de mai sus se folosește pasul 0.05: bucla trece peste 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Pentru fiecare dintre aceste valori ale lui t:

   • Pe fiecare segment maro se ia un punct situat pe distanța proporțională cu t de la începutul lui. Cum sunt două segmente, avem două puncte.

     De exemplu, pentru t=0 – ambele puncte se vor afla la începutul segmentelor, iar pentru t=0.25 – pe 25% din lungimea segmentului de la început, pentru t=0.5 – 50%(la mijloc), pentru t=1 – la sfârșitul segmentelor.

   • Conectați punctele. Pe imaginea de mai jos segmentul de legătură este vopsit în albastru.

.

Pentru t=0.25	Pentru t=0.5

1. Acum în segmentul albastru se ia un punct pe distanța proporțională cu aceeași valoare a lui t. Adică, pentru t=0.25 (imaginea din stânga) avem un punct la capătul sfertului stâng al segmentului, iar pentru t=0.5 (imaginea din dreapta) – în mijlocul segmentului. Pe imaginile de mai sus, acel punct este roșu.

2. Pentru că t se întinde de la 0 la 1, fiecare valoare a lui t adaugă un punct la curbă. Ansamblul acestor puncte formează curba Bezier. Ea este roșie și parabolică pe imaginile de mai sus.

Acesta a fost un proces pentru 3 puncte. Dar același lucru este și pentru 4 puncte.

Demonstrația pentru 4 puncte (punctele pot fi deplasate cu ajutorul mouse-ului):

Algoritmul pentru 4 puncte:

• Conectați punctele de control prin segmente: 1 → 2, 2 → 3, 3 → 4. Vor fi 3 segmente maro.
• Pentru fiecare t din intervalul de la 0 la 1:
  • Se iau puncte pe aceste segmente pe distanța proporțională cu t de la început. Aceste puncte sunt legate între ele, astfel încât avem două segmente verzi.
  • Pe aceste segmente luăm puncte proporționale cu t. Obținem un segment albastru.
  • Pe segmentul albastru luăm un punct proporțional cu t. Pe exemplul de mai sus acesta este roșu.
• Aceste puncte formează împreună curba.

Argitmul este recursiv și poate fi generalizat pentru orice număr de puncte de control.

Date N puncte de control:

1. Le conectăm pentru a obține inițial N-1 segmente.
2. Apoi, pentru fiecare t de la 0 la 1, luăm un punct de pe fiecare segment pe distanța proporțională cu t și le conectăm. Vor fi N-2 segmente.
3. Repetați pasul 2 până când există un singur punct.

Aceste puncte formează curba.

Exemplele se execută și se opresc pentru a vedea clar segmentele și modul în care este construită curba.

O curbă care arată ca y=1/t:

Punctele de control în zig-zag funcționează, de asemenea, bine:

Facerea unei bucle este posibilă:

O curbă Bezier neuniformă (da, și asta este posibil):

Dacă există ceva neclar în descrierea algoritmului, vă rugăm să vă uitați la exemplele live de mai sus pentru a vedea cum se construiește curba.

Cum algoritmul este recursiv, putem construi curbe Bezier de orice ordine, adică: folosind 5, 6 sau mai multe puncte de control. Dar, în practică, multe puncte sunt mai puțin utile. De obicei, luăm 2-3 puncte, iar pentru linii complexe lipim mai multe curbe împreună. Aceasta este mai simplu de dezvoltat și de calculat.

Matematică

O curbă Bezier poate fi descrisă folosind o formulă matematică.

Cum am văzut – de fapt nu este nevoie să o cunoaștem, majoritatea oamenilor doar desenează curba prin mutarea punctelor cu un mouse. Dar dacă sunteți pasionați de matematică – iat-o.

Date coordonatele punctelor de control Pi: primul punct de control are coordonatele P1 = (x1, y1), al doilea: P2 = (x2, y2), și așa mai departe, coordonatele curbei sunt descrise de ecuația care depinde de parametrul t din segmentul .

• Formula pentru o curbă cu 2 puncte:

  P = (1-t)P1 + tP2

• Pentru 3 puncte de control:

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

• Pentru 4 puncte de control:

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

Acestea sunt ecuații vectoriale. Cu alte cuvinte, putem pune x și y în loc de P pentru a obține coordonatele corespunzătoare.

De exemplu, curba în 3 puncte este formată din punctele (x,y) calculate astfel:

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

În loc de x1, y1, x2, y2, x3, y3 ar trebui să punem coordonatele a 3 puncte de control, iar apoi, pe măsură ce t se deplasează de la 0 la 1, pentru fiecare valoare a lui t vom avea (x,y) din curbă.

De exemplu, dacă punctele de control sunt (0,0), (0.5, 1) și (1, 0), ecuațiile devin:

• 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

Acum, pe măsură ce t se deplasează de la 0 la 1, setul de valori (x,y) pentru fiecare t formează curba pentru astfel de puncte de control.

Rezumat

Curbele Bezier sunt definite de punctele lor de control.

Am văzut două definiții ale curbelor Bezier:

1. Utilizarea unui procedeu de desen: Algoritmul lui De Casteljau.
2. Utilizarea unei formule matematice.

Proprietăți bune ale curbelor Bezier:

• Putem desena linii netede cu ajutorul mouse-ului prin deplasarea punctelor de control.
• Formele complexe pot fi realizate din mai multe curbe Bezier.

Utilizare:

• În grafica pe calculator, modelare, editori de grafică vectorială. Fonturile sunt descrise prin curbe Bezier.
• În dezvoltarea web – pentru grafică pe Canvas și în format SVG. Apropo, exemplele „live” de mai sus sunt scrise în SVG. Ele sunt, de fapt, un singur document SVG căruia i se dau diferite puncte ca parametri. Îl puteți deschide într-o fereastră separată și puteți vedea sursa: demo.svg.
• În animația CSS pentru a descrie calea și viteza animației.

.