Aplikační programové vybavení Přednáška se zabývá základními pojmy a koncepty z oblasti počítačové grafiky. Úvod do počítačové grafiky

Elektromagnetické záření Světlo, resp. jeho barva je jen velmi malá část elektromagnetického záření, které nás obklopuje. 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ů

Barevné modely 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í Barvu nelze popsat nijak blíže, je to prostě vlastnost, kterou nějak vnímáme a jaksi odpovídá vlnové délce záření. Aby bylo možné barvy jednoznačně popisovat, vznikly barevné modely. Koncept barevného prostoru je velmi důležitý, protože na okolních podmínkách velmi záleží, jak člověk barvu vnímá. To je možné si ověřit na vlastní kůži na párty, kde je ultrafialová zářivka :)

Aditivní barevný model pracuje se světelnými zdroji barev (např. monitor nebo projektor) 70 léta 19. století Obrázek: http://en.wikipedia.org/wiki/File:AdditiveColor.svg RGB model obsahuje tři základní barvy: červenou, modrou a zelenou. Jejich míšením vznikají barvy další – v průsečíku je bílá, která vznikne tak, že každá složka je nastavena na maximální intenzitu. V levém průsečíku je žlutá, která vznikne tak, že složky R a G mají maximální intenzitu a složka B má intenzitu 0.

Aditivní barevný model 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 Model RGB je velmi starý, vznikl jako reprezentace fyziologie lidského oka, které má buňky citlivé na červenou, modrou a zelenou barvu a ze signálů z těchto receptorů skládá výslednou barvu, kterou vnímáme. Pokud seženete temnou místnost a tři reflektory tří základních barev, můžete si míchání barev v modelu RGB sami vyzkoušet, skutečně to funguje tak, jak je to nakreslené. Odpověď na otázku „proč používáme zrovna RGB model“ je tedy – protože je to přirozené.

Model RGB každá barva je udána intenzitou tří základních komponent 256 (1 byte) úrovní pro každou základní barvu 2563 = 16 777 216 barev ve 3 bytech nebo 65536 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) Model RGB je mnohem starší než počítače, pro jeho reprezentaci v počítačové grafice se používá principu, že každá složka má 0 – X úrovní intenzity. V reálném světě je těchto úrovní nekonečně mnoho (jedná se o spojitý analogový signál, tj. mezi 0 a 100% je nekonečně mnoho poloh). To vede v principu k degradaci některých barev, které nelze na počítači reprezentovat. Dnes nejrozšířenější je použití 256 úrovní pro každou složku, které dohromady vede k 16 mil. barev, což je zdánlivě více, než je schopné rozeznat lidské oko.

Barevná hloubka 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ů RGBA nemá s barevným prostorem nic společného – je to jen nevhodný (ale bohužel používaný) název. Informace o průhlednosti se připojuje prostě proto, že je to vhodné s ohledem na zabrané místo. Čtyři bajty lze ukládat efektivněji než 3 bajty a jeden bajt zvlášť. Indexovaná barva znamená, že obrázek má zvlášť uloženou paletu barev (tedy výčet všech barev použitých v obrázku) a v obrázku samotném jsou pouze čísla těchto barev. Barva fyzicky uložená v obrázku tedy není zadaná jako kombinace tří složek. Praktická výhoda je v tom, že se dá snadno jedna barva vyměnit za jinou v celém obrázku.

Subtraktivní barevný model pracuje s odrazem bílého světla (tiskárny a všechno hmotné) Obrázek: http://upload.wikimedia.org/wikipedia/commons/1/19/SubtractiveColor.svg Subtraktivní barevný model pracuje s pasivním materiálem – tj. s něčím, co samo o sobě nezáří. To je většina věcí okolo nás. Barva na těchto předmětech funguje v podstatě obráceně. Pokud je něco zelené, znamená to, že to pohlcuje všechny složky viditelného záření (které na předmět dopadá) kromě zelené, kterou odrazí a tu vidí naše oko. Subtraktivní barevný model používá barvy: žlutá (Yellow), tyrkysová (Cyan), Magenta. Tyto barvy už jste mohli zaregistrovat v barevném modelu RGB a není to náhoda. Jsou to právě ty barvy, které vzniknou kombinací vždy dvou složek modelu RGB. Vpravo je rozšíření levého obrázku, které ilustruje jak se získávají další barvy ze 3 základních barev.

