Free Press

Bezier-käyriä käytetään tietokonegrafiikassa muotojen piirtämiseen, CSS-animaatioissa ja monessa muussa paikassa.

Ne ovat hyvin yksinkertainen asia, kannattaa opiskella kertaalleen ja sen jälkeen tuntee olonsa mukavaksi vektorigrafiikan ja edistyneiden animaatioiden maailmassa.

Säätöpisteet

Zezier-käyrä määritellään säätöpisteiden avulla.

Säätöpisteitä voi olla vaikka 2, 3 tai 4 tai niitä voi olla enemmän.

Esimerkiksi kahden pisteen käyrä:

kolmen pisteen käyrä:

neljän pisteen käyrä:

Jos tarkastelet näitä käyriä tarkkaan, huomaat heti:

1. Pisteet eivät aina ole käyrällä. Se on täysin normaalia, myöhemmin näemme, miten käyrä rakentuu.

2. Käyrän järjestys on yhtä suuri kuin pisteiden lukumäärä miinus yksi. kahdelle pisteelle meillä on lineaarinen käyrä (se on suora), kolmelle pisteelle – kvadraattinen käyrä (parabolinen), neljälle pisteelle – kuutiokäyrä.

3. Käyrä on aina ohjauspisteiden kuperan rungon sisällä:

   

Tämän jälkimmäisen ominaisuuden vuoksi tietokonegrafiikassa on mahdollista optimoida leikkauskokeita. Jos kuperat rungot eivät risteä, niin käyrätkään eivät risteä. Joten kuperien runkojen leikkautumisen tarkistaminen ensin voi antaa hyvin nopean ”ei leikkautumista” -tuloksen. Kuperien runkojen leikkauspisteiden tarkistaminen on paljon helpompaa, koska ne ovat suorakulmioita, kolmioita ja niin edelleen (ks. kuva yllä), paljon yksinkertaisempia hahmoja kuin käyrä.

Bezier-käyrien tärkein arvo piirtämisessä – pisteitä siirtämällä käyrä muuttuu intuitiivisesti ilmeisellä tavalla.

Kokeile siirtää ohjauspisteitä hiiren avulla alla olevassa esimerkissä:

Kuten huomaat, käyrä venyy tangentiaalisia linjoja 1 → 2 ja 3 → 4 pitkin.

Hieman harjoittelun jälkeen käy selväksi, miten pisteitä sijoitetaan, jotta saadaan tarvittava käyrä. Ja yhdistämällä useita käyriä saadaan käytännössä mitä tahansa.

Tässä on muutamia esimerkkejä:

De Casteljaun algoritmi

Bezierin käyrille on olemassa matemaattinen kaava, mutta käsitellään sitä hieman myöhemmin, silläDe Casteljaun algoritmi on identtinen matemaattisen määritelmän kanssa ja näyttää visuaalisesti, miten se on rakennettu.

Katsotaan ensin 3-pisteen esimerkki.

Tässä on demo, ja selitys seuraa.

Hallintapisteitä (1,2 ja 3) voidaan siirtää hiirellä. Suorita se painamalla ”play”-painiketta.

De Casteljaun algoritmi 3-pisteisen bezier-käyrän rakentamiseksi:

1. Piirrä ohjauspisteet. Yllä olevassa demossa ne on merkitty: 1, 2, 3.

2. Rakenna segmentit kontrollipisteiden 1 → 2 → 3 välille. Yllä olevassa demossa ne ovat ruskeita.

3. Parametri t siirtyy 0:sta 1:een. Yllä olevassa esimerkissä käytetään askelta 0.05: silmukka kulkee yli 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Kullekin näistä t:n arvoista:

   • Kustakin ruskeasta segmentistä otetaan piste, joka sijaitsee etäisyydellä, joka on verrannollinen t:n etäisyyteen sen alusta. Koska segmenttejä on kaksi, meillä on kaksi pistettä.

     Esimerkiksi t=0 – molemmat pisteet ovat segmenttien alussa, ja t=0.25 – 25 % segmentin pituudesta segmentin alusta, t=0.5 – 50 %(keskellä), t=1 – segmenttien lopussa.

   • Yhdistetään pisteet. Alla olevassa kuvassa yhdistävä segmentti on maalattu siniseksi.

For t=0.25	For t=0.5

1. Nyt siniseen segmenttiin otetaan piste etäisyydelle, joka on verrannollinen samaan arvoon t. Eli t=0.25:lle (vasen kuva) meillä on piste segmentin vasemman neljänneksen lopussa ja t=0.5:lle (oikea kuva) – segmentin keskellä. Yllä olevissa kuvissa tuo piste on punainen.

2. Koska t kulkee 0:sta 1:ään, jokainen t:n arvo lisää käyrään pisteen. Tällaisten pisteiden joukko muodostaa Bezierin käyrän. Se on yllä olevissa kuvissa punainen ja parabolinen.

Tämä oli kolmen pisteen prosessi. Mutta sama on 4 pisteelle.

Demo 4 pisteelle (pisteitä voi siirtää hiirellä):

Algoritmi 4 pisteelle:

• Yhdistä ohjauspisteet segmenteillä: 1 → 2, 2 → 3, 3 → 4. Tulee 3 ruskeaa segmenttiä.
• Jokaista t varten välissä 0 – 1:
  • Otetaan näille segmenteille pisteitä etäisyydelle, joka on verrannollinen t:n etäisyyteen alusta. Nämä pisteet ovat yhteydessä toisiinsa, joten meillä on kaksi vihreää segmenttiä.
  • Neille segmenteille otamme pisteet, jotka ovat verrannollisia t. Saamme yhden sinisen segmentin.
  • Siniselle segmentille otamme pisteen, joka on verrannollinen t. Yllä olevassa esimerkissä se on punainen.
• Nämä pisteet muodostavat yhdessä käyrän.

Algoritmi on rekursiivinen ja se voidaan yleistää mille tahansa ohjauspisteiden määrälle.

Annetaan N ohjauspistettä:

1. Yhdistämme ne, jotta saamme aluksi N-1 segmenttiä.
2. Sitten jokaiselle t:lle 0:n ja 1:n väliltä t otamme pisteen jokaiseen segmenttiin etäisyydellä, joka on verrannollinen t:n etäisyydelle ja yhdistämme ne. Syntyy N-2 segmenttiä.
3. Toista vaihe 2, kunnes pisteitä on vain yksi.

Nämä pisteet muodostavat käyrän.

Käynnistä ja pysäytä esimerkit, jotta näet selvästi segmentit ja sen, miten käyrä rakentuu.

Käyrä, joka näyttää y=1/t:

Siksak-ohjauspisteet toimivat myös hyvin:

Silmukan tekeminen on mahdollista:

Ei-sileä Bezier-käyrä (kyllä, sekin on mahdollista):

Jos algoritmin kuvauksessa on jotain epäselvää, katso yllä olevia live-esimerkkejä nähdäksesi, mitenkäyrä on rakennettu.

Koska algoritmi on rekursiivinen, voimme rakentaa Bezier-käyriä missä tahansa järjestyksessä, eli käyttämällä 5, 6 tai useampia ohjauspisteitä. Käytännössä monet pisteet ovat kuitenkin vähemmän hyödyllisiä. Yleensä otamme 2-3 pistettä, ja monimutkaisia viivoja varten liimaamme useita käyriä yhteen. Se on yksinkertaisempi kehittää ja laskea.

Matematiikka

Bezierin käyrä voidaan kuvata matemaattisella kaavalla.

Kuten näimme – sitä ei oikeastaan tarvitse osata, useimmat ihmiset piirtävät käyrän vain siirtämällä pisteitä hiirellä. Mutta jos olet innostunut matematiikasta – tässä se on.

Tietäen ohjauspisteiden koordinaatit Pi: ensimmäisen ohjauspisteen koordinaatit ovat P1 = (x1, y1), toisen: P2 = (x2, y2), ja niin edelleen, käyrän koordinaatit kuvataan yhtälöllä, joka riippuu segmentin parametrista t.

• Kahden pisteen käyrän kaava:

  P = (1-t)P1 + tP2

• Kolmen ohjauspisteen osalta:

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

• 4 ohjauspisteelle:

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

Nämä ovat vektoriyhtälöitä. Toisin sanoen voimme laittaa P:n sijasta x ja y saadaksemme vastaavat koordinaatit.

Esimerkiksi 3-pistekäyrä muodostuu pisteistä (x,y), jotka lasketaan seuraavasti:

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

Pitäisi laittaa x1, y1, x2, y2, x3, y3:n sijasta 3:n ohjauspisteen koordinaatit, jolloin t:n siirryttyä pisteestä 0 pisteeseen 1 saamme jokaiselle t:n arvolle (x,y):n käyrän.

Jos kontrollipisteet ovat esimerkiksi (0,0), (0.5, 1) ja (1, 0), yhtälöistä tulee:

• 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

Nyt kun t kulkee pisteestä 0 pisteeseen 1, arvojen (x,y) joukko (x,y) kullekin t:n arvolle muodostuu tällaisten kontrollipisteiden käyrä.

Yhteenveto

Bezier-käyrät määritellään niiden ohjauspisteiden avulla.

Katsoimme kaksi Bezier-käyrien määritelmää:

1. Käyttämällä piirtämistä: De Casteljaun algoritmi.
2. Käyttämällä matemaattisia kaavoja.

Bezier-käyrien hyviä ominaisuuksia:

• Voimme piirtää tasaisia viivoja hiirellä liikuttamalla ohjauspisteitä.
• Monimutkaisia muotoja voidaan tehdä useista Bezier-käyristä.

Käyttö:

• Tietokonegrafiikassa, mallinnuksessa, vektorigrafiikkaeditoreissa. Fontit kuvataan Bezier-käyrillä.
• Web-kehityksessä – Canvas-grafiikkaan ja SVG-muotoon. Muuten, yllä olevat ”live”-esimerkit on kirjoitettu SVG-muodossa. Ne ovat itse asiassa yksi SVG-dokumentti, jolle annetaan parametreina eri pisteitä. Voit avata sen erillisessä ikkunassa ja nähdä lähteen: demo.svg.
• CSS-animaatiossa animaation polun ja nopeuden kuvaamiseen.