Free Press

A Bezier-görbéket a számítógépes grafikában alakzatok rajzolására, CSS animációhoz és sok más helyen használják.

Egy nagyon egyszerű dolog, érdemes egyszer áttanulmányozni, és utána otthonosan mozogni a vektorgrafika és a fejlett animációk világában.

Kontrollpontok

A bezier-görbét kontrollpontok határozzák meg.

Ez lehet 2, 3, 4 vagy több is.

Például kétpontos görbe:

Hárompontos görbe:

Négypontos görbe:

Ha jobban megnézzük ezeket a görbéket, azonnal észrevehetjük:

1. A pontok nem mindig vannak görbén. Ez teljesen normális, később látni fogjuk, hogyan épül fel a görbe.

2. A görbe sorrendje egyenlő a pontok számával mínusz egy. 2 pont esetén lineáris görbét kapunk (ez egy egyenes), 3 pont esetén kvadratikus görbét (parabolikus), 4 pont esetén köbös görbét.

3. Egy görbe mindig a kontrollpontok konvex burkán belül van:

   

Ez utóbbi tulajdonság miatt a számítógépes grafikában lehetőség van a metszetvizsgálatok optimalizálására. Ha a konvex héjak nem metszik egymást, akkor a görbék sem. Tehát először a konvex héjak metszéspontjának ellenőrzése nagyon gyors “nincs metszéspont” eredményt adhat. A konvex héjak metszésének ellenőrzése sokkal egyszerűbb, mert ezek téglalapok, háromszögek és így tovább (lásd a fenti képet), sokkal egyszerűbb alakzatok, mint a görbe.

A Bezier-görbék fő értéke a rajzoláshoz – a pontok mozgatásával a görbe intuitívan nyilvánvaló módon változik.

Próbáljuk meg az egérrel mozgatni a vezérlőpontokat az alábbi példában:

Mint láthatjuk, a görbe az 1 → 2 és a 3 → 4 érintővonalak mentén húzódik.

Egy kis gyakorlás után nyilvánvalóvá válik, hogyan kell a pontokat elhelyezni, hogy a kívánt görbét kapjuk. Több görbe összekapcsolásával pedig gyakorlatilag bármit megkaphatunk.

Itt van néhány példa:

De Casteljau algoritmusa

A Bezier-görbéknek van egy matematikai képlete, de foglalkozzunk vele egy kicsit később, mertDe Casteljau algoritmusa megegyezik a matematikai definícióval, és vizuálisan mutatja, hogyan épül fel.

Először lássuk a 3 pontos példát.

Itt a demó, és a magyarázat következik.

A vezérlőpontokat (1,2 és 3) az egérrel mozgathatjuk. A futtatáshoz nyomja meg a “play” gombot.

De Casteljau algoritmusa a 3 pontos bezier görbe felépítéséhez:

1. Vezérlőpontok rajzolása. A fenti demóban ezek fel vannak címkézve: 1, 2, 3.

2. Készítsünk szegmenseket az 1 → 2 → 3 kontrollpontok között. A fenti demóban ezek barna színűek.

3. A t paraméter 0-ről 1-re mozog. A fenti példában a 0.05 lépést használjuk: a ciklus 0, 0.05, 0.1, 0.15, ... 0.95, 1 felett halad át.

   A t minden egyes ilyen értékére:

   • Minden barna szegmensen veszünk egy pontot, amely a t értékkel arányos távolságra van a szegmens elejétől. Mivel két szegmens van, két pontunk is van.

     Például t=0 esetén – mindkét pont a szegmensek elején lesz, t=0.25 esetén – a szegmens hosszának 25%-án a szegmens elejétől, t=0.5 esetén – 50%(a közepén), t=1 esetén – a szegmens végén.

   • Kapcsoljuk össze a pontokat. Az alábbi képen az összekötő szegmens kékre van festve.

számára.

Az t=0.25	Az t=0.5

1. Most a kék szegmensben vegyünk egy pontot a t azonos értékével arányos távolságra. Vagyis t=0.25 (a bal oldali kép) esetében a szegmens bal negyedének végén, t=0.5 (a jobb oldali kép) esetében pedig a szegmens közepén van egy pontunk. A fenti képeken ez a pont piros.

2. Mivel t 0-től 1-ig fut, t minden értéke egy pontot ad a görbéhez. Az ilyen pontok halmaza alkotja a Bezier-görbét. Ez piros és parabolikus a fenti képeken.

Ez egy folyamat volt 3 pontra. De ugyanez van 4 pontra is.

A bemutató 4 pontra (a pontok egérrel mozgathatók):

