Nerding Bezier görbékkel

Az elmúlt napok óta próbálom megírni a saját kis JavaScript animációs könyvtáramat. Tudom, hogy tudom, hogy senkit nem érdekel igazán egy új animációs könyvtár, de hé, a lényeg az, hogy közben belebotlottam Bezier görbéibe. Pár órát töltöttem a kutatással, és megpróbáltam megérteni őket, és közben rátaláltam erre a friss cikkre - „Matematikai intuíció Bezier görbék mögé”, amely véletlenül is inspirálja ezt a cikket. Matyás és látszólag az agyos emberekre irányul, ezért egyfajta nehéz időszakban tekertem a fejem a koncepció köré. De szerencsére végül megtettem, és ez számos újszerű dolog megismeréséhez vezetett a Bezier-görbékről, amelyeket nagyon izgatottan osztok meg veletek.

Amit megtanulsz

Kezdem a görbék bevezetésével, hogy mik ezek, miért hűvösek, matematikai ábrázolásukkal. Ne aggódjon a matematika miatt, de hogy őszinte legyek, kissé szopom a matematikát, ezért meg kell találnom azokat a módszereket, amelyekkel megpróbálhatom elmagyarázni magamnak, és biztos vagyok benne, hogy az "utak" nálatok is működni fognak :).

Ezután a Bezier-kanyarokra térünk át. Mik ők, és mitől különböznek. Matematikai képletük.

A vége felé elkészítjük saját kis Bezier görbe rajzmotorunkat JavaScriptben és SVG-ben. Mennyire klassz?

Görbék

Nem kell itt formálisan meghatároznom a görbét, igaz? Mindezek a vonalak görbék, nézze meg őket

A görbék nagyon édesek, számos dolgot képviselhetnek. Például az alábbi görbe mutatja a Twitter-követőim számát az idő múlásával.

Rendben, rendben, úgy néz ki, mint egy véletlenszerűen összefirkált vonal. Hadd adjak néhány összefüggést.

Most jobban meg kell adnia, mit jelent. A vízszintes tengelyen azon napok száma látható, amióta beléptem a Twitterbe, a függőleges tengelyen pedig a követők száma.

Az első Twitteren töltött napomon 0 követővel rendelkeztem, majd lassan növekedett, veszítettem, nyertem, majd az utóbbi felében számos új követőt szereztem. Nem csak ezt az információt tudjuk megfejteni ebből a görbéből. Azt is megtudhatom, hogy pontosan hány követővel rendelkeztem az adott napon. Csak két vonal megrajzolásáról van szó.

Tegyük fel, hogy szeretném tudni, hogy hány követővel rendelkeztem a 60. napon.

Függőleges vonalat rajzolok 60 -tól a vízszintes tengelyre, majd onnan, ahol ez a vonal metszi a görbét, vízszintes vonalat rajzolok. Ez a vízszintes vonal metszi a függőleges tengelyt (tengely a követők számával) egy pontban. A függőleges tengely ezen pontjának értéke azt a pontos követőszámot adja meg, amely a 60. napon volt, ami 126.

Most, ahol a két piros vonal metszi, ezt nevezzük pontnak . Egy kétdimenziós ábrán, hasonlóan a Twitter követői grafikonunkhoz, egy pontot két érték, a vízszintes koordinátája ( x ) és a függőleges koordinátája ( y ) egyedileg azonosít . Ezért csak egy (x, y) írás szükséges a pont ábrázolásához. Esetünkben a piros pontot, ahol a két piros vonal metszi, felírhatjuk (60, 126).

(60 = x / vízszintes koordináta, 126 = y / függőleges koordináta)

Elég jól, hogy mi a lényeg, ezt már tudta. Beszéljünk a görbe, ami tulajdonképpen egy gyűjtemény sok ilyen pont nem?

Olyan adattömböt vesz fel, mint a 0. napon 0 követõ, az 1. nap 50 követõje ... 10. nap 76 követõje ... 100. napja 500 követõje és így tovább. Ezeket az adatokat pontokká alakítja (0, 0) (1, 50)… (10, 76) ... (100, 500) ... Megrajzolja a grafikonon lévő pontokat, amelyek összekapcsolják őket, és ott van egy görbe.

Tehát egy görbe pontokra, a pontokhoz pedig megfelelő x és y értékekre van szükség. Ezért most nagyon figyeljen oda, egy görbét egyedülállóan képviselhet valami, ami kiköpheti számunkra az x és / vagy y értékeket. Ezt a „valamit” hívjuk a matematikában egy függvénynek.

A matematikában sok standard funkció létezik. Tekintsük a szinuszfüggvényt .

Az ilyen függvényekben az x választása a miénk. Adunk neki egy x-et , ez ad nekünk egy y-t . És együtt alkotunk egy pontot (x, y). Adunk neki még egy x-et, ez pedig egy másik y-t, így és így tovább egy pontgyűjteményhez jutunk, kirajzoljuk őket, és egyedi formát kapunk.

