Bézier-käyrät, kuvankäsittely ja tuotesuunnittelu

 

Taustaa

Tämä artikkeli on ensimmäinen osa useampiosaista artikkelisarjaa, jossa käsitellään Bézier-käyriä; käyriä, joiden ilmentymiä näemme ympärillämme päivittäin, kuitenkaan sitä useinkaan tiedostamatta. Artikkelisarjan pyrkimyksenä on auttaa huomaamaan, että monimutkaiselta näyttävät kokonaisuudet voivat koostua lukiolaisen ja jopa yläkoululaisenkin ymmärrettävissä olevista ”rakennuspaloista”.

Esitiedot

Tämän artikkelin seuraamiseksi ei tarvinne sen enempiä esitietoja, mutta koko artikkelisarjan lukemiseksi olisi hyvä, että lukijalla on peruskäsitys siitä mitä vektorit ovat (”nuolia”) ja miten niitä lasketaan yhteen, vähennetään toisistaan ja kerrotaan luvulla. Mikäli tarvitset täydennystä tiedoissasi, tsekkaa vektorivideot.

Bézier-käyrien käyttökohteita

Tasaisesti kaareutuvat käyrät ja pinnat ovat paitsi miellyttävän näköisiä, myös hyödyllisiä esimerkiksi kuvankäsittelyssä, tietokonefonteissa, tuotesuunnittelussa ja sulavan liikkeen mallintamisessa. Fonttien myötä näemme Bézier-käyriä lähes kaikkialla.

Bézier-käyrien taustaa

Bézier-käyrät ovat idealtaan suhteellisen yksinkertaisia pohjautuen analyyttiseen geometriaan ja vektoreihin. Käyrät ovat saaneet nimensä ranskalaisen Pierre Bézierin mukaan, joka työskenteli 1960-luvulla Renaultin autotehtaalla suunnittelijana. Pierre Bézier itse asiassa hyödynsi jo 1910-luvulla tunnettuja Bernsteinin polynomeja kontekstissa, johon niiden ei oltu ennen tajuttu soveltuvan.

Johdanto Bézier-käyriin

Tässä artikkelissa käsitellään graafista/geometrista ideaa siitä, miten Bézier-käyrät rakentuvat. Käsittely on näin ollen (toivottavasti) ymmärrettävämpi ja vähemmän matemaattinen, mutta kääntöpuolena on se, että Bézier-käyrät, jotka tämän artikkelin havainnollistuksissa nähdään eivät automaagisesti generoidu uudelleen kontrollipisteitä siirrettäessä. Huomaat alla olevia havainnollistuksia kokeilemalla mitä tarkoitan.

Seuraavassa artikkelissa luodaan havainnollistukset Bézier-käyrien matemaattisten lausekkeiden avulla, jonka myötä käyrät generoituvat/päivittyvät automaattisesti kontrollipisteitä siirreltäessä.

Ensimmäisen asteen Bézier-käyrä

Ensimmäisen asteen Bézier-käyrä tasossa on käytännössä jana kahden pisteen välillä; ei siis mitenkään älyttömän mielenkiintoinen sellaisenaan. Idea kuitenkin on tärkeä!

