Počítačová grafika (vybrané problémy)

1. Eduard Sojka Úvod do inform. technologií 2005/6 VŠB – Technická univerzita Ostrava Počítačová grafika(vybrané problémy)

2. Hlavní témata počítačové grafiky(I) 2D grafika: Reprezentace a zobrazování dvojrozměrných útvarů: Základních geometrických prvků, schémat, ilustrací, prvků GUI, fotografií, videa atd.

3. Hlavní témata počítačové grafiky(II) 3D grafika: Reprezentace, věrné a rychlé zobrazování trojrozměrných scén. Vyvinuly se metody, které pracují buď rychle a nebo naopak pomalu ale zato dávají pěknější obrázky.

4. Hlavní témata počítačové grafiky(III)

5. Program dnešní přednášky • Metody popisu 2D obrázků: Rastrový  vektorový popis • Reprezentace barev v obrazech • Používání barev: fyziologická a psychologická hlediska • Komprese 2D obrázků

6. Metody popisu 2D obrázků (rastrový  vektorový popis)

7. Metody popisu 2D obrázků(I) Přinejmenším těsně před vykreslením např. na monitoru je obrázek vždy reprezentován jako pole obrazových bodů. Každý prvek pole nese informaci o barvě jednoho obrazového bodu. Otázkou zůstává, zda má být obrázek reprezentován za každých okolností a v každém okamžiku právě jen takto.

8. Metody popisu 2D obrázků(II) Dvě hlavní metody: • rastrový popis • vektorový popis

9. Rastrový popis obrázku(I) Obrázek je reprezentován jako pole svých bodů (pixelů). Uchovává se jen informace o tom, jakou barvou mají být nakonec rozsvíceny jednotlivé body. Tato reprezentace je zcela podřízena potřebám závěrečného vykreslování. Z některých zdrojů, vznikají obrázky přímo a jen v rastrové podobě (např. fotografické přístroje nebo kamery).

10. Rastrový popis obrázku(II) P3 P1 P2 Obrázky mající jiný původ než rastrové vstupní zařízení lze takto reprezentovat také (někdy s problémy). Např.: Trojúhelník P1, P2, P3 bude rastrově reprezentován tak, že se odpovídající barvou rozsvítí všechny body obrázku, které trojúhelník zaujímá. Později už ale nebude k dispozici explicitní informace o tom, že tyto body patří k sobě a dohromady tvoří nějaký geometrický objekt.

11. Vektorový popis obrázku(I) Obsah obrázku je v tomto případě popsán seznamem objektů, které se v obrázku nacházejí (příp. datovou strukturou umožňující zachytit i hierarchické členění). Např.: B A Obrázek = { úsečka: počátek = (xp,yp)), konec = (xk,yk)), barva = (r,g,b); kružnice: střed = (xs,ys)), r = 3, barva = (r,g,b); znak: „A“, poloha = (xp,yp)), barva = (r,g,b); … }

12. Vektorový popis obrázku(II) Také i tvary znaků mohou být popsány vektorově pomocí své hranice. Znak „A“ = { polygon: bod1 = (xb1, yb1)), bod2 = (xb2, yb2)), … ; polygon: bod1 = (xb1, yb1)), bod2 = (xb2, yb2)), … ; }

13. Vektorový popis obrázku(III) Vektorově pomocí své hranice a informace o svém eventuálním vybarvení mohou být popsány i poměrně složité objekty. Zde je hranice popsána jako posloupnost na sebe navazujících křivek.

14. Rastrový  vektorový popis(I) • Většina současných zobrazovacích zařízeních pracuje s rastrovým popisem. Výjimkou jsou perové plotry, které zpracovávají přímo popis vektorový. • Převod z vektorového do rastrového tvaru je obvykle vcelku jednoduchý a lze jej provést vždy, když je zapotřebí obrázek reprezentovaný vykreslit. • Převod z rastrového tvaru do vektorového bývá velmi obtížný a výsledek je nejistý. Nutno použít metod analýzy obrazu.

15. Rastrový  vektorový popis (II) • Obrázky popsané vektorově lze později vykreslit s libovolnou přesností (libovolným rozlišením). Zvětšení obrázku při vektorové (nahoře) a rastrové (dole) reprezentaci.

16. Rastrový  vektorový popis (III) • Obrázky popsané vektorově lze později snadno modifikovat (editovat). • Vektorový popis obrázku je možné chápat jako kompresní metodu (na tomto principu je založena komprese MPEG 4) • Vykreslení obrázku popsaného vektorově trvá vždy o něco déle než vykreslení obrázku reprezentovaného rastrově.

17. Rastrový  vektorový popis (IV) • Vektorový popis je zejména vhodný pro obrázky, jejichž obsah byl vytvořen člověkem (není snímán kamerou). Použije-li se pro reprezentaci např. přírodních výtvorů, pak mohou obrázky působit dosti uměle.