A függvény paraméteres formában is ábrázolható . Paraméteres formában nem kell megadnunk a pont koordinátájának egy részét, mint az előző példában (x). Ehelyett megadunk egy paramétert / változót, amelyet általában t-nek írunk, és minden t-re megkapjuk mind az x, mind az y koordinátákat, röviden egy a t-t adunk meg egy pontot.

Érdemes tudni, hogy mi a paraméteres forma, amikor a Bezier-görbék mögött álló matematikáról beszélünk.

Bezier görbék

A Bezier görbék nagyon különleges görbék. A matematika és a mögöttük álló ötlet elrobbant, és neked is fel kell készülnöd arra, hogy elrepülj.

Mivel ezt olvassa, feltételezem, hogy Ön tervező vagy fejlesztő, és korábban foglalkozott Bezier-görbékkel, különösen a Köbös Bezier-görbékkel, egy másodperc alatt eljutunk a Cubic Bezier-görbékhez. Ezeket a görbéket számos helyen használják, vektorgrafikák, animációs útvonalak, animációs könnyítő görbék stb. Létrehozására, csak azért, mert annyira könnyen kezelhetők . Nem kell nagyon sok matematikát tudni, semmit sem ahhoz, hogy ezeket a görbéket hajlamaihoz hajlítsa. Gondoljon arra, hogy ha a Bezier-görbék nem léteznének, és az embereknek egyedi matematikai függvényekkel kellett volna előállniuk a görbékhez, mondjuk vektorgrafikák, például betűtípusok, természetesen rémálmok rajzolásához.

Matek?

Rendben, ideje egy kis matematikának. A Bezier-kanyarok általános képletével kezdem, ez első ránézésre elég ijesztő, de majd átjutunk.

- Hú! Hú! Hú! Einstein! ”. Hé, várj, ne kattints el. Könnyű, nézd, olyan színes lettem?

Kezdjük el lebontani a képletet. Átugorhatja a már ismert alkatrészeket.

B (t)

B, mert ez egy B ezier görbe. Amint azt korábban a görbék paraméteres formájáról szóló cikkben említettük, t egy paraméter. Csatlakoztatja a t-t, és kijön x és y , egy pont. Hamarosan meglátjuk, hogy működik ez a fenti egyenlettel. Jó lesz megemlíteni, hogy Bezier görbéknél a t értéknek 0 és 1 között kell lennie, mindkettőt beleszámítva.

Σ / Sigma

Ezt a ics szimbólumot a matematikában összegző operátornak nevezzük. Működése így van, a szimbólum jobb oldalán egy i változóval rendelkező kifejezés található, és i csak egész értékeket tartalmazhat. A szimbólum tetejére és aljára írjuk az i határértékeit. Az i értékek mindegyikéhez kiértékeljük a jobb oldali kifejezést, és hozzáadjuk az összeghez, amíg i el nem éri az n értéket.

Íme néhány példa.

Csak rövidebb jelölés valami hosszabbra.

Rendben, úgy tűnik, tisztában vagyunk a szigmával.

nCi

Ez a C itt a Permutációk és C ombinációk C- je. Legyen egy rögtönzött Kombinációk lecke. Most a képletben ezt a részt nevezzük binomiális együtthatónak. Az nCi olvasásának módja ilyen, n Válasszon i-t. Ami azt jelenti, hogy adott n elem hányféleképpen választhat ki belőle i elemet (n mindig nagyobb vagy egyenlő i-vel). Oké, lehet, hogy ennek nem volt sok értelme, fontolja meg ezt a példát: 3 elemem van egy kör, egy négyzet és egy háromszög. Ezért itt n = 3. Hányféleképpen választhatok 2 (i = 2) tételt a 3. közül. A matematika nyelvén, amelyet 3C2-nek írnának (3 Válasszon 2-t). A válasz 3.

Hasonlóképpen,

És amikor i értéke 0, csak egy módja van annak, hogy 0 elemet válasszon az n, az 1 közül, és egyáltalán ne válasszon.

Vázlatok rajzolása és az adott Kombináció kifejezésre adott válasz kitalálása helyett ez az általánosított képlet áll rendelkezésre.

P al i

Ez a fontos bit. A Bezier-görbe általános képletében t, i és n található. Nem igazán érintettük azt, hogy mi az n. n az, amit Bezier-görbe fokának nevezünk. n az, ami eldönti, hogy egy Bezier-görbe lineáris vagy kvadratikus vagy köbös vagy valami más.

