Hogyan m ködik az emberi látás,
az emberi képalkotás?
A vektorgrafika elmélete
webprogramozó
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
• 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 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
• 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.
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.
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
• 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.
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 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.
Raszter grafika
• 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
• 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 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
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.
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 sok-
sok 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 Fotorealisztikus képek

• 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.
• 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, • A görbék rajzolása során legtöbbször olyan
lehet leg minél jobb hatékonysággal,
pontokat adunk meg, melyen az adott görbének
• az algoritmusoknak tudniuk kell el re megadott pontok
alapján az adott pontokon áthaladó görbéket generálni, át kell haladnia.
illetve adott pontokat minél jobban közelít görbéket • Azon görbék kiválasztása, melyek áthaladnak a
el állítani,
rögzített pontokon egy interpolációs feladat
• az eljárások során alkalmazott függvények lehet leg
egyszer en kiszámolhatóak legyenek, az egységes megoldása.
megvalósítás miatt ezeket lehet leg azonos • A görbét ilyenkor interpolációs görbének
függvénycsaládból válassza az algoritmus, nevezzük, a rögzített pontokat pedig
• a felhasználóval interaktív kapcsolatot kell tartani, ezért:
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ó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
• 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.
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)
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.
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.
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)
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.
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 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.
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.
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 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.
VÉGE
• 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.

11