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 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. A számítógépes grafika alapjai 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 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. ISO 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 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. A digitális képfeldolgozás 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 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. Raszter grafika Araszter 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 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. Vektorgrafikus adatbázis 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. 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. 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. 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 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 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. Interpoláció 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. 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. 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. I. a két polinomívdarabnak törése van a csatlakozási pontban 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 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. A Bézier ívek tulajdonságai 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 görbék egy másik speciális csoportja a B- spline 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. A raszteres képek el nyei 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 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 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 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 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg1 1.dtd"> <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <rect x="20" y="20" width="120" height="180"/> </svg> 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 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 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 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.). 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