Free Press

Krzywe beziera są wykorzystywane w grafice komputerowej do rysowania kształtów, do animacji CSS i w wielu innych miejscach.

Jest to bardzo prosta rzecz, warto ją raz przestudiować, a potem poczuć się pewnie w świecie grafiki wektorowej i zaawansowanych animacji.

Punkty kontrolne

Krzywa beziera jest definiowana przez punkty kontrolne.

Może ich być 2, 3, 4 lub więcej.

Na przykład krzywa z dwoma punktami:

Krzywa z trzema punktami:

Krzywa z czterema punktami:

Jeśli przyjrzymy się dokładnie tym krzywym, od razu zauważymy:

1. Punkty nie zawsze leżą na krzywej. To zupełnie normalne, później zobaczymy, jak zbudowana jest krzywa.

2. Kolejność krzywej równa się liczbie punktów minus jeden.Dla dwóch punktów mamy krzywą liniową (czyli linię prostą), dla trzech punktów – krzywą kwadratową (paraboliczną), dla czterech punktów – krzywą sześcienną.

3. Krzywa jest zawsze wewnątrz kadłuba wypukłego punktów kontrolnych:

   

Dzięki tej ostatniej własności w grafice komputerowej możliwa jest optymalizacja testów przecięć. Jeśli wypukłe kadłuby nie przecinają się, to krzywe też nie. Tak więc sprawdzenie najpierw przecięcia kadłubów wypukłych może dać bardzo szybki wynik „brak przecięcia”. Sprawdzanie przecięcia wypukłych kadłubów jest znacznie łatwiejsze, ponieważ są one prostokątami, trójkątami i tak dalej (patrz rysunek powyżej), znacznie prostszymi figurami niż krzywa.

Główna wartość krzywych Beziera do rysowania – przesuwając punkty krzywa zmienia się w intuicyjnie oczywisty sposób.

Próbuj przesunąć punkty kontrolne za pomocą myszy w poniższym przykładzie:

Jak można zauważyć, krzywa rozciąga się wzdłuż linii stycznych 1 → 2 i 3 → 4.

Po pewnym czasie praktyki staje się oczywiste, jak rozmieścić punkty, aby uzyskać potrzebną krzywą. A łącząc kilka krzywych możemy otrzymać praktycznie wszystko.

Oto kilka przykładów:

Algorytm De Casteljau

Istnieje wzór matematyczny na krzywe Beziera, ale zajmiemy się nim nieco później, ponieważ algorytm De Casteljau jest identyczny z definicją matematyczną i pokazuje wizualnie, jak jest skonstruowany.

Najpierw zobaczmy przykład z 3 punktami.

Tutaj jest demo, a wyjaśnienie następuje.

Punkty kontrolne (1,2 i 3) mogą być przesuwane za pomocą myszy. Naciśnij przycisk „play”, aby uruchomić demo.

Algorytm de Casteljau budowy 3-punktowej krzywej beziera:

1. Narysuj punkty kontrolne. W powyższym demo są one oznaczone jako: 1, 2, 3.

2. Buduj odcinki pomiędzy punktami kontrolnymi 1 → 2 → 3. W powyższym demie są one brązowe.

3. Parametr t przesuwa się z 0 do 1. W powyższym przykładzie używany jest krok 0.05: pętla przechodzi przez 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Dla każdej z tych wartości t:

   • Na każdym brązowym odcinku bierzemy punkt położony na odległości proporcjonalnej do t od jego początku. Ponieważ są dwa odcinki, mamy dwa punkty.

     Na przykład dla t=0 – oba punkty będą na początku odcinków, a dla t=0.25 – na 25% długości odcinka od początku, dla t=0.5 – 50%(środek), dla t=1 – na końcu odcinków.

   • Połącz punkty. Na poniższym rysunku odcinek łączący jest zamalowany na niebiesko.

.

Dla t=0.25	Dla t=0.5

1. Teraz na niebieskim odcinku przyjmij punkt na odległość proporcjonalną do tej samej wartości t. To znaczy, dla t=0.25 (lewy obrazek) mamy punkt na końcu lewej ćwiartki odcinka, a dla t=0.5 (prawy obrazek) – w środku odcinka. Na obrazkach powyżej ten punkt jest czerwony.

2. Jako że t biegnie od 0 do 1, to każda wartość t dodaje do krzywej punkt. Zbiór takich punktów tworzy krzywą Beziera. Jest ona czerwona i paraboliczna na obrazkach powyżej.

To był proces dla 3 punktów. Ale to samo jest dla 4 punktów.

Demonstracja dla 4 punktów (punkty można przesuwać myszką):

Algorytm dla 4 punktów:

