Úvod do počítačové grafiky

Transkript

1 Úvod do počítačové grafiky

2 elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev a jejich odstínů

3 barva - vlastnost nějakého objektu barevný model (color model) systém pro reprezentaci jednotlivých barev je snaha popsat barvu co nejpřesněji popisují se základní barvy a míšení těchto základních barev do výsledného odstínu přidáním informací o okolních podmínkách (dopadající světlo) získáme barevný prostor (color space) základní rozdělení aditivní subtraktivní

4 pracuje se světelnými zdroji barev (např. monitor nebo projektor) 70 léta 19. století

5 model RGB (Red, Green, Blue) barvy jsou vytvářeny přidáváním barvy do černé (míchání vyzařovaného světla) přidáním všech složek vznikne bílá (svítíme barevnými reflektory) odpovídá fyziologii vnímání barev lidským okem aditivní barevné prostředí proto nepotřebuje vnější světlo (barvy na monitoru jsou zobrazovány i v naprosté tmě) barevné prostory CIE-XXX, HSV, HSL

6 každá barva je udána intenzitou tří základních komponent 256 (1 byte) úrovní pro každou základní barvu = barev ve 3 bytech nebo barev ve dvou bytech RGBA barevný pseudo prostor rozšíření o alfa kanál (A) alfa kanál informace o průhlednosti pixelu (alpha blending) obvykle je 256 úrovní průhlednosti (1 byte)

7 pracuje s odrazem bílého světla (tiskárny a všechno hmotné)

8 model CMY (Cyan tyrkysová, Magenta purpurová, Yellow žlutá) subtraktivní prostředí je prostředí, které odráží světlo, a proto potřebuje vnější zdroj světla CMY a RGB jsou komplementární tyrkysová pohlcuje červenou a odráží zelenou a modrou (ink) zelené + modré světlo = tyrkysové světlo (color) odpovídá 3 základním barvám (tonerům) používaným při tisku základní barvy jsou odečítány od bílé (čím více odebereme, tím více se blížíme černé) odebírání omezujeme odraz světla, smícháním základních barev vznikne černá

9 CMYK rozšíření o černou (black, Key klíčová) teoreticky postačují k vytvoření černé pouze tři barvy modelu CMY ve skutečnosti ale vzniká barva tmavě šedivá technické barvy (ink) obsahují pigment (mikroskopické částečky, které nelze dokonale promíchat) navíc je černá levnější, proto většina tiskových zařízení používá ještě čtvrtou černou barvu barevné prostory různé závisí na technologii výroby barvy, tisku a podobně univerzální např. Pantone

10 monitor, projektor vyzařuje světlo, oko pohlcuje světlo reálné objekty odráží světlo

11 kompletní sada barev něčeho (zařízení, obrázku, atd.) gamut je jedno z kritérií zobrazovacích schopností zařízení je dáno fyzikálním omezením zařízení každé zařízení má jiné schopnosti každé oko má jiné schopnosti

12

13

14 obraz má danou velikost mřížky každý bod mřížky má určenou barvu bod mřížky pixel (picture element) příklady: JPG, GIF, PNG, BMP, TIFF

15

16 geometrický popis obrazu elementární prvky: bod, úsečka, křivka, písmeno dají se vytvářet plochy, definovat barvy CAD aplikace příklady: CDR, AI, EPS, PDF (někdy)

17 Vektorový formát matematický popis neomezená přesnost (libovolné měřítko) pro tisk a zobrazení se musí konvertovat do bitmapy Rastrový formát ne všechno je možné geometricky popsat velké množství dat (viz BMP) změna velikosti je dost složitá operace s nejistým výsledkem pozor na ztrátovou kompresi!

18

19 počet bitů potřebných k uložení barvy pixelu větší barevná hloubka zvětšuje škálu použitelných barev a také paměťovou náročnost obrázku obrazy podle počtu použitých barev: monochromatické: 1 pixel = 1 bit (bílá nebo černá) stupně šedi: 1 pixel = 8 bitů (intenzita jedné barvy) s paletou (indexovaná barva): 1 pixel = 2, 4, 8, 16 bitů tabulka barev uložená v souboru s obrazem barva pixelu je zadána jako index do tabulky barev malá paměťová náročnost a možnost změny barev používá se do 256 barev pravé barvy: 1 pixel = 24 bitů (16 mil. barev) pravé barvy s částečnou průhledností: 1 pixel = 32 bitů

20 počet obrazových bodů na jednotku délky obrazu obvykle se měří v počtu obrazových bodů na palec (dots per inch, dpi) 1 palec = 2,54 cm příklad: obraz o rozměrech 1 1 palec s rozlišením 100 dpi obsahuje celkem obrazových bodů, stejný obraz s rozlišením 300 dpi obsahuje celkem obrazových bodů velikost obrazu na obrazovce je určena rozměry v obrazových bodech, velikostí a nastavením monitoru velikost obrazu (souboru) na disku je určena celkovým počtem obrazových bodů a jejich barevnou hloubkou

21

22 obyčejně rastrová vektorová grafika není nijak zvlášť podporovaná obtížná implementace, chybějící standardy SVG (Scalable Vector Graphics) Popis obrázku pomocí XML souboru: <rect width="400" height="400"/> <path fill="#0000ff" d="m , c , , , , , c9.5371, , , c , " /> Není podporováno Internet Explorerem (plug-in)

23 Pozor na přenášená data velikost obrázky je nutno optimalizovat obrázky designu kb obrázky s daty < 500 kb počet požadavků nepoužívat obrázky na prvky, které je možné vytvořit pomocí CSS (rámečky, linky) recyklovat pro celou aplikaci stačí jedna ikona smazat slučovat span.mce_bold {background-position: 0 0} span.mce_italic {background-position: -60px 0}

24 barvy používat střízlivě nepoužívat modrou barvu u malých objektů nebo tenkých čar (lid. oko není příliš citlivé na odstíny modré) na pozadí nepoužívat červenou a zelenou barvu (časté přeostřování únava oka) nekreslit vedle sebe syté barvy vzdálené ve spektru (náročné přeostřování oka) odstíny šedé neruší super bílá je trošku namodralá bílá

25 a další