A számítógépes grafika alapjai

2009.11.18.

A számítógépes grafika alapjai ELTE IK Helfenbein Henrik [email protected]

Grafika – kép keletkezése A számítógépes grafikák, képek létrehozása:

egy perifériával egy képet „digitalizálunk”

lapolvasó (scanner), digitális fényképezıgép, video digitalizáló kártya … utána ezt módosíthatjuk is (képszerkesztı program)

számítógép segítségével, rajzolóprogramok felhasználásával új képet alkotunk A számítógépes grafika alapjai

2

1

2009.11.18.

Grafika – képek fajtái A számítógépes képeket két csoportba osztjuk aszerint, hogy milyen módon állítja elı és tárolja a számítógép: pixelgrafikus (bittérképes) képek vektorgrafikus képek Érdekes probléma még a színek leírása: színelmélet (több modell is létezik) A számítógépes grafika alapjai

3

PIXELGRAFIKA

A számítógépes grafika alapjai

4

2

2009.11.18.

Pixelgrafikus kép jellemzıi - 1 Pixelgrafikus (vagy másként bittérképes) kép: a kép egy rácsháló pontjaiból (pixelekbıl) áll képpontonként a

pont színe

továbbá tárolódnak egyéb információk is, pl.: a

kép színmélysége (egy pixel színét hány biten tároljuk; pl.: 24 bit (ami 3 bájt) ~ 16.7 millió szín) a kép mérete (oszlop x sor) a kép felbontása (ppi- „pixel per inch” – egy inchen belüli képpontok száma) A számítógépes grafika alapjai

5

Pixelgrafikus kép jellemzıi - 2

Tárolása egyszerő A kicsinyítéskor, nagyításkor vagy egyéb módosításkor viszont minıségük jelentısen romolhat A képen található rajz csak képpontonként módosítható A fájl mérete a kép méretétıl, felbontásától és színmélységétıl függ Felbontás 2-szerezése a méretet 4-szerezi! (négyzetes összefüggés ~ „terület”) A számítógépes grafika alapjai

6

3

2009.11.18.

Pixelgrafikus kép – egy kis számolás Mekkora lesz egy képernyı fotója? (PrintScreen) A képernyı felbontása 1024x768 A képpontok száma 1024x768 = 786 432 (Nincs is 1 megapixel! < fényképezıgép) Színmélység legyen 3 bájt (Windows 2 és 4) Várható tömörítetlen fájlméret kb. ~ 1024 x 768 x 3 ~ 2,36 MB ~ 2,25 MiB A számítógépes grafika alapjai

7

Pixelgrafikus képek alkalmazása

Elsısorban a fényképek és ábrák tárolására A formátum hátránya, hogy a kicsinyítés vagy nagyítás mőveletei mindig torzítással járnak „kockásodás”

Nehézségekbe ütközünk, ha az ilyen típusú állományokon bizonyos mőveleteket szeretnénk végezni pl. kijelölés („objektum” határa?) Jellemzı képformátumok: BMP, PCX, GIF, JPG, PNG, TIF,… A számítógépes grafika alapjai

8

4

2009.11.18.

Pixelgrafikus képek hátrányai

A fényképen a taxi alakjának kijelölése igen nehézkes Erıs nagyításban sem tudjuk pontosan elkülöníteni a jármővet a hátterétıl („objektum” határa?)


9

Pixelgrafikus képek tárolása -1

Az állományok igen nagy méretőek, minden egyes képpontról el kell tárolni a rá jellemzı színinformációt A

képállományokat méretezzük

A

Pl. egy „bélyegkép” a weblapra kevesebb képpontot (pixelt) igényel

képállományokat tömörítjük

Veszteséges tömörítés (pl.: képernyırıl fotó BMP vagy JPG?) Veszteségmentes tömörítés (lehet próbálkozni) A számítógépes grafika alapjai

10

5

2009.11.18.

Pixelgrafikus képek tárolása -2 A pixelgrafikus formátumban az adott kép minden egyes képpontjának színinformációja eltárolásra kerül Raszter – képpontok színeinek tárolása Néhány program (itt is széles a skála)

Photoshop (Adobe) Gimp Paint


11

Belsı veszteségmentes tömörítés A tömörítés eredményeképpen kapott állományból maradéktalanul visszaáll az „eredeti” , digitalizált kép Például a BMP, GIF vagy PNG formátumú képek


12

6

2009.11.18.