Látja, hogy ha korábban használta a toll eszközt, akkor két különböző helyen kattintva két külön pontot hozhat létre, majd a fogantyúk segítségével vezérli a két pont között kialakuló görbét. A Bezier-görbének mindig legalább két rögzítési pontja lesz, a fennmaradó pedig azok a kontrollpontok, amelyek a görbe alakjának szabályozására szolgálnak. Ezenkívül az általatok fogantyúknak nevezzük csak azokat a vezérlőpontokat, amelyeket egy vonal köt össze egy rögzítési ponthoz, és csak azért vannak, hogy jobb mentális modellt biztosítsanak. Tehát a fogantyúk beállításakor a valóságban egyszerűen megváltoztatja az ellenőrzési pontok koordinátáit.

Szabaduljunk meg minden tartozéktól, és koncentráljunk a magra.

A fenti képen látható görbe köbös Bezier-görbe, más szavakkal a Bezier-görbe fent bemutatott foka 3, vagy a Bezier-görbék általános képletében n = 3-at csatlakoztat.

Az n = 1 lineáris Bezier-görbét ad, amelynek két P0 és P1 rögzítési pontja van, és nincs kontrollpontja, tehát lényegében egyenes.

n = 2 négyzetes Bezier-görbét ad két P0 és P2 rögzítési ponttal és egy P1 kontrollponttal

és hasonlóképpen n = 3 egy köbös Bezier-görbét ad két P0 és P3 rögzítési ponttal, valamint két P1 és P2 kontrollponttal. Minél magasabb az n, annál bonyolultabb alakzatok rajzolhatók.

Most az általános egyenletből meg fogjuk alakítani a Cubic Bezier görbe egyenletét, amely magában foglalja az n = 3 helyettesítését az általános képletben. Az egyenlet, amelyet kapunk, a t változóban lesz, amely, mint korábban említettük, egy olyan paraméter, amelynek értéke 0 és 1 között változik. Az egyenlethez 4 Pis (olvasd: Pisi szem) P0, P1, P2 és P3 kell. Ezeknek a pontoknak a megválasztása rajtunk múlik, elvégre amikor vektorgrafikákat rajzolunk, azt mondjuk, hogy a toll eszközzel a horgonypontok és a kontrollpontok helyzetét választjuk nem? A változtatások után a köbös Bezier-görbe egyenletünk valami ilyennek tűnik.

Itt egy kis rövidséget használunk, a valóságban mindegyik (P) pontnak két x és y koordinátája van, és a t átadásakor az általános egyenletre állítólag kapunk egy olyan pontot is, amelynek x és y koordinátái is vannak. Ezért a fenti egyenletet felírhatjuk

Valami nagyon különleges szemtanúja lesz ezeknek az egyenleteknek.

Összefoglalva, az említett egyenlet a Bezier görbe paraméteres formája a t paraméterrel, amely 0 és 1 között változó értékeket képes tárolni. A görbe a pontok gyűjteménye. Minden egyedi t , amelyet B-nek ad át, egyedi pontot ad, amely felépíti az egész Bezier-görbét.

Az egyenlet varázslatos eleme az, hogy amikor t = 0, B (0) = P0 és amikor t = 1, B (1) = P3, akkor t, 0 és 1 szélsőértékei adják a görbe, amelyek természetesen a rögzítési pontok. Ez nem csak a köbös Bezier-görbékre igaz, n B (0) = P0 és B (1) = Pn fokú görbére.

Bármely más t értéke 0 és 1 között (pl. T = 0,2 a fenti ábrán) kap egy pontot, amely felépíti a görbét.

Mivel az egész egyenlet a Pis (Pee szemek) helyzetétől függ, helyzetük megváltoztatása megváltoztatja a görbe alakját. Bezier görbék pedig így működnek.

Most, hogy ismerjük a Bezier-görbék mögött álló matematikát, használjuk fel ezeket a tudásokat.

Létrehoztam egy egyszerű JavaScript programot, amely köbös Bezier görbét jelenít meg, nincs felhasználói felület, amely interakcióba lépne vele, mert nem akartam, hogy a logika elhalványuljon az összes felhasználói felület kódjában, és azért is, mert lusta vagyok. De ez nem azt jelenti, hogy nem léphetsz kapcsolatba vele :).

Ez egy kicsit túl sok volt ahhoz, hogy bevállalja? Azzal kezdtük, hogy meghatározzuk, mi is a görbe, onnan léptünk át pontokra, és ezek miként alkotják a görbe építőköveit. Aztán folytattuk a Bezier-görbéket, és megértettük a matematikát, hogy megtalálja azokat a pontokat, amelyek Bezier-görbét mutatnak. Remélem, hogy megtanult valamit, és okosabban hagyta ezt a cikket, mint amikor elkezdte olvasni.

A kis egyedi Cubic Bezier motor kódja megtalálható ebben a GitHub repóban.

Frissítés: A generátor most bármilyen fokú Bezier görbét képes létrehozni, és nem csak a Köbös Bezier görbéket :).

Többet keres? Rendszeresen publikálok a blogomon a nashvail.me címen. Találkozunk ott, legyen jó!