Interfejsy i multimedia w technice Wykład. Grafika. Opracował dr inż. Dariusz Trawicki Gdańsk

Transkrypt

1 Interfejsy i multimedia w technice Wykład Grafika Opracował dr inż. Dariusz Trawicki Gdańsk

2 Grafika jest ważnym elementem przekazu multimedialnego, dzięki której multimedia zyskują na atrakcyjności. W procesach poznawczych obraz jest jednym z podstawowych sposobów reprezentacji świata, wyprzedzającym, np. reprezentację werbalną. 2

3 Wzrok i właściwości widzenia Zmysł wzroku ze względu na ilość przekazywanych informacji jest najważniejszym zmysłem człowieka. Szacuje się, że około 90 procent informacji o otaczającym świecie uzyskiwane jest za pomocą wzroku. Narządem wzroku jest oko, którego zadaniem jest przetworzenie światła (bodźca świetlnego), pochodzącego z otoczenia i wnikającego do wnętrza oka, na sygnały elektryczne, które następnie są przesyłane przez nerwy wzrokowe do ośrodków wzroku w korze mózgowej i interpretowane w postaci wrażeń wzrokowych. 3

4 Wzrok i właściwości widzenia Budowa i działanie oka Rys Oko człowieka (źródło: przekrój oka prawego widziany z góry(źródło: 4

5 Wzrok i właściwości widzenia Światło dochodzące do oka przechodzi przez rogówkę, następnie przezźrenicę. Rogówka (soczewka stała) oraz druga soczewka (o zmiennej ogniskowej), dostosowują wzrok do odległości. Ostatecznie promienie światła padają na siatkówkę, zawierającą wrażliwe naświatło receptory. Obraz na siatkówkę oka pada do góry nogami i dopiero w mózgu następuje jego odwrócenie. W siatkówce znajdują się dwa typy receptorów: pręciki i czopki. Pręciki odpowiadają za czarno-białe widzenie przy słabym oświetleniu (widzenie zmierzchowe), które pozwala postrzegać jedynie kontury i kształty. Szczegółowe widzenie barwne, w warunkach dobrego oświetlenia umożliwiają czopki. Oko ludzkie zawiera trzy rodzaje czopków: typu L reagują głównie na światło czerwone (fale długie, ok. 700 nm); typu M na światło zielone (faleśredie, ok. 530 nm); typu S naświatło niebieskie (fale krótkie, ok. 420 nm). Impulsy elektryczne generowane pod wpływem światła w receptorach są wysyłane, za pośrednictwem nerwu wzrokowego do mózgu. 5

6 Wzrok i właściwości widzenia Światło widzialne Światło widzialne ta część promieniowania elektromagnetycznego, na którą reaguje siatkówka oka człowieka w procesie widzenia. Dla człowieka promieniowanie to zawiera się w przybliżeniu w zakresie długości fal nm (co najmniej), dla zwierząt zakres ten bywa inny lecz o zbliżonych wartościach. Każda częstotliwość fali z zakresu światła widocznego, odpowiada innej barwie. Najkrótsza długość fali widzianej przez człowieka wynosi ok. 400nm (~ Hz) i odpowiada barwie fioletowej, a najdłuższą falą, widoczną przez człowieka, jest czerwień, której odpowiada fala o długości ok. 700nm (częstotliwość ~ Hz). Kolory spektrum barw zmieniają się od fioletu, poprzez barwę niebieską, zieloną, żółtą, pomarańczową, aż do czerwieni. 6

7 Wzrok i właściwości widzenia Rys Spektrum elektromagnetyczne. Oddzielnie pokazany jest zakres promieniowania widzialnego (źródło: 7

8 Wzrok i właściwości widzenia Właściwości ludzkiego wzroku są wykorzystywane, np. do przedstawienia informacji trójwymiarowej na płaskim, dwuwymiarowym ekranie w taki sposób, aby stworzyć optyczne wrażenie głębi (trójwymiarowości). Rys Wpływ nakładania się obiektów na wrażenia wzrokowe 8

9 Wzrok i właściwości widzenia Wrażenie głębi w obrazie można uzyskać np. poprzez zmianę wielkości obiektów względem siebie... Rys Uzyskanie głębi w obrazie 9

10 Wzrok i właściwości widzenia lub zastosowanie perspektywy. Rys Uzyskanie głębi w obrazie 10

11 Wzrok i właściwości widzenia Właściwości ludzkiego wzroku są również przyczyną powstawania tzw. złudzeń optycznych. Rys Przykładowe złudzenia optyczne (źródło:

12 Modele barw Każda barwę można otrzymać za pomocą trzech barw podstawowych, tzn. takich, że żadnej z nich nie można uzyskać poprzez zmieszanie dwóch pozostałych. Zmieszanie barw podstawowych w odpowiednich proporcjach pozwala na uzyskanie każdej innej, zwanej barwą pochodną. 12

13 Modele barw Koło barw - graficzny model poglądowy służący do objaśniania zasad mieszania się i powstawania barw, mający postać koła, w którym wokół jego środka zgodnie z kierunkiem ruchu wskazówek zegara wrysowano widmo ciągłe światła białego w ten sposób, że barwa fioletowa (najkrótsze promieniowanie widzialne) płynnie przechodzi w barwę czerwoną (najdłuższe promieniowanie widzialne) a więc widmo zostaje połączone w zamknięty cykl zmian barw (źródło: Rys Koło barw (źródło: 13

14 Modele barw Należy zwrócić uwagę, iż pojęcie koloru podstawowego zależy od tego, czy mamy do czynienia ze światłem emitowanym, czy też odbitym. Jeśli zachodzi mieszanie światła emitowanego, wówczas zachodzi zjawisko mieszania addytywnego (synteza addytywna). W takim przypadku trzy podstawowe kolory to: czerwony, niebieski i zielony. Jeśli natomiast zachodzi mieszanie kolorów światła odbitego, wówczas występuje zjawisko mieszania substraktywnego (synteza subtraktywna), stosowanego podczas mieszania farb w druku czy malarstwie. W takim przypadku kolory podstawowe to niebiesko-zielony, purpurowy i żółty. Zjawisko to wykorzystuje się m.in. do druku na białym papierze. Farba drukarska, pokrywając papier, tworzy filtr, a nie pochłonięte długości fal świetlnych docierają do oka, wywołując wrażenia określonej barwy. 14

15 Modele barw Rys Synteza addytywna (źródło: Rys Synteza subtraktywna (źródło: 15

16 Modele barw Barwa w grafice komputerowej zapisywana jest przy użyciu różnych modeli barw, np. CIE, RGB, CMY, YIQ, HSV. Szczególnie popularne są modele: RGB, CMY(K), HSV. 16

17 Modele barw Modele barw model RGB RGB jest modelem wynikającym z właściwości odbiorczych ludzkiego oka, w którym wrażenie widzenia dowolnej barwy można wywołać przez zmieszanie w ustalonych proporcjach trzech wiązek światła o barwie czerwonej, zielonej i niebieskiej (mieszanie addytywne). Jego nazwa powstała ze złożenia pierwszych liter angielskich nazw barw: R red (czerwonej), G green (zielonej) i B blue (niebieskiej), z których model ten się składa. RGB jest podstawowym modelem wykorzystywanym interpretowania barw na urządzeniach wyświetlających obraz, np. monitorach, telewizorach oraz na urządzeniach analizujących obraz, np. skanerach i cyfrowych aparatach fotograficznych. 17

18 Wzrok i właściwości widzenia Sześcian kolorów Rys Model RGB (źródło: ) 18

19 Modele barw Rys Model RGB (źródło: 19

20 Modele barw Model CMY(K) (ang. Cyan Magenta Yellow Black) stosowany jest dla światła odbitego i ukierunkowany jest na sprzęt drukujący: drukarki, maszyny drukarskie. Zasadniczy model CMY jest najczęściej rozszerzany o barwę czarną. W tym modelu zmieszanie trzech kolorów podstawowych, tj. niebiesko-zielonego, purpurowego i żółtego, w maksymalnych ilościach daje w wyniku czerń, zaś biel jest uzyskiwana, gdy żadna z barw podstawowych nie zostanie użyta. Wrażenie barwy uzyskuje się dzięki światłu odbitemu od zadrukowanego podłoża. Pigment farb/atramentów pochłania określone długości fali, a odbija pozostałe (synteza subtraktywna). W praktyce jednak czerń otrzymywana jest z zasobnika farby czarnej. 20

21 Modele barw Rys Model CMYK (źródło: 21

22 Modele barw Model HSV (ang. Hue Saturation Value) model opisu przestrzeni barw zaproponowany w 1978 roku przez Alveya Raya Smitha. Model HSV nawiązuje do sposobu, w jakim widzi ludzki narząd wzroku, gdzie wszystkie barwy postrzegane są jako światło pochodzące z oświetlenia. Według tego modelu wszelkie barwy wywodzą się ze światła białego, gdzie część widma zostaje wchłonięta a część odbita od oświetlanych przedmiotów. Symbole w nazwie modelu to pierwsze litery nazw angielskich dla składowych opisu barwy: H barwa światła (ang. Hue) wyrażona kątem na kole barw przyjmująca wartości od 0 do 360. Model jest rozpatrywany jako stożek, którego podstawą jest koło barw. 22

23 Modele barw Rys Model CMYK (źródło: Wymiary stożka opisuje składowa S nasycenie koloru (ang. Saturation) jako promień podstawy oraz składowa V (ang. Value) równoważna nazwie B moc światła białego (ang. Brightness) jako wysokość stożka. Przyporządkowanie częstotliwości fal świetlnych na kole barw w modelu HSV: centrum barwy czerwonej odpowiada kąt 0 lub 360. Centrum barwy zielonej odpowiada kąt 120. Centrum barwy niebieskiej odpowiada kąt 240. Pozostałe barwy pośrednie dla składowej Hue są odpowiednio rozłożone pomiędzy kolorami czerwonym, zielonym i niebieskim. 23

24 Modele barw Rys Modele barw w programie Gimp 24

25 Zalecenia dotyczące stosowania kolorów w grafice komputerowej (na przykładzie stron internetowych): należy używać pojedynczego koloru dla całego projektu, ale stosować różne jego odcienie,aby utrzymać jednolitość, wybrać dwa kolory, które są powiązane ale nie podobne, stworzyć projekt strony wykorzystując kolory kontrastujące ze sobą, na przykład mieszając ciepłe i zimne odcienie, połączyć kolor bliski białemu z drugim ciemnym, używać białego tła z czarnym tekstem dla zapewnienia czytelności, źle dobrane kolory mogą znacznie pogorszyć wizerunek strony, ograniczyć liczbę kolorów, aby zmniejszyć wizualny bałagan, używać kolorów, które są odpowiednie do treści zawartych na stronie, korzystać z kolorów znajdujących się na głównych zdjęciach i grafikach umieszczonych na stronie, aby poprawić wrażenie harmonii, unikać cierpkich, przesyconych kolorów, zmniejszyć ich nasycenie, aby zbliżyć je do braw naturalnych. (na podstawie: 25

26 Podstawowe rodzaje obrazów Wyróżnia się dwa podstawowe rodzaje obrazów multimedialnych: obraz statyczny (nieruchomy) jest stały w czasie, obraz dynamiczny (ruchomy) zmienia się w trakcie jego trwania. Ze względu na formę zapisu obrazy zdzielimy na: obraz analogowy, obraz cyfrowy. 26

27 Podstawowe rodzaje obrazów Najważniejsze zalety zapisu cyfrowego: 1. teoretycznie nieskończona liczba możliwych do wykonania kopii, 2. wysoka trwałości wykonanych kopii, 3. brak różnic w jakości obrazu w przypadku stosowania nośników pochodzących od różnych producentów, 4. możliwość stosowania bardzo dokładnych (złożonych) filtrów cyfrowych (stosunkowo niski koszt), 5. w stosunkowo prosty sposób można zastosować automatyczną korekcję błędów. 27

28 Grafika komputerowa Grafika komputerowa jest działem informatyki zajmującym się wykorzystaniem komputerów do generowania, przetwarzania i prezentacji obrazów oraz wizualizacji danych. Przykładowe zastosowania kartografia, wizualizacja danych pomiarowych (np. w formie wykresów dwu- i trójwymiarowych), wizualizacja symulacji komputerowych, diagnostyka medyczna, kreślenie i projektowanie wspomagane komputerowo (CAD), przygotowanie publikacji, efekty specjalne w filmach, gry komputerowe. (źródło: 28

29 Grafika komputerowa Grafika rastrowa (grafika bitmapowa) - reprezentacja obrazu za pomocą pionowo-poziomej siatki odpowiednio kolorowanych pikseli na monitorze komputera, drukarce lub innym urządzeniu wyjściowym (źródło: Głównym parametrem w przypadku grafiki rastrowej jest wielkość bitmapy, czyli liczba pikseli, podawana na ogół jako wymiary prostokąta. 29

30 Grafika komputerowa Rys Przykład grafiki rastrowej (źródło: 30

31 Grafika komputerowa Grafika wektorowa (obiektowa) grafika komputerowa, w której obraz opisany jest za pomocą figur geometrycznych (w przypadku grafiki dwuwymiarowej) lub brył geometrycznych (w przypadku grafiki trójwymiarowej), umiejscowionych w matematycznie zdefiniowanym układzie współrzędnych, odpowiednio dwu- lub trójwymiarowym. (źródło: Cechą grafiki wektorowej jest to, że zapamiętywane są charakterystyczne dla danych figur parametry, np. dla odcinka współrzędne punktów końcowych, dla okręgu środek i promień. Zaletą wynikającą z takiego podejścia jest skalowalność. Tak zapisane obrazy można zwiększać i zmniejszać bez straty jakości. 31

32 Grafika komputerowa Rys Porównanie jakości obrazków wektorowych i rastrowych podczas skalowania (źródło: 32

33 Grafika komputerowa Grafika komputerową dzielimy również na: grafikę dwuwymiarową (płaską, 2D) wykorzystywana głównie w tych zastosowaniach, w których pierwotnie używano tradycyjnych technologii drukowania oraz rysowania - m.in. typografii, kartografii, kreślarstwie, reklamie, filmie animowanym (źródło: grafikę trójwymiarową (przestrzenną, 3D) obiekty są umieszczone w przestrzeni trójwymiarowej i celem programu komputerowego jest przede wszystkim przedstawienie trójwymiarowegoświata na dwuwymiarowym obrazie. 33

34 Grafika komputerowa Rys Grafika 3D (źródło: 34

35 Grafika komputerowa Formaty plików graficznych Formaty plików graficznych można podzielić ze względu na rodzaj przechowywanej/zapisywanej grafiki i są to: formaty przechowujące grafikę rastrową, formaty przechowujące grafikę wektorową. Formaty plików przechowujących grafikę rastrową można podzielić w zależności od zastosowanej metody kompresji i wyróżniamy formaty: nie stosujące kompresji, stosujące kompresję bezstratną, stosujące kompresję stratną. 35

36 Grafika komputerowa Najpopularniejszymi formatami grafiki wektorowej są: SVG (ang. Scalable Vector Graphics) uniwersalny, oparty na języku XML, format dwuwymiarowej grafiki wektorowej (statycznej i animowanej), promowany jako standard grafiki wektorowej (ze względu na jego możliwości integracji z innymi językami, np. z XHTML), opracowany (1999r.) w ramach organizacji W3C z myślą o zastosowaniu na stronach WWW, jawny tzn. nieobwarowany licencjami i patentami. Format jest obsługiwany przez przeglądarki: Amaya, Mozilla Firefox, od wersji 1.5, Konqueror, Opera, począwszy od wersji 8 beta 3 i Safari od wersji 3. Przeglądarki internetowe, które nie obsługują SVG np. Microsoft Internet Explorer, wymagają doinstalowania odpowiednich wtyczek. Przykładem programu służącego do tworzenia grafiki w formacie SVG jest rozpowszechniany na licencji GNU GPL Inkscape. 36

37 Grafika komputerowa > formaty grafiki wektorowej CDR format programu Corel Draw (opatentowany przez firmę Corel Corporation). SWF zamknięty format grafiki wektorowej, stworzony dla programu Flash przez Adobe (dawniej Macromedia). Pliki SWF mogą zawierać animacje lub aplety o różnym stopniu interaktywności i funkcjonalności. Format umożliwia dodawanie do prezentacji dźwięków, filmów i obiektów pozwalających na interakcję z odbiorcą końcowym pliku. SWF jest obecnie dominującym formatem animacji wektorowych w sieci, przewyższając popularnością otwarty standard W3C SVG (na podstawie: 37

38 Grafika komputerowa > formaty grafiki wektorowej EPS (ang. Encapsulated PostScript) format plików, będący podzbiorem języka PostScript, służący do przechowywania pojedynczych stron grafiki wektorowej w postaci umożliwiającej osadzanie ich w innych dokumentach. Przez wiele lat format EPS był jedynym uniwersalnym formatem zapisu plików z grafiką wektorową (źródło: 38

39 Grafika komputerowa Formaty grafiki rastrowej dzieli się na: 1. formaty bez kompresji, np. : XCF (ang. experimental Computing Facility) - wewnętrzny format zapisu plików graficznych programu GIMP. Zachowuje wszystkie zaznaczenia, warstwy, kanały i ścieżki, jakie zostały użyte. Nie spłaszcza obrazu (tak jak ma to miejsce przy zapisaniu grafiki do formatu, np. JPG czy GIF). PSD (Photoshop Document) natywny format programu Photoshop. BMP popularny (mimo stosunkowo dużych rozmiarów) format plików z grafiką bitmapową. Wykorzystywany powszechnie w systemach z rodziny Windows. Nie obwarowany patentami. Obsługuje tylko tryb RGB. 39

40 Grafika komputerowa > formaty grafiki rastrowej 2. formaty używające kompresji bezstratnej, np. : PNG (ang. Portable Network Graphics) popularny, nie obwarowany patentami format grafiki (szczególnie internetowej). Obsługuje stopniowaną (8-bitowa) przezroczystość (tzw. kanał alfa) oraz 24- bitową głębię kolorów. Pojawił się w 1995 roku jako następca GIF (problemy roszczeń patentowych). Format PNG zalecany jest przez konsorcjum W3C jako preferowany format grafiki dla WWW. GIF (ang. Graphics Interchange Format) popularny (WWW) format grafiki (opracowany w 1987 r.), może przechowywać wiele obrazków w jednym pliku, tworząc z nich animację. W formacie GIF piksel zapisywany jest z dostępnej palety 256 kolorów (8-bitowa głębia kolorów), co przy zapisie obrazu z 24-bitową głębią wymaga tzw. kwantyzacji kolorów (przybliżania/zastępowania możliwie bliskimi kolorami z dostępnych 256). 40

41 Grafika komputerowa > formaty grafiki rastrowej 2. formaty używające kompresji bezstratnej (c.d.): TIFF (ang. Tagged Image File Format) format grafiki pozwalający na zapisywanie obrazów stworzonych w trybie kreskowym, skali szarości oraz w wielu trybach koloru i wielu głębiach bitowych koloru. Przechowuje ścieżki i kanały alfa, profile koloru, komentarze tekstowe. Używany jest obecnie jako jeden z podstawowych formatów w branży DTP (ang. Desktop Publishing komputerowe przygotowanie do druku). 41

42 Grafika komputerowa Kanał alfa (ang. alpha channel) w grafice komputerowej jest kanałem, który definiuje przezroczyste obszary grafiki. Jest on zapisywany dodatkowo wewnątrz grafiki razem z trzema wartościami barw składowych RGB. Wartość zerowa oznacza całkowitą przezroczystość, zaś maksymalna - pełne zabarwienie. W systemach 32-bitowych kanał alfa ma postać liczby 8-bitowej, trzy pozostałe kanały również 8-bitowe przeznaczone są na informacje o poziomie nasycenia kolorów RGB. Utworzony w ten sposób format RGBA (RGB+Alfa) pozwala precyzyjnie określić stopień przeźroczystości oraz udział poszczególnych kolorów składowych. Przykładem popularnego formatu graficznego obsługującego przezroczystość alfa jest format PNG (źródło: 42

43 Grafika komputerowa > formaty grafiki rastrowej 3. formaty używające kompresji stratnej, np.: JPEG (ang. Joint Photographic Experts Group) najpopularniejszy format plików graficznych z kompresją stratną, używany na stronach WWW, jak i w aparatach cyfrowych. Przeznaczony głównie do przetwarzania obrazów naturalnych (pejzaży, portretów itp.), charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali. Zapisuje obrazy z 24- bitową głębią kolorów. Format umożliwia dobór stopnia kompresji. Zastosowane algorytmy kompresji stratnej uwzględniają właściwości ludzkiego wzroku i usuwają słabiej widoczne części/szczegóły obrazu. 43

44 Rys Format JPEG stopnie kompresji JPEG, od lewej: pełna jakość (Q = 100), przeciętna jakość (Q = 50), średnia jakość (Q = 25), Niska jakość (Q = 10), Najniższa jakość (Q = 1) (źródło: ) 44

45 Grafika komputerowa Rys Format JPEG przed (z lewej) i po kompresji JPEG (źródło: ) 45

46 Grafika komputerowa > formaty grafiki rastrowej 3. formaty używające kompresji stratnej, (c.d.) : JPEG 2000 opracowany jako uzupełnienie formaty JPEG, a w zasadzie technik kompresji wykorzystywanych w JPEG. Pozwala tworzyć pliki bardziej skompresowane, lepszej jakości. Umożliwia definiowanie ROI (ang. Region of Interest - obszaru zainteresowania), co pozwala na określenie najważniejszych obszarów obrazu, w których powinna być zachowana wysoka jakość. Wadą algorytmu JPEG 2000 jest duża złożoność obliczeniowa. DjVu format stworzony do przechowywania zeskanowanych dokumentów (m.in. książek) w formie elektronicznej. 46

47 Grafika komputerowa Wizualizacja danych Wizualizacja jest interdyscyplinarną dziedziną zajmującą się mechanizmami tworzenia graficznej prezentacji dla dowolnych odbiorców z wykorzystaniem różnych środków technicznych i mechanizmami, które umożliwiają właściwą interpretację tychże obrazów przez człowieka (źródło: Wizualizacja naukowa koncentruje się na zastosowaniu grafiki komputerowej do tworzenia obrazów (schematów, histogramów, wykresów liniowych, kołowych, powierzchniowych itp.), które służą pomocą w zrozumieniu złożonych, nieraz ogromnych zbiorów danych numerycznych, będących wynikami obliczeń lub pomiarów. 47

48 Grafika komputerowa Przykłady zastosowań grafiki komputerowej do wizualizacji danych: wykresy w biznesie, pomagają wyjaśniać złożone zjawiska przez co, np. umożliwiają podejmowanie decyzji, wizualizacja naukowa, kartografia, projektowanie inżynierskie (CAD), internet (WWW), medycyna, przemysł rozrywkowy, symulatory i systemy rzeczywistości wirtualnej. 48