• Połącz punkty kontrolne odcinkami: 1 → 2, 2 → 3, 3 → 4. Powstaną 3 brązowe odcinki.
• Dla każdego t w przedziale od 0 do 1:
  • Bierzemy punkty na tych odcinkach na odległość proporcjonalną do t od początku. Punkty te łączymy, tak że mamy dwa zielone odcinki.
  • Na tych odcinkach bierzemy punkty proporcjonalne do t. Otrzymujemy jeden niebieski odcinek.
  • Na niebieskim odcinku bierzemy punkt proporcjonalny do t. Na powyższym przykładzie jest on czerwony.
• Punkty te razem tworzą krzywą.

Algorytm jest rekurencyjny i można go uogólnić dla dowolnej liczby punktów kontrolnych.

Given N punktów kontrolnych:

1. Łączymy je, aby otrzymać początkowo N-1 segmentów.
2. Następnie dla każdego t od 0 do 1, bierzemy punkt na każdym segmencie na odległość proporcjonalną do t i łączymy je. Powstanie N-2 segmentów.
3. Powtarzaj krok 2, aż będzie tylko jeden punkt.

Te punkty tworzą krzywą.

Przeprowadź i wstrzymaj przykłady, aby wyraźnie zobaczyć segmenty i sposób budowy krzywej.

Krzywa, która wygląda jak y=1/t:

Punkty kontrolne zygzakowate również działają dobrze:

Zrobienie pętli jest możliwe:

Niegładka krzywa Beziera (tak, to też jest możliwe):

Jeśli coś jest niejasne w opisie algorytmu, proszę spojrzeć na przykłady na żywo powyżej, aby zobaczyć, jak zbudowana jest krzywa.

Jako że algorytm jest rekurencyjny, możemy budować krzywe Beziera dowolnej kolejności, to znaczy: używając 5, 6 lub więcej punktów kontrolnych. Jednak w praktyce wiele punktów jest mniej użytecznych. Zazwyczaj bierzemy 2-3 punkty, a dla skomplikowanych linii sklejamy kilka krzywych razem. Jest to prostsze do opracowania i obliczenia.

Matematyka

Krzywą Beziera można opisać za pomocą wzoru matematycznego.

Jak widzieliśmy – właściwie nie ma potrzeby jej znać, większość ludzi po prostu rysuje krzywą, przesuwając punkty za pomocą myszy. Ale jeśli lubisz matematykę – oto ona.

Dając współrzędne punktów kontrolnych Pi: pierwszy punkt kontrolny ma współrzędne P1 = (x1, y1), drugi: P2 = (x2, y2), i tak dalej, współrzędne krzywej opisuje równanie zależne od parametru t z odcinka .

• Wzór na krzywą 2-punktową:

  P = (1-t)P1 + tP2

• Dla 3 punktów kontrolnych:

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

• Dla 4 punktów kontrolnych:

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

To są równania wektorowe. Innymi słowy, możemy wstawić x i y zamiast P, aby uzyskać odpowiednie współrzędne.

Na przykład krzywą 3-punktową tworzą punkty (x,y) obliczone jako:

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

W miejsce x1, y1, x2, y2, x3, y3 powinniśmy wstawić współrzędne 3 punktów kontrolnych, a wtedy w miarę jak t przesuwa się od 0 do 1, dla każdej wartości t będziemy mieli (x,y) krzywej.

Na przykład, jeśli punktami kontrolnymi są (0,0), (0.5, 1) i (1, 0), równania stają się:

• 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

Teraz, gdy t przebiega od 0 do 1, zbiór wartości (x,y) dla każdego t tworzy krzywą dla takich punktów kontrolnych.

Podsumowanie

Krzywe Beziera są definiowane przez ich punkty kontrolne.

Widzieliśmy dwie definicje krzywych Beziera:

1. Użycie procesu rysowania: Algorytm De Casteljau.
2. Użycie wzoru matematycznego.

Dobre własności krzywych Beziera:

• Możemy rysować gładkie linie za pomocą myszy, przesuwając punkty kontrolne.
• Kompleksowe kształty można tworzyć z kilku krzywych Beziera.

Użycie:

• W grafice komputerowej, modelowaniu, edytorach grafiki wektorowej. Czcionki opisywane są krzywymi Beziera.
• W tworzeniu stron internetowych – dla grafiki na Canvas i w formacie SVG. Przy okazji, „żywe” przykłady powyżej są zapisane w SVG. Są one w rzeczywistości pojedynczym dokumentem SVG, któremu jako parametry podano różne punkty. Możesz otworzyć go w osobnym oknie i zobaczyć źródło: demo.svg.
• W animacji CSS, aby opisać ścieżkę i prędkość animacji.

.