Az algoritmus 4 pontra:

• A vezérlőpontokat szegmensekkel kapcsoljuk össze: 1 → 2, 2 → 3, 3 → 4. Lesz 3 barna szegmens.
• Az 0 és 1 közötti intervallumban minden t pontra:
  • Ezeken a szegmenseken a kezdetektől t-kal arányos távolságra vesszük a pontokat. Ezeket a pontokat összekötjük, így két zöld szegmenset kapunk.
  • Ezeken a szegmenseken t arányos pontokat veszünk. Kapunk egy kék szegmenst.
  • A kék szegmensen veszünk egy t arányos pontot. A fenti példán ez piros.
• Ezek a pontok együtt alkotják a görbét.

Az algoritmus rekurzív és tetszőleges számú vezérlőpontra általánosítható.

Adott N ellenőrző pont:

1. összekötjük őket, hogy kezdetben N-1 szegmenset kapjunk.
2. Ezután 0-től 1-ig minden t pontra 0-től 1-ig veszünk egy pontot minden szegmensen a t-tal arányos távolságon, és összekötjük őket. N-2 szegmens lesz.
3. Megismételjük a 2. lépést, amíg csak egy pont van.

Ezek a pontok alkotják a görbét.

Futtassunk és szüneteltessünk példákat, hogy jól láthassuk a szegmenseket és a görbe felépítését.

A görbe úgy néz ki, mint a y=1/t:

A cikk-cakkos vezérlőpontok is jól működnek:

Hurok készítése is lehetséges:

Egy nem sima Bezier-görbe (igen, az is lehetséges):

Ha valami nem világos az algoritmus leírásában, nézd meg a fenti élő példákat, hogy lásd, hogyan épül fel a görbe.

Mivel az algoritmus rekurzív, bármilyen sorrendű Bezier-görbéket építhetünk, azaz: 5, 6 vagy több vezérlőpontot használhatunk. A gyakorlatban azonban a sok pont kevésbé hasznos. Általában 2-3 pontot veszünk, és összetett vonalak esetén több görbét ragasztunk össze. Így egyszerűbb kidolgozni és kiszámítani.

Matematika

A Bezier-görbét matematikai képlettel lehet leírni.

Mint láttuk – valójában nem kell ismerni, a legtöbb ember csak úgy rajzolja a görbét, hogy az egérrel pontokat mozgat. De ha szereted a matematikát – itt van.

A vezérlőpontok Pi koordinátáit megadva: az első vezérlőpont koordinátái P1 = (x1, y1), a második: P2 = (x2, y2), és így tovább, a görbe koordinátáit a szegmens t paraméterétől függő egyenlet írja le.

• A 2 pontos görbe képlete:

  P = (1-t)P1 + tP2

• 3 vezérlőpont esetén:

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

• 4 vezérlőpontra:

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

Ezek vektoregyenletek. Más szóval a P helyett x és y értékeket tehetünk, hogy megkapjuk a megfelelő koordinátákat.

A 3 pontos görbét például a (x,y) pontok alkotják, amelyeket a következőképpen számítunk:

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

A x1, y1, x2, y2, x3, y3 helyett 3 vezérpont koordinátáit kell beírnunk, és akkor ahogy t a 0-től 1-ig halad, minden t értékhez (x,y) görbét kapunk.

Ha például a kontrollpontok (0,0), (0.5, 1) és (1, 0), akkor az egyenletek a következők lesznek:

• 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

Most ahogy t 0-től 1-ig halad, az egyes t értékek (x,y) halmaza az ilyen kontrollpontok görbéjét alkotja.

Összefoglaló

A Bezier-görbéket a vezérlőpontjaik határozzák meg.

A Bezier-görbék két definícióját láttuk:

1. A rajzolási folyamatot használva: De Casteljau algoritmusa.
2. Matematikai képletek felhasználásával.

A Bezier-görbék jó tulajdonságai:

• A vezérlőpontok mozgatásával sima vonalakat rajzolhatunk az egérrel.
• Bonyolult alakzatok több Bezier-görbéből készíthetők.

Használat:

• A számítógépes grafikában, modellezésben, vektorgrafikus szerkesztőkben. A betűtípusokat Bezier-görbékkel írják le.
• A webfejlesztésben – Canvas és SVG formátumú grafikákhoz. Egyébként a fenti “élő” példák SVG-ben íródtak. Ezek valójában egyetlen SVG dokumentum, amely különböző pontokat kap paraméterként. Megnyithatja egy külön ablakban, és megnézheti a forrást: demo.svg.
• CSS animációban az animáció útvonalának és sebességének leírására.