Alla olevassa havainnollistuksessa näkyvä piste P on koordinaateiltaan piste A, johon on lisätty t kertaa vektori AB. Jos siis $t = 0$ niin $P = A$ ja toisaalta jos $t = 1$ niin $P = B$. Muilla arvoilla $t\in ]0,1[$ käy niin, että piste P on pisteiden A ja B välisellä janalla/vektorilla. Parametri t siis on tavallaan prosentuaalinen siirtymä pisteestä A pisteeseen B.

HUOM! Saat pisteen P piirtämän jäljen pyyhittyä painamalla oikean ylänurkan ”ympyränuolinappia” eli resetointinappia.

Toisen asteen Bézier-käyrä

Toisen asteen Bézier-käyrä muodostetaan kolmen pisteen avulla: käyrä kulkee ”päätepisteiden” kautta ja kolmas piste on kontrollipiste. Pisteiden A ja B sekä pisteiden B ja C välillä tehdään samantyylinen interpolointi kuin edellä tehtiin.

Kontrollipisteen B avulla käyrää voidaan venyttää ”suuntaan tai toiseen”. Muodostuvan Bézier-käyrän reaaliaikaiseen muuttumiseen päästään varsinaisesti seuraavassa artikkelissa ja tässä vaiheessa käyrä on siis ”piirrettävä” parametrin t arvoa muuttelemalla.

  1. Kokeile siis muuttaa pisteiden A, B ja C sijaintia (Piste P tuottaa kuvaan hiukan ”roskaa”).
  2. Muuttele nyt parametrin t arvoa. (Oikean ylänurkan resetointinappi on käytettävissä)
  3. Valitse Näytä vektorit ja apupisteet -valinta, muuttele parametrin t arvoa ja pyri ymmärtämään idea siitä mitä tapahtuu.

Kolmannen asteen Bézier-käyrä

Kolmannen asteen Bézier-käyrä muodostetaan samaa ideaa jatkamalla niin, että käyrällä on päätepisteet ja kaksi kontrollipistettä edellä käytössä olleen yhden kontrollipisteen B sijaan.

  1. Tutki alla olevaa havainnollistusta ensin ilman vektorien ja apupisteiden näyttämistä:
  2. Siirtele pisteitä A, B, C ja D ja liikuttele sitten t-parametria nähdäksesi muodostuvan käyrän.
  3. Valitse tämän jälkeen Näytä vektorit ja apupisteet -valinta.
  4. Selvitä itsellesi miten 3. asteen Bézier-käyrä muodostuu.

Miten havainnollistukset on luotu?

Lyhyesti sanottuna, GeoGebra-ohjelmaa käyttäen. Sikäli kun luet tätä tietokoneella ja haluat nähdä havainnollistusten konstruktion vaihe vaiheelta, tee näin:

  1. Valitse haluamasi havainnollistuksen oikean ylänurkan checkbox apuelementtien näyttämiseksi.
  2. Klikkaa hiiren kakkospainikkeella havainnollistusta sen tyhjältä valkoiselta pohja-alueelta.
  3. Valitse Piirroksen vaihe -valinta (englanniksi Navigation Bar).
  4. Nyt voit selata läpi kuinka/missä järjestyksessä loin havainnollistuksen yksittäiset elementit.

Testaa ymmärryksesi

Kokeile luoda jokin kolmesta esitetystä havainnollistuksesta itse.

Vinkkinä sen verran, että mikäli luotuna on liukusäädin t (arvot rajattuna välille 0-1) ja vektori AB (jonka ohjelma nimeää oletuksena nimellä u) niin tällöin liukusäätimen t arvosta riippuvan interpolaatiopisteen luominen pisteiden A ja B välille tapahtuu kirjoittamalla alareunan syöttökenttään näin: A+t*u (ja painamalla Enter).

Minimissään tarvitset käyttää Liuku-työkalua (ABC-napin oikealla puolella), Vektori-työkalua (kolmannessa valikossa vasemmalta) ja alareunan syöttökenttää kuten edellä viitattiin.

Yhteenveto

Bézier-käyrät perustuvat idealtaan jokseenkin yksinkertaiseen graafiseen ideaan, jossa yhdistellään pisteitä ja janoilla/vektoreilla. Näiden rakennuspalikoiden avulla saadaan luotua työkalu, joka on hyödyllinen niin autoteollisuudessa, yleisesti tuotemuotoilussa, kuvan- ja videokäsittelyssä, peliteollisuudessa ja monella muulla alalla.

Tähän pitäs keksiä joku semmonen naseva ja henkeä nostattava lopetus, mutta koska oon vaan puujalkavitsejä viljelevä ja jokseenkin tylsä matemaatikko niin lopetan toteamalla näin: Olkoon päiväsi yhtä sulava kuin Bézier-käyrä konsanaan 🙂

Seuraavassa artikkelissa käsitellään tasossa asustavien Bézier-käyrien esittämistä matemaattisina lausekkeina piirtämistä hyödyntäen Ura-komentoa ja lopputuloksen tarkastelua.

Kolmannessa osassa tarkastellaan kahdessa ensimmäisessä osassa aikaan saadun esittämistä matemaattisina lausekkeina.

Jätä vastaus

XHTML: Voit käyttää näitä HTML-tageja: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>