Néhány veszteségmentes formátum: BMP BMP = Bitmap A Windows és az OS/2 rendszerekhez kifejlesztett formátum

1, 8, 16, 24 bites Jellemzıen tömörítés nélkül, esetleg tömörítéssel tárol

Ikonok, programelemek, régebben képek


13

Néhány veszteségmentes formátum: GIF

GIF = Compuserve Graphics Interchange Format 1-8 bit, maximum 256 szín GIF87a ÁTLÁTSZÓ GIF89a

a paletta egyik szabadon választott színe már átlátszó is lehet Megjelentek az azóta is népszerő apró, mozgó rajzocskák, az animált GIF-ek GIF-animációt szerkesztı programok - egyszerő


14

7

2009.11.18.

Néhány veszteségmentes formátum: PNG

PNG = Portable Network Graphics 1991, a GIF „utódja” veszteségmentes tömörítési eljárása hasonló, vagy jobb a GIF-nél színmélység 48 bitig (6 bájt!) támogatja az átlátszóságot fokozatos megjelenítés (weboldalak) elnagyoltan (kis felbontásban) a kép tartalma, majd a részletgazdagság a letöltés folyamán animáció:: MNG vagy APNG A számítógépes grafika alapjai

15

Néhány veszteségmentes formátum: RAW és TIFF

RAW = Raw Binary Data

professzionális fényképezıgépek lehetıvé teszik, hogy a képérzékelıbıl nyert nyers adatokat a szükséges kiegészítı információkkal együtt veszteségmentesen tömörítsük a fájlok szerkezete igen gyakran változik, nem csupán gyártónként, de igen sokszor típusonként is egyfajta "digitális negatív", mivel a fényképezıgép nem végez rajta semmiféle képfeldolgozási mőveletet Pl. zajszőrés, élesítés, fehéregyensúly

TIFF = Tagged Image File Format

ipari szabvánnyá vált képformátum a TIFF 6.0 gyakorlatilag napjaink vezetı nyomda-formátuma lett lapolvasók (szkenner) A számítógépes grafika alapjai

16

8

2009.11.18.

Néhány veszteséges formátum: JPG vagy másként JPEG

JPEG = Joint Photographic Experts Group File Interchange Format JPEG, továbbfejlesztése JPEG-2000 veszteséggel ugyan, de igen jó minıségben tömörít 10-100x kisebb méretben még élvezhetı

állítható a tömörítés „mértéke” (minıség<->méret)

kis fájlmérete miatt az interneten is, bemutatóban is kedvelt formátum fényképek, rajzok tárolására való grafikonok és egyéb hirtelen színátmenető ábrák tárolására veszteségmentes tömörítéső formátum ajánlott (például PNG, GIF)

nem képpontokat tárolnak le, hanem a képet transzformálják A számítógépes grafika alapjai

17

Példa JPG tömörítésre, állítható a „mérték” Balról jobbra haladva, lépcsızetesen egyre veszteségesebb JPEG tömörítést használva.


18

9

2009.11.18.

Pixelgrafikus képek szerkesztése – a rétegek

Egyszerő programok (Paint) egy réteget kezelnek (úgy képzeljük el, mint egy „papírlap”)

Haladóbbak többet (GIMP, Photoshop) Képzeljük el, mint több „papírlap”, fólia egymáson Vannak átlátszó részek Keverés Összeadás, kivonás, szorzás, takarás stb.

Szoftver

függı fájlformátum késıbbi szerkesztésre Az „összeolvasztott” kép exportálható


19

Rétegek - példa


20

10

2009.11.18.

Photoshop


21

VEKTORGRAFIKA


22

11

2009.11.18.

Vektorgrafikus kép jellemzıi -1

A kép elkészítésének módját tárolják a fájlban matematikai képletek segítségével, melyeket Bézier-görbéknek neveznek A képeket alkotó objektumok csomópontokból, ezeket összekötı görbékbıl és a görbékhez húzható érintı szakaszokból állnak össze Ezek

bármekkora méretben ugyanolyan minıségben jelennek meg. Hátránya, hogy a képek árnyalatait, átmeneteit is így tárolja A számítógépes grafika alapjai

23

Vektorgrafikus kép jellemzıi -2 A fájl mérete nem a kép méretétıl és színmélységétıl függ elsıdlegesen, hanem a kép bonyolultságától (csomópontok, objektumok számától). Jellemzı képformátumok:

EPS,