18. Rastrový  vektorový popis (V) Závěry: • Je-li obrázek vytvářen člověkem a je-li předpoklad, že obrázek bude později zobrazován s různým rozlišením nebo editován, je radno používat takových nástrojů a formátů, které zajistí vektorovou reprezentaci obrazu. • Pro fotografii a video je rozumné používat reprezentace rastrové.

19. Rastrový  vektorový popis (VI) Paint programs:Microsoft Paint, Adobe Photoshop, Ulead PhotoImpact ,… Soubory: JPEG, MPEG, PNG, TIFF, GIF, BMP, PCX, … Draw programs: AutoCAD, MS Word, Inkscape, Macromedia Free Hand, Flash, Sketsa SVG, Xara X, Adobe Ilustrator, … Soubory: SVG (scalable vector graphics), DXF, PS, EPS, PDF, WMF (ty ale mohou obsahovat i bitmapy) Konvertory:AutoTrace, VectorEye

20. O reprezentaci barev

21. Reprezentace barev Zrakový vjem je způsoben tím, že světlo dopadá na sítnici našeho oka. Barva pak závisí na tom, jak jsou ve světle zastoupeny jednotlivé vlnové délky. Barva je tak zcela popsána funkcemi podobnými jako na obrázku vlevo. Jen výjimečně se setkáváme se světlem monochromatickým.

22. Reprezentace barev:RGB model (I) Pro prakticképoužitíje popis barvy pomocí funkce příliš složitý (pro každý obrazový bod by musela být jedna funkce). Již dlouho se ale ví, že barvy lze míchat. Většinu barev lze získat smícháním tří základních barev: červené, zelené a modré. Barevná reprezentace RGB udává, jak je zapotřebí základní barvy smíchat, aby bylo dosaženo barvy požadované. Obvykle je každá složka reprezentována na 1 byte.

23. Reprezentace barev:RGB model(II) Zadávání barev pomocí složek RGB naleznete ve všech grafických systémech. Bývá ale obtížné nalézt takovou kombinaci barevných složek, abyste dostali právě tu barvu, kterou si představujete. Pomoci vám mohou různé tabulky barev.

24. Reprezentace barev:RGB model(III) Před časem vznikl termín „web-safe colours “. Předpokládalo se, že většina grafických karet má možnost pracovat jen s 256 barvami. Paleta „web-safe“ obsahuje 216 vybraných barev. O tom, že byl výběr trochu umělý, svědčí i význam kódování. Např. kód f3c značí barvu ff33cc. Nicméně paleta se ujala a dodnes se s termínem můžete setkat. Význam dnes už ale velmi poklesl.

25. Reprezentace barev:HSV model(I) Protože může být používání modelu RGB v praxi poněkud obtížné, používají se i modely jiné. Jedním z nich je model HSV (hue-odstín, saturation-sytost, value-jas). Nastavení barevného odstínu se provede volbou hodnot H, S, V, což může být často snazší a příjemnější než hledání odpovídajících hodnot R, G, B.

26. Reprezentace barev:HSV model(II) Podíváme-li se na podstavu kužele z předchozího snímku, získáme tzv. barevný kruh - vlevo (víme, že podél výšky kužele už se mění pouze jas – směrem k vrcholu kužele odstíny tmavnou).

27. Reprezentace barev:Jiné modely (I) Barevných modelů existuje ještě více. Zde ještě uvedeme model CMY (cyan, magenta, yellow), kterého se používá při tisku na bílý papír. Je to model subtraktivní. Jednotlivé jeho barvy blokují odraz základních barev RGB od bílého papíru.

28. Používání barev (z hledisek fyziologických a psychologických)

29. Používání barev V elektronických prezentacích (na rozdíl od tisku) můžeme barev používat snadno (např. bez nákladů na barevný tisk). Volba barev však nebývá jednoduchá. Co vzít při volbě barev v úvahu? • Fyziologické možnosti lidského zraku. • Psychologické, estetické a kulturní aspekty, tradice, … Uvažte také, že cca 8% populace trpí poruchou barevného vidění.

30. Barvy: Schopnosti člověka (I) Udělejte inventuru veškeré komunikace vašeho programu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Udělejte inventuru veškeré komunikace vašeho programu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Udělejte inventuru veškeré komunikace vašeho programu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Kteroupak barvu vidíte nejlépe?

31. Barvy: Schopnosti člověka (II) Barvu vnímají tři druhy čípků (celkem cca 6 mil.). Nejvíce je čípků zachycujících barvu červenou, méně je čípků zachycujících barvu zelenou a jen velmi málo zachycuje barvu modrou. Světlo je dále vnímáno tyčinkami. Těch je mnohem více, asi 120 mil, ale nevidí barevně.

32. Barvy: Schopnosti člověka (III) čípky na modrou čípky na zelenou nebo červenou tyčinky Ještě jednou tyčinky a čípky. Povšimněte si jejich skutečně rozdílných koncentrací.

