Free Press

Bezierovy křivky se používají v počítačové grafice ke kreslení tvarů, pro CSS animace a na mnoha dalších místech.

Jsou velmi jednoduchou záležitostí, kterou stojí za to jednou prostudovat a pak se cítit pohodlně ve světě vektorové grafiky a pokročilých animací.

Kontrolní body

Bezierova křivka je definována kontrolními body.

Mohou jich být 2, 3, 4 nebo více.

Například křivka se dvěma body:

Křivka se třemi body:

Křivka se čtyřmi body:

Pokud se na tyto křivky podíváte pozorně, můžete si okamžitě všimnout:

1. Body nejsou vždy na křivce. To je naprosto normální, později si ukážeme, jak se křivka sestavuje.

2. Řád křivky se rovná počtu bodů minus 1. Pro dva body máme lineární křivku (to je přímka), pro tři body kvadratickou křivku (parabolu), pro čtyři body kubickou křivku.

3. Křivka je vždy uvnitř konvexního trupu řídicích bodů:

   

Díky této poslední vlastnosti lze v počítačové grafice optimalizovat testy průsečíku. Pokud se konvexní trupy neprotínají, pak se neprotínají ani křivky. Takže kontrola průsečíku konvexních plášťů jako první může dát velmi rychlý výsledek „žádný průsečík“. Kontrola průsečíku konvexních plášťů je mnohem jednodušší, protože jsou to obdélníky, trojúhelníky a podobně (viz obrázek výše), tedy mnohem jednodušší útvary než křivka.

Hlavní hodnota Beziérových křivek pro kreslení – posunem bodů se křivka intuitivně mění.

Zkuste přesouvat řídicí body pomocí myši v následujícím příkladu:

Jak si můžete všimnout, křivka se táhne podél tečných čar 1 → 2 a 3 → 4.

Po určité praxi je zřejmé, jak umístit body, abyste získali potřebnou křivku. A spojením několika křivek můžeme získat prakticky cokoli.

Uveďme si několik příkladů:

De Casteljauův algoritmus

Na Bezierovy křivky existuje matematický vzorec, ale tím se budeme zabývat o něco později, protože De Casteljauův algoritmus je totožný s matematickou definicí a názorně ukazuje, jak se konstruuje.

Nejprve se podívejme na příklad se třemi body.

Tady je ukázka a následuje vysvětlení.

Kontrolní body (1,2 a 3) lze přesouvat myší. Stisknutím tlačítka „play“ ji spustíte.

Algoritmus sestavení tříbodové beziérovy křivky podle de Casteljau:

1. Kreslení řídicích bodů. Ve výše uvedené ukázce jsou označeny: 1, 2, 3.

2. Postavte úsečky mezi kontrolními body 1 → 2 → 3. V ukázce výše jsou hnědé.

3. Parametr t se přesune z 0 na 1. V ukázce výše je použit krok 0.05: smyčka prochází přes 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Pro každou z těchto hodnot t:

   • Na každé hnědé úsečce vezmeme bod, který se nachází na vzdálenosti úměrné t od jejího počátku. Protože úsečky jsou dvě, máme dva body.

     Například pro t=0 – oba body budou na začátku úsečky, a pro t=0.25 – na 25 % délky úsečky od jejího začátku, pro t=0.5 – na 50 %(uprostřed), pro t=1 – na konci úsečky.

   • Propojíme body. Na obrázku níže je spojovací úsečka vybarvena modře.

.

Pro t=0.25	Pro t=0.5

1. Nyní v modré úsečce vezměte bod na vzdálenost úměrnou stejné hodnotě t. To znamená, že pro t=0.25 (levý obrázek) máme bod na konci levé čtvrtiny úsečky a pro t=0.5 (pravý obrázek) – uprostřed úsečky. Na obrázcích výše je tento bod červený.

2. Jelikož t probíhá od 0 do 1, každá hodnota t přidává ke křivce bod. Množina takových bodů tvoří Beziérovu křivku. Na obrázcích výše je červená a parabolická.

To byl postup pro 3 body. Ale stejný je i pro 4 body.

Demonstrace pro 4 body (body lze přesouvat myší):

Algoritmus pro 4 body:

• Propojení řídicích bodů úsečkami: 1 → 2, 2 → 3, 3 → 4. Budou to 3 hnědé úsečky.
• Pro každou t v intervalu od 0 do 1:
  • Vezmeme body na těchto úsečkách na vzdálenost úměrnou t od počátku. Tyto body spojíme, takže máme dvě zelené úsečky.
  • Na těchto úsečkách vezmeme body úměrné t. Dostaneme jednu modrou úsečku.
  • Na modré úsečce vezmeme bod úměrný t. Na výše uvedeném příkladu je to červená.
• Tyto body dohromady tvoří křivku.

Algoritmus je rekurzivní a lze jej zobecnit pro libovolný počet řídicích bodů.

Dáme-li N řídicích bodů:

1. spojíme je tak, abychom získali původně N-1 úseček.
2. Poté pro každou t od 0 do 1 vezmeme bod na každé úsečce na vzdálenost úměrnou t a spojíme je. Vznikne N-2 úseček.
3. Pak opakujeme krok 2, dokud nezůstane jen jeden bod.

Tyto body tvoří křivku.

Spustíme a pozastavíme příklady, abychom jasně viděli úsečky a způsob sestavení křivky.

Křivka, která vypadá jako y=1/t:

Zig-zag řídicí body také fungují dobře:

Vytvoření smyčky je možné:

Neplynulá Beziérova křivka (ano, i to je možné):

Pokud je v popisu algoritmu něco nejasného, podívejte se prosím na živé příklady výše, abyste viděli, jak je křivka sestavena.

Jelikož je algoritmus rekurzivní, můžeme sestavit Beziérovy křivky libovolného pořadí, tedy: pomocí 5, 6 nebo více řídicích bodů. V praxi je však mnoho bodů méně užitečných. Obvykle bereme 2-3 body a pro složité linie slepíme několik křivek dohromady. To je jednodušší na vývoj a výpočet.

Matematika

Bezierovu křivku lze popsat pomocí matematického vzorce.

Jak jsme viděli – ten vlastně není potřeba znát, většina lidí křivku prostě nakreslí pohybem bodů myší. Ale pokud vás matematika baví – tady je.

Při souřadnicích řídicích bodů Pi: první řídicí bod má souřadnice P1 = (x1, y1), druhý: P2 = (x2, y2) a tak dále, jsou souřadnice křivky popsány rovnicí, která závisí na parametru t z úsečky .

• Rovnice pro dvoubodovou křivku:

  P = (1-t)P1 + tP2

• Pro 3 řídicí body:

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

• Pro 4 řídicí body:

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

Toto jsou vektorové rovnice. Jinými slovy, místo P můžeme dosadit x a y a získat odpovídající souřadnice.

Například tříbodová křivka je tvořena body (x,y) vypočtenými jako:

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

Místo x1, y1, x2, y2, x3, y3 bychom měli dosadit souřadnice 3 řídicích bodů, a pak jak se t pohybuje od 0 k 1, pro každou hodnotu t budeme mít (x,y) křivky.

Pokud jsou například řídicí body (0,0), (0.5, 1) a (1, 0), rovnice budou:

• 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

Nyní, jak t běží od 0 k 1, množina hodnot (x,y) pro každý t tvoří křivku pro takové řídicí body.

Souhrn

Bezierovy křivky jsou definovány svými řídicími body.

Viděli jsme dvě definice Bezierových křivek:

1. Pomocí kreslení: De Casteljauův algoritmus.
2. Pomocí matematických vzorců.

Dobré vlastnosti Beziérových křivek:

• Přesouváním řídicích bodů můžeme kreslit hladké čáry myší.
• Složité tvary lze vytvořit z několika Beziérových křivek.

Využití:

• V počítačové grafice, modelování, vektorových grafických editorech. Písmo se popisuje pomocí Beziérových křivek.
• Při tvorbě webových stránek – pro grafiku na plátně a ve formátu SVG. Mimochodem, výše uvedené „živé“ příklady jsou napsány v SVG. Jsou vlastně jedním dokumentem SVG, kterému jsou jako parametry zadány různé body. Můžete jej otevřít v samostatném okně a prohlédnout si zdrojový kód: demo.svg.
• V animaci CSS pro popis cesty a rychlosti animace.

.