Bezierova křivka

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

Jsou velmi jednoduché, stojí za to si je jednou prostudovat a pak se cítit pohodlně ve světě vektorové grafiky a pokročilých animací.

Tento článek poskytuje teoretický, ale velmi potřebný vhled do toho, co jsou Bézierovy křivky, zatímco další ukazuje, jak je můžeme použít pro animace CSS.

Věnujte prosím čas přečtení a pochopení konceptu, bude vám dobře sloužit.

Kontrolní body

Bézierova křivka je definována kontrolními body.

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

Například křivka dvou bodů:

Křivka tří bodů:

Čtyřbodová křivka:

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

1. Body nejsou vždy na křivce. To je naprosto normální, později uvidíme, jak je křivka vytvořena.

2. Pořadí křivky se rovná počtu bodů mínus jeden .Pro dva body máme lineární křivku (to je přímka), pro tři body – kvadratická křivka (parabolická), pro čtyři body – kubickou křivku.

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

   

Díky této poslední vlastnosti je možné v počítačové grafice optimalizovat testy křižovatek. Pokud se konvexní trupy neprotínají, pak křivky také ne. Takže první kontrola konvexního průniku trupů může poskytnout velmi rychlý výsledek „žádný průnik“. Kontrola průsečíku konvexních trupů je mnohem jednodušší, protože jsou to obdélníky, trojúhelníky a tak dále (viz obrázek výše), mnohem jednodušší obrazce než křivka.

Hlavní hodnota Bézierových křivek pro kreslení – posouváním bodů se křivka mění intuitivně zřejmým způsobem .

Zkuste přesunout kontrolní body pomocí myši v níže uvedené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 nějaké praxi bude 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 cokoliv.

Zde je několik příkladů:

De Casteljauův algoritmus

Existuje matematický vzorec pro Bézierovy křivky, ale pojďme si ho probrat o něco později, protože De Casteljauův algoritmus je identický s matematickou definicí a vizuálně ukazuje, jak je konstruován.

Nejprve se podívejme na 3bodový příklad.

Zde je ukázka a vysvětlení.

Kontrolní body (1,2 a 3) lze posouvat myší. Pro spuštění stiskněte tlačítko „play“.

De Casteljauův algoritmus sestavení 3bodové Bézierovy křivky:

1. Nakreslete kontrolní body. Ve výše uvedené ukázce jsou označeny:1 , 2 , 3 .

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

3. Parametr t přesune z 0 až 1 . V příkladu výše krok 0.05 se používá:smyčka jde přes 0, 0.05, 0.1, 0.15, ... 0.95, 1 .

   Pro každou z těchto hodnot t :

   • Na každém hnědém segmentu vezmeme bod umístěný ve vzdálenosti úměrné t od jeho počátku. Protože existují dva segmenty, máme dva body.

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

   • Spojte body. Na obrázku níže je spojovací segment namalován modře.

Pro t=0.25	Pro t=0.5

4. Nyní v modrém segmentu vezměte bod na vzdálenosti úměrný stejné hodnotě t . Tedy pro t=0.25 (obrázek vlevo) máme bod na konci levé čtvrtiny segmentu a pro t=0.5 (pravý obrázek) – uprostřed segmentu. Na obrázcích nad tímto bodem je tento bod červený.

5. Jako t běží od 0 na 1 , každá hodnota t přidá bod do křivky. Množina takových bodů tvoří Bezierovu křivku. Na obrázcích výše je červená a parabolická.

To byl postup za 3 body. Ale totéž platí pro 4 body.

Demo za 4 body (body lze přesouvat myší):

Algoritmus pro 4 body:

• Propojte kontrolní body podle segmentů:1 → 2, 2 → 3, 3 → 4. Budou zde 3 hnědé segmenty.
• Pro každý t v intervalu od 0 na 1 :
  • Na těchto segmentech bereme body ve vzdálenosti úměrné t od začátku. Tyto body jsou spojeny, takže máme dva zelené segmenty.
  • Na těchto segmentech bereme body úměrné t . Získáme jeden modrý segment.
  • Na modrém segmentu vezmeme bod úměrný t . Ve výše uvedeném příkladu je červená.
• Tyto body dohromady tvoří křivku.

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

Je dáno N kontrolních bodů:

1. Připojíme je, abychom získali zpočátku N-1 segmentů.
2. Pak pro každý t z 0 na 1 , vezmeme bod na každém segmentu ve vzdálenosti úměrné t a spojte je. Bude N-2 segmentů.
3. Opakujte krok 2, dokud nezískáte pouze jeden bod.

Tyto body tvoří křivku.

Spusťte a pozastavte příklady, abyste jasně viděli, jaké segmenty a jak je křivka vytvořena.

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

Cik-cak kontrolní body také fungují dobře:

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

Nehladká Bezierova křivka (ano, i to je možné):

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

Protože je algoritmus rekurzivní, můžeme sestavit Bézierovy křivky libovolného řádu, to znamená: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é čáry slepíme několik křivek dohromady. To je jednodušší na vývoj a výpočet.

K určení Bézierovy křivky se používají řídicí body. Jak vidíme, nejsou na křivce, kromě prvního a posledního.

Někdy máme jiný úkol:nakreslit křivku několika body , takže všechny jsou na jedné hladké křivce. Tento úkol se nazývá interpolace a zde se jím nezabýváme.

Pro takové křivky existují matematické vzorce, například Lagrangeův polynom. V počítačové grafice se interpolace spline často používá k vytvoření hladkých křivek, které spojují mnoho bodů.

Matematika

Bezierova křivka může být popsána pomocí matematického vzorce.

Jak jsme viděli – ve skutečnosti to není potřeba vědět, většina lidí prostě nakreslí křivku přesouváním bodů pomocí myši. Ale pokud se zajímáte o matematiku – tady to je.

Jsou dány souřadnicemi kontrolních bodů Pi :první kontrolní bod má souřadnice P1 = (x1, y1) , druhý:P2 = (x2, y2) , a tak dále, souřadnice křivky jsou popsány rovnicí, která závisí na parametru t ze segmentu [0,1] .

• Vzorec pro 2-bodovou křivku:

  P = (1-t)P1 + tP2

• Pro 3 kontrolní body:

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

• Pro 4 kontrolní body:

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

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

Například 3-bodová křivka je tvořena body (x,y) vypočteno 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 měli bychom zadat souřadnice 3 kontrolních bodů a pak jako t přesune z 0 na 1 , pro každou hodnotu t budeme mít (x,y) křivky.

Pokud jsou například kontrolní body (0,0) , (0.5, 1) a (1, 0) , rovnice se stanou:

• 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í jako t běží od 0 na 1 , množina hodnot (x,y) pro každý t tvoří křivku pro takové kontrolní body.

Shrnutí

Bézierovy křivky jsou definovány svými řídicími body.

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

1. Použití procesu kreslení:De Casteljauův algoritmus.
2. Použití matematických vzorců.

Dobré vlastnosti Bezierových křivek:

• Posouváním řídicích bodů můžeme kreslit hladké čáry pomocí myši.
• Složité tvary lze vytvořit z několika Bézierových křivek.

Použití:

• V počítačové grafice, modelování, vektorových grafických editorech. Písma jsou popsána Bezierovými křivkami.
• Ve vývoji webu – pro grafiku na plátně a ve formátu SVG. Mimochodem, „živé“ příklady výše jsou napsány v SVG. Jsou to vlastně jeden dokument SVG, který má různé body jako parametry. Můžete jej otevřít v samostatném okně a zobrazit zdroj:demo.svg.
• V animaci CSS k popisu cesty a rychlosti animace.