CDR, CMX, GEM … SVG (weboldalak) MS Office beágyazott rajzeszközei is alkalmazzák A számítógépes grafika alapjai

24

12

2009.11.18.

Vektorgrafikus kép digitális tárolása

A vektorgrafikus formátumban a képet alkotó objektumok, vagy rajzelemek tulajdonságai szerepelnek az állományban Geometriai

alakzatok, minták, színátmenetek

tárolása

Egy kép három nagyításban


25

Vektorgrafikus formátumok: SVG A weben használatos vektorgrafikus formátumok közül az egyik legnépszerőbb SVG - Scalable Vector Graphics XML-alapú, kétdimenziós vektorgrafikák leírására szolgáló nyelv használatához nem feltétlenül kell SVG rajzoló program, csak megjelenítı a böngészıkbe beépülı ingyenes program SVG

Viewer

szöveges állomány létrehozásával is tudunk ábrákat elıállítani SVG nyelven A számítógépes grafika alapjai

26

13

2009.11.18.

SVG Inscape alatt


27

Vektorgrafika és pixelgrafika 4-szeres nagyítása


28

14

2009.11.18.

Vektorgrafikus formátumok: CDR CDR - a CorelDRAW vektoros fájlformátuma

Tartalmazhat beillesztett bittérképes objektumokat is A CorelDraw hasonlóan elterjedt vektorgrafikus programként, mint a PhotoShop fényképszerkesztıként


29

SZÍNELMÉLET


30

15

2009.11.18.

A színkeverés szabályai a Grassmann-féle törvények szerint I. A keverékfény színezetét az összetevık szabják meg II. Bármely színinger elıállítható három szín additív keverésével, ezért minden színezet megadásának szükséges és elégséges feltétele három független színezeti jellemzı megadása. III. A színérzet a világossággal nem változik A számítógépes grafika alapjai

31

Színelmélet - észrevételek

A színek érzete a fény látható tartományának különbözı hullámhosszú fénysugaraiból alakul ki a szemünkben. A látható tartomány minden színét tartalmazó fényt fehérnek, ezek teljes hiányát feketének látjuk. A színek jellemzıit matematikai úton különbözı színezési modellek segítségével írhatjuk le.


32

16

2009.11.18.

Színelmélet az elektromágneses színkép

Mivel a szem receptorai a vörös, zöld és kék színre érzékenyek, ezért e három elemi színösszetevıkombinációk beállításával az emberi agyban olyan színérzet kelthetı, amely a színkeverékhez legközelebbi színre való interpolációval alakul ki.


33

Színelmélet – a HSB színkeverési modell

A HSB modell esetében a színeknek három összetevıjét különböztetjük meg: árnyalat (Hue), telítettség (Saturation), fényerı (Brightness).

az árnyalat a fény hullámhossza, a telítettség a fény tisztasága, a fényerı pedig a fény relatív világosságasötétsége. A számítógépes grafika alapjai

34

17

2009.11.18.

Színelmélet - az RGB színkeverési modell Más néven additív (összeadó) színkeverés.

A három alapszín: vörös (Red), zöld (Green) és kék (Blue). Additív színkeverés esetén ebbıl a három alapszínbıl keverhetık ki a színek a fehértıl a feketéig. Az RGB modellel a látható színtartomány nagy része lefedhetı, a módszer a kibocsátott fény tulajdonságain alapul. Lényege, hogy a különbözı színes fények egymással összeadva újabb színeket adnak, vagyis az alapszínek összeadásával állítjuk elı ıket. Alkalmazás pl.: monitorok. A számítógépes grafika alapjai

35

Színelmélet - a CMYK színkeverési modell Más néven szubtraktív (kivonó) színkeverés.

CMYK - Cián bíbor sárga fekete Cyan-cián, Magenta-bíbor, Yellow-sárga, Black-fekete A CMYK módszer az elnyelt, illetve visszavert fény tulajdonságain alapul. A nyomdászatban az a módszer terjedt el, hogy egymásra tesznek négy átlátszó, színes (Cyan-cián, Magenta-bíbor, Yellow-sárga, Black-fekete) „fóliát”, amibıl kialakul azok keveréke. Alkalmazás pl.: tintasugaras nyomtatók.


36

18

2009.11.18.

HSL, RGB, CMYK


37

KÖSZÖNÖM A FIGYELMET!


38

19

A számítógépes grafika alapjai

Recommend Documents