Subtraktivní barevný model 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í (primární) barvy jsou odečítány od bílé (čím více „odebereme“, tím více se blížíme černé) a vznikají barvy sekundární „odebírání“ – omezujeme odraz světla, smícháním základních barev vznikne černá Model CMY je odvozen z modelu RGB a to velice chytře. Zaprvé funguje obráceně, tj. základem je 100% intenzita všech složek (bílé světlo, resp. předmět, který nepohlcuje žádnou složku záření) a odečítáním barev CMY vznikají barvy další. Protože barvy CMY jsou snadno odvoditelné z modelu RGB, je možné mezi barvu přepočítávat z RGB do CMY a naopak.

Model CMY 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 Barevný model CMY si však nemůžete vyzkoušet doma. Zaprvé neseženete ideální podkladový materiál, který nepohlcuje žádnou složku ideálního světla. Za druhé, mícháním skutečných barev (třeba vodovek) víceméně nikdy nedostanete tu ideální barvu, která má vyjít. Důvodem je to, že reálné barvy, které používáme pro tisk, malování a natírání jsou barvy pigmentové. To znamená, že v nějakém nosiči (tekutině) je velmi jemně rozmletý prášek (pigment, barvivo). Při smíchání barev se smíchají zrnka prášku, ale pořád to budou zrnka dvou různě barevných prášků. Zrnka mají konečnou velikost (nejsou nekonečně malé) a proto i možnosti míchání jsou konečné a výsledek je podobný teoretickému výpočtu, ale není dokonale stejný. Barevné prostory tedy závisí vždy na výrobci barvy, na technologii výroby a na spoustě dalších okolností. Univerzální barevný prostor Pantone je sice univerzální a podporují jej víceméně všichni výrobci barev. Vždy však podporují pouze některé odstíny barev (ty, které se jim daří vyrobit). Odpověď na otázku „proč používáme barevný model CMY“ je tedy „protože je subtraktivní a dobře se počítá z RGB“

Proč máme více barevných modelů? monitor, projektor vyzařuje světlo, oko pohlcuje světlo reálné objekty odráží světlo http://www.dangries.com/Flash/RGB/eye.html Odpověď na otázku „proč máme dva barevné modely?“ je „protože máme okolo sebe věci, které svítí i věci, které nesvítí“

Gamut 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 Gamut je kompletní sada barev, které je (monitor, tiskárna, oko, scanner) schopné (zobrazit, rozpoznat).

Obrázek: http://designgraphics.ncsu.edu/pages/watsonb/teaching/notes/pics/gamut.gif http://www.normankoren.com/Sachs_gamut_chart_2_640.jpg Gamut se zobrazuje v CIE XYZ barevném diagramu, což je 3D diagram. Proto je tedy viditelné spektrum jen část diagramu, protože to je ve skutečnosti nějaký prostorový útvar. A proto se zdá, že je trojúhelník RGB na obrázku vlevo nerovnostranný, protože je ve nakreslený na zakřivené ploše (zhruba na ragbyovém míči). Ve skutečnosti je trojúhelník RGB rovnostranný, protože každá složka má stejné množství úrovní (0 – 256). Detaily diagramu a CIE XYT nejsou v tuto chvíli podstatné. Podstatné je, že schématu vyplývá, že model RGB nepostihuje celé viditelné záření. Což je na první pohled zvláštní, protože RGB umí reprezentovat 16 milionů barev, zatímco lidské oko jich rozpozná jen 10 milionů. Bohužel jsou ti jiné barvy. Konkrétně RGB umí reprezentovat spoustu odstínů v oblasti červené a modré, které člověk nerozpozná od sebe (zdají se mu stejné) a naopak člověk od sebe rozpozná mnoho odstínů zelené, které neumí reprezentovat model RGB. Praktickým důsledkem je to, že fotky z přírody nevypadají na počítači nikdy tak dobře jako ve skutečnosti. Podle evolučních biologů za to může to, že člověk strávil několik desítek tisíc let v lese. Druhým praktickým důsledkem je to, vznikla celá řada alternativních modelů k RGB, které se snaží tento problém více, či méně úspěšně řešit (viz obrázek vlevo). Třetím praktickým důsledkem je to, že při převodu barev mezi barevnými modely zůstanou zachované pouze ty barvy, které jsou společné oběma modelům. Tj. například při pořízení fotografie, jejím upravení na počítači a vytisknutí, dojde minimálně ke dvěma převodům barevných modelů.

Rastrová (bitmapová) data 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 Obrázek: http://www.iconfinder.net/icondetails/34218/128/ Rastrové obrazy jsou prakticky všechna moderní zobrazovací zařízení – skládají ze z mřížky prvků, které jsou schopné měnit barvu. Rastrové obrazy jsou také všechny běžné tisky, i tiskárna tiskne tak, že na určitém místě na papíře udělá kapku některé ze základních barev. Prakticky si to můžete prohlédnout pod mikroskopem, nebo se podívat zblízka na billboard. Rastrová data lze použít k reprezentaci jakéhokoliv obrazu.

