Hogyan m ködik az emberi látás, az emberi képalkotás?
A vektorgrafika elmélete webprogramozó
• Az ember érzékelésében a szem (oculus) a legfontosabb érzékszerv. • A környezetünkb l érkez információk 90%-át szemünk közrem ködésével dolgozza fel agyunk.
A számítógépes grafika alapjai
A számítógépes grafika alapjai
• A számítógépes képfeldolgozás az elmúlt évtizedekben az informatika egyik legjelent sebb területévé n tte ki magát, hatalmas üzletággá fejl dött. • Ennek oka, hogy egy képpel sokkal több információt közölhetünk (pl. érzelmeket, hangulatokat), mint egy táblázat, egy szöveges adat segítségével.
• Az elmúlt években a grafikus hardver teljesítménye jelent sen növekedett, a teljesítmény/ár arány nagyban megugrott, a hardver költségei csökkentek. • A szabványosított szoftverek alkalmazása is segítette a számítógépes képfeldolgozó rendszerek gazdaságossá tételét.
A számítógépes grafika alapjai
ISO
• A vizuális elemek alkalmazása nem a XXI. század találmánya. • Már az skorban is voltak barlangrajzok. • A történelem során a vizuális információk jelent sége tovább n tt. • A grafika szó görög eredet , a vésni szóból származik (talán a szó eredetére magyarázat, hogy az ókorban a képeket leggyakrabban ezzel a technikával állították el ). • Manapság már mint a rajzm vészet összefoglaló elnevezését használjuk.
• Az ISO (International Standards Organization) nemzetközi szabványügyi szervezet szerint • a számítógépes grafika az adatkonvertálási eszközök és eljárások együttese a számítógép és a grafikus perifériák között.
1
Részterületek • generatív számítógépes grafikát, • képi információk számítógépes feldolgozását, • számítógépes képelemzést, alakfelismerést.
Magyar szóhasználat • A magyar szóhasználat valamelyest eltér az ISO szabványban megfogalmazottaktól. • Számítógépes grafika szó használata esetében általában a generatív számítógépes grafikát értik, a számítógépes képfeldolgozást és a képelemzést digitális képfeldolgozásnak nevezik.
A generatív számítógépes grafika
A digitális képfeldolgozás
• A generatív számítógépes grafika a képleírási adatok felhasználásával, algoritmusok segítségével állítja el a képeket. • A képleírás valamilyen szintaxis alapján történik. • Például: kör {...sugár 3...} • Tehát magyar terminológia használatával számítógépes grafika alatt a két- és háromdimenziós grafikus objektumok számítógép általi generálását, tárolását, feldolgozását és megjelenítését értjük.
• Digitális képfeldolgozás a képpel különböz eljárásokat, m veleteket végzünk azért, hogy a kép min sége javuljon. • Ekkor tehát a képet már nem állítjuk el , az már megvan (pl. egy digitális fényképez géppel készített fotó). • A képet raszterekre (pixelekre, képpontokra) bontjuk. • Ezt úgy képzeljük el, mint egy n×m-es mátrixot.
A digitális képfeldolgozás
Raszter grafika
• Egy mátrixelem egy pixel. • Egy pixel szürkeárnyalatos kép esetén egy szürkeárnyalatot tárol, színes kép esetén pedig egy színt tartalmaz. • A pixelek együttese építi fel a képet. • A képek esetében néha csak egy alakfelismerés szükséges (pl. rendszámtáblán a rendszám felismerése). • Az alakfelismerés és a képfeldolgozás elemeinek összességét nevezzük digitális képfeldolgozásnak.
• A raszter grafika a képeket képpontokból (pixelekb l) építi fel. • A raszter grafikus rendszerek a képet egységként, egészként kezelik. • Minden m velet, amit a képen végrehajtunk a teljes képre hatással van, a kép tartalma a teljes kép felülírásával módosítható.
2
Vektorgrafika
Vektorgrafikus adatbázis
• Ezzel szemben a vektorgrafikus rendszerek a képet geometriai objektumokból építik fel. • Az objektumok a képen belül önállóan léteznek, tárolásuk egy adatbázisban történik. • Ily módon vissza lehet keresni egy-egy objektumot, lehet magát az objektumot módosítani úgy, hogy csak maga az objektum változzon, a kép többi része változatlan maradjon. • Definiálni tudjuk a képet felépít elemek közötti hierarchiát (alá- fölérendeltség stb.), a strukturális kapcsolatokat.
• A különféle geometriai objektumokra vonatkozó adatokat – az objektum neve, azonosítója, – az alakzatot felépít geometriai alakzatok típusai, felépít alakzatok kapcsolatai az egyeden belül, – méretére, nagyságára vonatkozó adatok, – helyzetére vonatkozó adatok, – tulajdonságaira vonatkozó adatok, – megjelenítésére vonatkozó adatok
• a geometriai objektumok közötti strukturális kapcsolatokat – illeszkedések, – alárendeltségek, fölérendeltségek, – megjelenítés jelleg kapcsolatok, stb.
• az objektumokhoz tartozó mennyiségi és szervezési adatokat – csoportok, stb.
A számítógépes grafika jellemz felhasználási területei • • • • • • • • • •
Számítógéppel segített tervezés/gyártás Térképészet Prezentáció támogatása grafikával Folyamatok felügyelete grafikai rendszerek segítségével Számítógépes szimuláció Filmipar Szövegszerkesztés, kiadványkészítés Virtuális valóság Játékprogramok készítése Foterealisztikus képek
Számítógéppel segített tervezés/gyártás • Az autógyártásban, a közlekedési eszközök tervezésében, mérnöki tervezésben a CAD/CAM rendszereknek (Computer Aided Design and Manufacturing) nagy szerepe van. • Bonyolult tervezési feladatoknál, összetett elemek tervezésénél nagy szükség van a számítógép támogatására, mert: – a számítógép elvégzi az automatizált feladatokat a tervezés során, a mérnöki tervezésre több id marad, – módosítások sokkal könnyebben, gyorsabban elvégezhet k a tervezés folyamata során, – gyártás el tt lehet ség van szimuláció során tesztelni a terméket, – a tervezett eszköz valóságh megjelenítésére is lehet ség van, a megrendel ezen információ birtokában még módosíthat elképzelésein.
Térképészet • A számítógépes grafika rohamosan fejl területe a térképek informatikai eszközökkel történ feldolgozásán alapuló rendszerek (GIS - Geographical Information System). • Ezek vektoros vagy raszteres térképadatokat kapcsolnak össze különféle adatbázisokkal. • Néhány példa: – útvonaltervez k, – digitális térképek, – valós idej térképes nyilvántartások, például a ment szolgálatok irányítási rendszere, mely térképen mutatja, hogy egy ment autó éppen hol tartózkodik a városon belül.
3
Prezentáció támogatása grafikával • Prezentáció készítése során sokszor érdemes olyan grafikai elemeket alkalmazni, melyek képesek tendenciákat, folyamatokat, összefüggéseket vizuálisan megjeleníteni (diagramok, folyamatábrák). • A vizuális információkat az emberi érzékelés sokkal gyorsabban befogadja, értelmezi, mint a szöveges információkat, emellett esztétikai értéke is van.
Folyamatok felügyelete grafikai rendszerek segítségével • Bonyolultabb folyamatok számítógépes felügyelete során a számítógéphez különböz érzékel k vannak kapcsolva, melyek a rendszer aktuális állapotáról soksok információt küldenek a számítógépnek (atomer vek, közlekedésirányítás, üzemek gyártósorai). • Az emberi észlelés sokkal lassabb, mint a számítógépes adatfeldolgozás. • Az emberi tényez k (észlelés gyorsasága, figyelmetlenség, pontatlanság) kiküszöbölése sokkal biztonságosabbá teszi ezen rendszerek m ködését. • Az események felügyeletét az emberek grafikus felületeken végzik, a vizuális elemek plusz információhoz juttatják a rendszer m ködését felügyel személyzetet (pl. villogás, színek, hangok, figyelmeztet üzenetek).
Számítógépes szimuláció • Grafikával támogatott számítógépes szimulációt már régóta használnak (repül gép- és rhajó szimulátorok). • A valóságközeli szituációk reprodukálása nagy er forrást igényel (hardver és szoftver tekintetében egyaránt), ezért szélesebb felhasználói körben csak az utóbbi id ben terjedt el. • Néhány példa: – szimulátor alkalmazása gépjárm vezetés oktatásánál (széls séges útviszonyok szimulálása), – gyors folyamatok szimulálása, melyeket az ember nem tud észlelni (kémiai reakciók lépései, biológiai folyamatok), – túl lassú folyamatok szimulálása, ezáltal az id nek, mint tényez nek kiiktatása, – katonai alkalmazás (harci események szimulálása), – katasztrófahelyzetek szimulálása, – id járás-el rejelzés.
4
Filmipar • A filmkészítésben manapság nagyon gyakoriak az animációs filmek. • A számítógépes animációk a következ területeken alkalmazhatók például: – – – – – –
reklámfilmek készítése, science-fiction készítése, weblapok esztétikájának növelése, prezentáció alátámasztása, mesefilmek készítése, oktató filmek készítése stb.
Szövegszerkesztés, kiadványkészítés • Fontos szerepe van a számítógépes grafikának a képek készítésénél, logók tervezésénél, el állításánál, bet típusok tervezésénél.
Játékprogramok készítése • A számítógépes grafika egyik legprofitorientáltabb, leggyorsabban fejl ága. • A szórakoztató ipar ezen ága finanszírozza dönt többségében a grafikai kutatásokat, fejlesztéseket.
Virtuális valóság • Az emberi képzelet által megalkotott világok számítógépes modellezését virtuális valóságnak nevezzük. • Ezeket a mesterséges, háromdimenziós világokat az ember megtekintheti, felfedezheti. • A virtuális valóság és az ember között különféle perifériák kommunikálnak (Cyberglove, Head Mounted Display). • A jöv beni cél, hogy a virtuális valóság az ember összes érzékel rendszerére hatni tudjon.
Fotorealisztikus képek • Egy képet akkor nevezünk fotorealisztikusnak, ha a kép számítógépes grafikával készült, mégis nehezen tudjuk megkülönböztetni a fényképt l.
5
A vektorgrafika alapjai • A vektorgrafikus programok a képeket geometriai alakzatokból építik fel. • A síkbeli geometriai alakzatok mindegyike felépíthet szakaszok, és görbék segítségével. • A vektorgrafikus programok a görbék rajzolása során görbemodellezési algoritmusokat használnak, melyeknek meg kell felelniük a gyakorlat diktálta követelményeknek
Követelmények
Interpoláció
• az algoritmusokat egységesen kell megvalósítani, lehet leg minél jobb hatékonysággal, • az algoritmusoknak tudniuk kell el re megadott pontok alapján az adott pontokon áthaladó görbéket generálni, illetve adott pontokat minél jobban közelít görbéket el állítani, • az eljárások során alkalmazott függvények lehet leg egyszer en kiszámolhatóak legyenek, az egységes megvalósítás miatt ezeket lehet leg azonos függvénycsaládból válassza az algoritmus, • a felhasználóval interaktív kapcsolatot kell tartani, ezért:
• A görbék rajzolása során legtöbbször olyan pontokat adunk meg, melyen az adott görbének át kell haladnia. • Azon görbék kiválasztása, melyek áthaladnak a rögzített pontokon egy interpolációs feladat megoldása. • A görbét ilyenkor interpolációs görbének nevezzük, a rögzített pontokat pedig kontrollpontoknak vagy tartópontoknak hívjuk.
– a felületek és görbék transzformálása relatíve egyszer legyen, – lokálisan változtathatónak kell lennie a görbének, azaz adott pontban megváltoztatva a görbét a változás csak a pont egy környezetét érintheti.
Approximáció • A görbék el állításának másik módja az approximáció. • Ekkor egy görbecsaládból azokat a görbéket keressük, melyek a lehet legjobban megközelítik az általunk el re rögzített pontokat.
6
• Az interpolációs és approximációs eljárásokkal végtelen sok görbét kapunk. • Az egyszer , gyors számíthatóság végett a gyakorlatban csak a polinomokat vesszük figyelembe. • Kérdéses, hogy hányadfokú polinomokat használjunk a görbék el állítása során. • Nyilvánvaló, hogy minél kisebb a polinom fokszáma, annál kevesebb m velettel számolhatók a helyettesítési értékek adott pontokban. • Túl alacsony fokszámú polinomokat használva viszont bonyolultabb görbéket nem lehet el állítani. • A síkbeli görbék modellezésére a másodfokú polinomok már elégségesek.
Az interpolációval vagy approximációval keletkezett görbéket el állítása • az összes interpolálandó/approximálandó pontot figyelembe vesszük vagy • az interpolálandó/approximálandó görbét egymáshoz folyamatosan illeszked görbékb l állítjuk el .
I. a két polinomívdarabnak törése van a csatlakozási pontban
Spline • Az utóbbi években az utóbbi módszer terjedt el, az így el állított görbét nevezzük spline-nak. • Tehát a spline-ok polinomívdarabokból álló görbék.
II. a két polinomnak a csatlakozási pontban megegyezik az érint je (a polinomok els deriváltja a csatlakozási pontban egyenl ),
7
III. a két polinomnak a csatlakozási pontban az érint je és a görbülete is megegyezik (a polinomok els és második deriváltja is megegyezik a csatlakozási pontban)
IV. a két polinom a csatlakozási pontban azonos érint egyenessel rendelkezik, de nem azonosak a deriváltjaik (a derivált el jele és nagysága is különbözhet)
Bézier görbék
A Bézier ívek tulajdonságai
• Vannak speciális görbék, melyek nagyon hasznos tulajdonságokkal rendelkeznek. • A harmadfokú Bézier görbékre jellemz , hogy a kontrollpontjaik közül kett a görbén található, kett pedig a végpontokba húzott érint kön van. • Bézier íveket egymáshoz csatlakoztatva Bézier ívet kapunk. • Két Bézier ív csatlakozása III. típusú csatlakozás.
• Az ív mindig a kontrollpontok által meghatározott négyszög belsejében halad • Transzformáció során a görbe tulajdonságai nem változnak, így elég a kontrollpontokat transzformálni. • A görbe egy kontrollpontját megváltoztatva a teljes görbe változik.
B-spline-ok
A raszteres képek el nyei
• A görbék egy másik speciális csoportja a Bspline görbék. • A kontrollpontok által meghatározott poligonhoz a B-spline-ok sokkal jobban simulnak, mint a Bézier görbék. • B-spline-ok kontrollpontjának változtatása esetében a kontrollpont csak egy környezete változik, a teljes görbe nem. • Emellett a B-spline-ok rendelkeznek a Bézier görbék minden más tulajdonságával.
• képpontonkénti megjelenítést alkalmazó output egységek a raszteres képeket tökéletesen vissza tudják adni (pl. nyomtató, monitor), • a valóság reprezentálásához rengeteg eszköz van, a képek sokkal valóságh bbek.
8
A raszteres képek hátrányai • korlátozott a képpontok ábrázolása, • a görbék csak szakaszosan megjeleníthet k, • nagy a fájlok mérete, f leg színes képek esetén.
A vektorgrafikák hátrányai • nem alkalmasak összetett, nagyon finom, részlet gazdag ábrázolásra. • Vektorgrafikát akkor érdemes használni, ha sok a képben a vonalakon, görbéken alapuló információ
A vektorgrafikák el nyei • a raszteres képeknél kisebb a fájlméret, • nagyon pontos az ábrázolás, függetlenek a felbontástól, • átméretezés nem jár adatvesztéssel.
• A képen végzett transzformációk során egyértelm en látszik a két modell közötti különbség. • A raszteres kép nagyítása során a kép torzul, hiszen lesznek olyan pixelek a nagyított képben, melyek az eredeti képben nem szerepeltek. • Ezen új képpontok színének meghatározása különböz algoritmusok segítségével történik a képpontok környezetének figyelembevételével.
9
Röviden az SVG-r l • Az SVG (Scalable Vektor Graphics) egy két dimenziós grafikák készítésére szolgáló platform. • Két részb l áll: – egy XML alapú állományformátumból – és az ezt megjelenít alkalmazásból.
• Egy SVG dokumentum vektorgrafikus alakzatok leírását, szövegeket, beágyazott raszteres képeket tartalmaz különböz megjelenítési stílusok hozzárendelésével. • Támogatja a scriptek használatát (ECMAScript) és az animációkat egyaránt.
Példa egy SVG fájlra • <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
SVG • Az SVG szabvány szerint grafikai objektumokként vonalakat, köröket, ellipsziseket, sokszögeket, törött vonalakat definiálhatunk. • Ezekhez hozzárendelhetünk vonalstílusokat (szín, vastagság, átlátszóság, vonalvégz dés, szaggatottság), illetve meghatározhatjuk az alakzatok kitöltését (szín, átlátszóság). • Definiálhatjuk a mértékegységeinket, beállíthatjuk a rajzlapot, megadhatunk koordinátarendszereket. • Alakzatainkat csoportosíthatjuk, egymásba ágyazhatjuk.
SVG • Az alakzatokkal különböz transzformációkat végezhetünk (eltolás, forgatás, skálázás, tengelyek döntése), a transzformációt mátrixszal is megadhatjuk. • Lehet ségünk van görbék definiálására is (egyenes szakaszok, ellipszisívek, Bézier-görbék). • Alkalmazhatunk CSS stíluslapokat, készíthetünk animációkat. • Scripteket hozhatunk létre, raszteres képeket ágyazhatunk objektumainkba. Vághatjuk alakzatainkat, maszkolhatunk, alkalmazhatunk sz ket (pl. árnyék létrehozására). • Ábráinkat beépíthetjük HTML dokumentumokba.
SVG • Az SVG-t sok üzleti területen használják, mint például a web-grafikáknál, animációknál, nyomtatásra szánt dokumentumoknál, mobil eszközöknél, nagy felbontású grafikák megjelenítésénél. • Az SVG egy jogdíjmentes, nyílt szabvány, amit a W3C fejlesztett ki. • Nagy támogatottsága van az iparban is: az SVG-t alkalmazza az Adobe, Agfa, Apple, Canon, Corel, Ericcson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharpot, Sun Microsystem és még sok más cég is. • Az SVG számos sikeres szabványra épít, mint az XML leíró nyelvre - így az SVG grafikák könnyen létrehozható szöveges dokumentumok, - JPG, PNG képformátumokra, DOM-ra, SMIL-re és a CSS-re.
10
SVG
SVG
• Az SVG fejlesztését 1998-ban kezdte el a W3C. • Az SVG 1.0 szabvány 2001-ben vált W3C ajánlássá, a legfrissebb 1.1-es változat 2003 júniusától ajánlás. • Ezzel egy id ben az 1.1-es változathoz kiadtak két egyszer sített változatot:
• Az SVG támogatottsága nagyon vegyes. • Vannak böngész programok, amelyek csak külön telepítend beépül programokkal tudnak megjeleníteni SVG tartalmakat. • A Mozilla Firefox 1.5 verziójától kezdve beépítetten tartalmazza az SVG fájlokat kezel modult. • A legtöbb böngész programot fejleszt cég is igyekszik az SVG támogatás beépítésére a böngész programjába (pl. Opera, Amaya, Apple Safari, IE 7 stb.).
– az SVG Tiny (SVGT) els sorban gyengébb képesség telefonokra készült, – az SVG Basic (SVGB) a kézi számítógépek és a nagyobb teljesítmény mobil eszközök igényeit elégíti ki.
• Már folyamatban van az 1.2-es szabvány kidolgozása is.
SVG • A legtöbb nagy vektorgrafikus szerkeszt program, mint például az Adobe Illustrator vagy éppen a CorelDraw rendelkezik SVG importáló és exportáló modullal. • Az Inkscape vektorgrafikus szerkeszt program az SVG szabványt használja. • A Sopodi, mely ennek el dje szintén az SVG formátumon alapul. • A Gimp program képes SVG fájlok beolvasására és mentésére. • Az SVGMaker program az Office programok dokumentumaiból képes SVG fájlokat készíteni.
VÉGE
11