33. Barvy: Schopnosti člověka (IV) Rozdíly v množství čípků jsou částečně kompenzovány dalšími vlivy. Výslednou citlivost R, G, B čípků pak popisují křivky vlevo. Lidský zrak je proto nejcitlivější na barvu žlutou, která vzniká složením barvy zelené a červené.

34. Barvy: Schopnosti člověka (V) Udělejte inventuru veškeré komunikace vašehoprogramu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Takovou barevnou kombinaci určitě žádný uživatel nevydrží příliš dlouho, třebaže jinak je vše v pořádku. Zkuste zaostřit na červené a na modré písmo současně. Podařilo se vám to?

35. Barvy: Schopnosti člověka (VI) Udělejte inventuru veškeré komunikace vašeho programu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Obrázek ukazuje, proč nemůžete barvy z opačných konců spektra vidět ostře současně.

36. Barvy: Schopnosti člověka (VII) Udělejte inventuru veškeré komunikace vašeho programu. Udělejte inventuru veškeré komunikace vašeho programu. Udělejte inventuru veškeré komunikace vašeho programu. Udělejte inventuru veškeré komunikace vašeho programu. Co konečně říkáte na toto? Jak se vám čte? Udělejte inventuru veškeré komunikace vašeho programu. Udělejte inventuru veškeré komunikace vašeho programu.

37. Barvy: Schopnosti člověka (VIII) Podobný test. Dívat se asi 30 s a pak zavřít oči.

38. Barvy: Schopnosti člověka (IX) Udělejte inventuru veškeré komunikace vašeho programu. Udělejte inventuru veškeré komunikace vašeho programu. Předchozí experiment měl vysvětlit, proč člověk špatně vidí něco podobného, jako je nahoře. Vizuální aparát má paměťový efekt, který je tím větší, čím více je stimulován. Když při čtení přejíždíte zrakem po řádku, tak jednoduše nestihnete barvu rozpoznávat tak rychle, jak by čtení vyžadovalo. Řešení je jediné – méně stimulovat. Např. méně agresivní pozadí.

39. Barvy: Schopnosti člověka (X) Možná se vám předchozí ukázky zdály přehnané. Zde je sporná kombinace barev v praxi: červená a modrá. Naštěstí jde jen o nadpisy a efekt je ztlumen bílým pozadím.

40. Barvy: Jak volit? (I) Nožná očekáváte praktické rady. Protože je volba barev velmi obtížná, jsou základní rady následující. • Jestliže si v otázce barev nejste zcela jisti, pak jich používejte co nejméně. • Poučte se od jiných (příroda, výtvarné umění, webové stránky, …) a používejte osvědčená barevná schémata.

41. Barvy: Jak volit? (II) Připomeňme HSV model, abychom věděli, jak číst následující obrázky (H=odstín, S=sytost, V=jas). Málo syté barvy. Nejsou možné barevné kontrasty. Působí vždy harmonicky (při použití jakýchkoli odstínů). Výsledek může vypadat velmi decentně.

42. Barvy: Jak volit? (III)

43. Barvy: Jak volit? (IV) Varianta s jednou barvou. Ta však může mít různou sytost (může přecházet až do bílé) a různý jas (může přecházet až do černé), což jsou prostředky k vytvoření kontrastu. Praktická varianta – při jejím použití neuděláte chybu. Marc Chagall, Les Amants Sur Le ToitMonochrom. - modrá

44. Barvy: Jak volit? (V)

45. Barvy: Jak volit? (VI) Varianta s blízkými barvami. Opět nebývá konfliktní. Jediným problémem je najít pěkné odstíny, které vyjadřují to, co chcete. Vincent van Gogh, The Iris, 1889Analogické barvy (žlutá, zelená)

46. Barvy: Jak volit? (VII) Blízké barvy a podobná sytost. Ovšem s výjimkou reklamy, kde je využito barevného kontrastu.

47. Barvy: Jak volit? (VIII) Komplementární barvy. Jsou na barevném kruhu nejvzdálenější. Je proto nebezpečí problémů (např. čitelnost), budou-li umístěny těsně vedle sebe. Jinak ale bývají vnímány pozitivně. Pomocí tohoto modelu už lze vytvořit i velmi „razantní“ návrhy. Paul Cezanne, La Montage Saint Victoire, 1886-88.Komplementární barvy – modrá a oranžová.

48. Barvy: Jak volit? (IX)

49. O kompresi obrazu (zejména ztrátové)

50. Komprese obrazu - motivace Máme-li obrázky nebo zvukové nahrávky, pak je často chceme uchovávat, transportovat po síti atd. Proto by soubory měly být malé. V případě obrazů, video sekvencí a zvuku je užitečná komprese ztrátová. Téměř výlučně se komprimují obrazy popsané rastrově.