Vektorová data 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) Vektorová data lze z principu použít jen k reprezentaci geometrických obrazů. Typickými aplikacemi jsou CAD (computer aided design) aplikace, tedy různé druhy výkresů. Reprezentovat pomocí vektorového obrazu fotografii stromu je sice teoreticky možné, ale prakticky nerealizovatelné a k ničemu.

Rastrová vs. vektorová grafika 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! Aby bylo možné vektorový obraz vytisknout nebo zobrazit, musí se téměř vždy převést do obrazu rastrového (protože zobrazovací zařízení máme převážně rastrová). Změna velikosti (zmenšení i zvětšení) rastrového obrazu je operace, která vždy obraz pokazí. Extrémní příklad obrázku (0 = bílá, X = černá) o velikosti 3×3 pixely: O O O O X X X O O Pokud ho chceme zmenšit na 2×2 pixely, může vzniknout například následující: O X X O nebo: X X O O Což je bohužel něco úplně jiného.

Ztrátová komprese (JPEG) Příklad nevhodně použité ztrátové komprese.

Rozlišení (rastrového) obrazu 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 10 000 obrazových bodů, stejný obraz s rozlišením 300 dpi obsahuje celkem 90 000 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 Velikost obrazu na disku samozřejmě ovlivňuje použitá komprese souboru, tj. výsledný soubor je zpravidla podstatně menší.

Grafika na webu obyčejně rastrová vektorová grafika je podporovaná v HTML5 SVG (Scalable Vector Graphics) Popis vektorového obrázku pomocí XML souboru: <svg width="200px" height="10px"> <rect x="0" y="0" width="150px" height="10px" rx="5" fill="green"/> <rect x="50" y="3" width="80px" height="5px" fill="red"/> </svg> lze vkládat přímo do HTML dokumentu nebo do externího souboru podporováno ve všech hlavních prohlížečích Výhoda použití vektorové grafiky na webu spočívá v tom, že se tak lépe dá vytvářet responzivní design, který se přizpůsobuje různým zobrazovacím zařízením (jejich velikostem). Vektorovou grafiku lze bez obtíží zmenšovat a zvětšovat bez ztráty kvality. Nevýhodou je větší velikost HTML stránky. SVG soubor je někdy dokonce větší, než kdyby se daný obrázek nakreslil jako bitmapa (zvlášť u malých grafických zdobeníček). Nicméně, SVG je XML soubor a ten lze poměrně dobře komprimovat. Pokud tedy webový server používá komprimaci webových stránek (a klient ji podporuje), není nutné tento problém řešit.

Grafika na webu Pozor na přenášená data velikost – obrázky je nutno optimalizovat obrázky designu 0..10 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} Výše uvedené velikosti souborů jsou pochopitelně orientační a používají se už posledních 20 let. Byly platné pro internet přes vytáčené telefonní spojení a jsou platné pořád. Je to proto, že internet v domácnostech a firmách se sice několikanásobně zrychlil, kromě toho se však používá připojení přes mobily, které má rychlost dost proměnlivou. Nejzásadnějších úspor se dá dosáhnout snižováním počtu HTTP požadavků na stránku. Při pomalém připojení se zpomalí všechny HTTP požadavky a čas načítání stránky proto roste násobně. Zejména u aplikací se vytváří obrázky, které obsahují veškerou grafiku aplikace v jednom souboru a pomocí triku se zápornou pozicí pozadí v elementu se nastaví jejich poloha (předpokládá to, že element (tlačítko) má nastavenou velikost). Dalším čím dál více používaným způsobem je použití písem a vlastních znaků v Unicode pro vytvoření ikon. Příkladem je FontAwesome.

Zásady použití barev 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á Obecně platí, že pokud si nejste barvami jistí, použijte jich raději méně.

Test světel…

Odstrašující případy http://standanovak.borec.cz/ http://henryklahola.nazory.cz/ http://standa.chytrak.cz/ http://4a.chytrak.cz/ http://flussor.chytrak.cz/ http://cimrman.chytrak.cz/ http://www.vesmirni-lide.cz/default_c.htm http://simona.kvalitne.cz/index2.php a další …

Otázky? Je RGB je lepší než CMYK? Dá se na monitoru použít subtraktivní barevný model? Má větší gamut lidské oko nebo psí oko? Kolik bajtů by zabíral nekomprimovaný RGB obrázek 100×100 bodů, pokud by měl mít každý bod 10000 úrovní každé složky barvy? Proč se používají barevné prostory i pro aditivní barevné modely? Zabírá víc místa na disku rastrový nebo vektorový obrázek?