Lekcja 4. path, część 2: krzywe

C, S, Q, T — punkty, które przyciągają linię, choć same na niej nie leżą

Pióro z poprzedniej lekcji umie już chodzić po prostych. Teraz nauczy się skręcać — i to jest moment, w którym pathprzestaje mieć konkurencję.

Wszystkie krzywe w SVG to krzywe Béziera. Pomysł jest jeden i wystarczy zrozumieć go raz: oprócz punktu docelowego podajesz punkty kontrolne, które działają jak magnesy. Przyciągają linię w swoją stronę, ale linia nigdy przez nie nie przechodzi.

To jest ta jedna rzecz, która na początku wydaje się dziwna. Punkt kontrolny nie leży na krzywej. Leży obok i ciągnie.

C — krzywa sześcienna

C 40 10, 160 10, 180 100

Trzy pary liczb: pierwszy punkt kontrolny, drugi punkt kontrolny, punkt docelowy. Pierwszy magnes odpowiada za to, jak krzywa startuje, drugi za to, jak dobija do celu.

Wyobraź to sobie jak wyjazd z parkingu. Kierunek, w którym ustawisz koła na starcie, ustala początek toru. Kierunek, z którego wjeżdżasz na miejsce docelowe, ustala jego koniec. Środek trasy wynika z obu naraz.

Przeciągnij suwaki i patrz na przerywane linie. Każda z nich pokazuje, w którą stronę magnes ciągnie swój koniec krzywej. Odsuń punkt kontrolny daleko — krzywa wybrzusza się w jego stronę, ale go nie dotyka.

Odległość magnesu od jego końca to siła przyciągania. Blisko — krzywa ledwo się wygina. Daleko — wystrzeliwuje w tamtą stronę i dopiero potem zawraca.

Q — krzywa kwadratowa

Q 110 15, 200 100

Dwie pary liczb: jeden punkt kontrolny na całą krzywą i punkt docelowy. Ten sam magnes obsługuje jednocześnie start i dobicie do celu.

Ten sam odcinek co przed chwilą, ale sterowany jednym punktem. Zauważ, że krzywa jest zawsze symetryczna względem magnesu — nie da się nią zrobić kształtu, który wygina się raz w jedną, raz w drugą stronę.

I to jest cała różnica praktyczna. Q jest prostsza i krótsza, ale nie potrafi zmienić kierunku wygięcia w obrębie jednego segmentu. C potrafi, bo ma dwa niezależne magnesy — dlatego to ona jest domyślnym wyborem narzędzi graficznych i to ją zobaczysz w 95% cudzych plików. Q bywa za to wygodna przy ręcznym pisaniu prostych łuków: mniej liczb, mniej okazji do pomyłki.

S i T — łączenie bez załamania

Krzywe rzadko występują pojedynczo. Zwykle jest ich kilka pod rząd i wtedy pojawia się problem: w miejscu styku dwóch krzywych bardzo łatwo o ostry kant.

Żeby przejście było gładkie, punkt kontrolny kończący pierwszą krzywą i punkt zaczynający drugą muszą leżeć na jednej prostej, po przeciwnych stronach punktu styku. Można to policzyć ręcznie za każdym razem. Można też użyć S.

C 50 10, 80 10, 110 60
S 170 100, 200 60

S przyjmuje tylko dwie pary liczb — swój drugi punkt kontrolny i cel. Pierwszego nie podajesz, bo SVG wylicza go sam, odbijając ostatni punkt kontrolny poprzedniej krzywej względem punktu styku. Gładkie przejście dostajesz za darmo i nie da się go zepsuć.

Suwak rusza wyłącznie pierwszym garbem — w kodzie zmieniają się tylko liczby w komendzie C. Mimo to drugi garb dopasowuje się sam, bo jego niewidoczny punkt startowy jest odbiciem tego, który właśnie przesuwasz. Fala pozostaje gładka przy każdym ustawieniu.

T robi dokładnie to samo dla krzywych kwadratowych: przyjmuje sam punkt docelowy, a jedyny magnes odbija z poprzedniego segmentu. Ciąg Q ... T ... T ... daje falę, w której podajesz tylko kolejne punkty przejścia.

Jedna pułapka: S i T odbijają punkt tylko wtedy, gdy poprzednia komenda też była krzywą tego samego typu. Po Lalbo po Z nie ma czego odbijać — wtedy zachowują się tak, jakby magnes leżał dokładnie w punkcie startu, i przejście wychodzi ostre. Jeśli gładkość nagle znika, sprawdź, co jest w ścieżce linijkę wyżej.

Czego krzywe Béziera nie potrafią

Warto to wiedzieć, zanim ktoś Cię zaskoczy: krzywą Béziera nie da się narysować idealnego okręgu. Można się do niego zbliżyć na tyle, że różnicy nie widać gołym okiem — i tak właśnie robią wszystkie programy graficzne, składając koło z czterech krzywych C. Ale to jest przybliżenie, nie okrąg.

Dlatego istnieje <circle>, o którym była lekcja druga. I dlatego istnieje komenda A — łuk wycinka elipsy, matematycznie dokładny. To temat następnej lekcji, ostatniej o path.

Podsumowanie

• Punkty kontrolne przyciągają krzywą, ale nigdy na niej nie leżą.
• C ma dwa magnesy: jeden ustala start, drugi dobicie do celu. Potrafi zmienić kierunek wygięcia.
• Q ma jeden magnes na całą krzywą. Prostsza, ale zawsze symetryczna.
• Odległość magnesu to siła przyciągania.
• S i T dokładają gładkie przejście, odbijając poprzedni punkt kontrolny — pod warunkiem, że poprzednia komenda była krzywą tego samego typu.
• Okrąg z krzywej Béziera to zawsze przybliżenie.

Do wypróbowania: w presecie path · S zamień S na C i dopisz brakującą trzecią parę liczb, na przykład C 130 20, 170 100, 200 60. Fala będzie działać, ale przy suwaku zobaczysz, że w punkcie styku pojawia się kant — bo teraz to Ty odpowiadasz za odbicie, a nie SVG.