Pliki i kolory
Modele barw
Modele barw Z praw Grassmana wynika, że wystarczy wybrać trzy kolory aby można było utworzyć wszystkie inne. Wybór kolorów podstawowych zależy od przeznaczenia kolorowanych materiałów. Do druku – model subtraktwny Do pokazów na ekranie – model addytywny Użytkownika – model cech
Model subtraktywny Cyan Niebiesko-zielony (morski?) W druku używa się modelu subtraktywnego CMY bo wymaga mniej farby (w istocie pewnej jeszcze oszczędniejszej modyfikacji tego modelu CMYK). Barwy podstawowe: Cyan Niebiesko-zielony (morski?) Magenta Karmazynowy (kolor fuksji?) Yellow Żółty
Model CMY
Przestrzeń koloru CMY
Model addytywny Red czerwony Green zielony Blue niebieski Do pokazów na monitorach, rzutnikach, itp.. Wykorzystuje się model addytywny RGB Kolory podstawowe Red czerwony Green zielony Blue niebieski
Model RGB
Przestrzeń modelu RGB
Model użytkownika Hue barwa Saturation nasycenie Value (Lewel) jasność Model użytkownika HSV (lub HSL) to model nastawiony na odczucia osoby patrzącej. Atrybuty Hue barwa Saturation nasycenie Value (Lewel) jasność
Model HSV Barwa (H) – kąt obrotu (czerwony 0) Nasycenie (S) – odległość od osi pionowej Jasność (V) – wzdłuż osi (dół 0 góra 1)
Model użytkowy HSV Z tego koła wybiera się: barwę (H) nasycenie (S) i dodatkowo jasność (V) jako oddzielny parametr
Konwersja Przejście między modelem RGB i CMY jest bardzo proste (polega na prostym odejmowaniu). CMYK bardzo łatwo oblicza się na podstawie CMY i odwrotnie (tylko dodawanie i odejmowanie) Przejście między HSV a RGB lub CMY wymaga algorytmów arytmetycznych ale występuje w nich dzielenie co powoduje, że odwzorowanie nie będzie idealne bo w grę wchodzi dokładność obliczeń i zaokrąglenia.
Korekcja gamma Ten sam obraz (plik graficzny) inaczej wygląda w różnych systemach. Obraz normalny na Macintosh-u będzie ciemniejszy i bardziej kontrastowy gdy będzie oglądany na komputerach w systemie Windows. Obraz normalny w Windows będzie jasny i wyblakły na komputerach Macintosh Powód: System Wartość gamma Macintosh 1,8 Windows 2,2
Przykład
Korekcja Gamma Konieczność stosowania korekcji wynika z wady modelu RGB: zaburzenia liniowości koloru powodują zmianę kolorów na innym urządzeniu Korekcja gamma sprowadza się do tego, aby intensywność światła zmieniała się liniowo dla obserwatora wraz ze zmianą luminancji (jasności danego koloru). Korekcji gamma (kalibracji) dokonuje system operacyjny ale do zastosowań profesjonalnych trzeba czasami zrobić to ręcznie.
Co jest lepsze? Parametr Druk Monitor Rozdzielczość 1200 – 1400 72 – 96 Kolory CMYK – z 4 barw (cyan, magnta, żółty, czarny) za pomocą rastra 16 mln. Jasność Zależna od papieru i oświetlenia Regulowana
Kolory w internecie
Takie kolory uznaje się za bezpieczne w sieci Kolory bezpieczne System zarządzania kolorami w przeglądarkach internetowych jest oparty na kolorze 8 bitowym, czyli dopuszcza 256 kolorów. Przyjęto jednak wspólną paletę dla wszystkich systemów i przeglądarek mającą 216 kolorów W modelu RGB są to kolory o wartościach każdego składnika wyrażającymi się liczbami: 00, 33, 66, 99, CC, FF (51, 102, 153, 204, 255) Takie kolory uznaje się za bezpieczne w sieci
Tabela kolorów bezpiecznych
Przesunięcie Kolor zostaje zamieniony na najbliższy bezpieczny. Najbliższy oznacza: najbliższy liczbowo w każdym składniku, ale jak to będzie zrealizowane nie wiadomo.
Efekt przesunięcia Na środku kolor oryginalny, wokół możliwe kolory po przesunięciu.
Dithering (rozsiewanie) Symulacja niedostępnego w systemie koloru poprzez kompozycję kilku zbliżonych do niego barw z dostępnej palety. Cel ten osiągany jest przez ułożenie (zmieszanie) kilku sąsiadujących pikseli w kolorach z palety w regularny wzór, który naśladuje brakujący kolor.
Dithering - przykład Oryginał Po ditheringu
Mechanizm ditheringu
Dithering na szaro
Wygładzanie
Anti-aliasing (wygładzanie) Wygładzanie (anti-aliasing) – technika optymalizowania wyglądu kształtów ukrywająca ostre krawędzie spowodowane małą rozdzielczością ekranu. Polega na wstawianiu piksela w kolorze pośrednim między konturem a tłem tam gdzie krawędzie mogłyby wydawać się postrzępione.
Anti-aliasing – metoda
Anti-aliasing – przykład Z wygładzaniem Bez wygładzania
Anti-aliasing – kłopoty Małe (niskie) literki stają się nieczytelne Przy wprowadzaniu przezroczystości powstaje nieładna obwódka (tzw. halo) wokół wygładzonych kształtów.
Pliki obrazów
GIF Graphic Interchange Format – najpopularniejszy format plików graficznych w internecie. Cechy: Indeksowany kolor 8-mio bitowy Kompresja LZW Przezroczystość Animacja Przeplot
GIF – indeksowany kolor Zbiór kolorów obrazka jest przechowywany w tabeli kolorów, a piksele zawierają indeks tabeli kolorów. Tabela kolorów może zawierać tylko 256 kolorów, ale dowolnie wybranych ze wszystkich dostępnych (24 bitowych). Paleta jest adaptatywna, czyli można dowolnie dobierać paletę barw, tak aby jak najwierniej oddać walory obrazu.
GIF - kompresja Kompresja LZW – (Lempel-Zev-Welch) Bezstratna Wykorzystuje powtórzenia w strumieniu danych. Algorytm (w dużym uproszczeniu): [ # # # # # # # # # ] kompresuj do: [ 9 # ]
GIF – przykład 100 x 100 pikseli Paleta 8 bitów Oryginał (BMP) 10990 bajtów GIF 1085 bajtów 10 razy mniejszy!
GIF – przykład 100 x 100 pikseli Paleta 8 bitów Oryginał (BMP) 10990 bajtów GIF 1666 bajtów ponad 50% większy niż poprzedni
GIF – przezroczystość Przezroczystość (transparency) – jeden z kolorów można ustanowić przezroczystym: piksele mające ten kolor będą wyświetlane w kolorze podkładu pod rysunkiem (albo: w czasie wyświetlania obrazu nie zostaną zmienione). Uwaga: Przezroczyste będą wszystkie piksele tego koloru W przypadku wygładzania powstanie obwódka wokół kształtów z innego koloru
GIF – przeplot Obrazy bez przeplotu są przesyłane kolejnymi wierszami pikseli od góry. Przeplot powoduje, np. przesyłanie najpierw co trzeciej linii, potem co drugiej i wreszcie pozostałych. Obraz jest szybciej wyświetlony w całości ale z początku mało wyraźny.
GIF – przeplot, przykład W trakcie ściągania Bez przeplotu Z przeplotem
GIF – wykorzystanie TAK Logo, rysunek, kreskówka, schemat Prosta animacja Obrazek pokazywany na specjalnych tłach NIE Obrazy fotograficzne
JPEG Joint Photographic Expert Group Cechy: 24 bitowy kolor w modelu RGB Kompresja stratna
JPEG - kompresja Algorytm oparty na częstotliwości przestrzennej: Podział obrazka na kwadraty Zamiana informacji o względnym kolorze i jasności w kwadracie na formuły matematyczne Dobrze kompresuje: płynne przejścia kolorów (np. niebo o zachodzie) Źle kompresuje: dużo szczegółów (np. źdźbła trawy na łące)
JPEG – przykład
JPEG – przykład kompresji
JPEG
JPEG - wykorzystanie TAK Zdjęcia, obrazy artystyczne, akwarele, obrazy z dużą skalą szarości NIE Gdy można zastąpić przez GIF (czas zaoszczędzony na przesyłaniu mniejszego JPEG traci się na dłuższym dekodowaniu)
PNG Portable Network Graphic Cechy: Obsługa palety 8 bitowej, skali szarości 16 bit, kolor rzeczywisty 48 bitowy Bezstratna kompresja Dwuwymiarowe progresywne wyświetlanie Kanał alfa – 65000 odcieni przezroczystości Informacja o korekcji gamma
PNG - kompresja Pochodzi od algorytmów ZIP. Oparta na powtarzających się wzorcach w wierszach pikseli z uwzględnieniem pewnych wzorców pionowych. Przeciętnie 5-25% lepiej niż GIF.
PNG - wykorzystanie Zastępuje w pełni GIF (ma lepszą kompresję). Nie zastępuje JPEG w przypadku gładkich przejść tonalnych (daje dużo większe pliki) Daje szansę na przesyłanie bardzo szczegółowych plików TIFF
PNG - przykład BMP – 10999 bajtów PNG – 1055 bajtów (GIF – 1085) PNG – 953 bajty (GIF – 1666)
Algorytmy graficzne
Algorytmy graficzne Reprezentacja brył w programie Rysowanie brył Rzutowanie Algorytmy usuwania ścian niewidocznych Algorytm promieni światła Algorytm orientacji ścian Tworzenie scen trójwymiarowych Geometria konstrukcji brył z brył
Reprezentacja brył Wierzchołkowo-krawędziowa Ścienna Lista wierzchołków Lista krawędzi (par wierzchołków) Ścienna Lista ścian Ściana to lista wierzchołków
Reprezentacja - przykłady
Wierzchołkowo-krawędziowa Wierzchołki: [ [ 0 0 0 ] [ 2 0 0 ] [ 0 2 0 ] [ 0 0 2 ] [ 2 2 0 ] [ 2 0 2 ] [ 0 2 2 ] [ 2 2 2 ] ] Krawędzie: [ [ 1 2 ] [ 1 3 ] [ 1 4 ] [ 2 5 ] [ 2 6 ] [ 3 5 ] [ 3 7 ] [ 4 6 ] [ 4 7 ] [ 5 8 ] [ 6 8 ] [ 7 8 ] ]
Ścienna Wierzchołki [ [ 0 0 0 ] [ 2 0 0 ] [ 0 2 0 ] [ 0 0 2 ] [ 2 2 0 ] [ 2 0 2 ] [ 0 2 2 ] [ 2 2 2 ] ] Ściany [ [ 1 2 5 3 ] [ 2 6 8 5 ] [ 4 7 8 6 ] [ 1 3 7 4 ] [ 1 4 6 2 ] [ 3 5 8 7 ] ]
Rysowanie brył Po prostu rysujemy krawędzie w danym układzie współrzędnych Aby to zrobić na płaskim ekranie trzeba rzutować przestrzeń trójwymiarową na płaszczyznę ekranu Rzutowanie to odpowiednie operacje algebraiczne (np. pominięcie jednej współrzędnej, przesunięcie układu współrzędnych , obrót wokół środka układu współrzędnych)
Algorytm ścian niewidocznych Promienie światła
Obliczanie ścian niewidocznych Wektor normalny do ściany bryły jest skierowany do środka bryły Ścianę widzimy jeżeli kąt między jej wektorem normalnym i wektorem „patrzenia” (od oka do bryły) jest ostry Do sprawdzenia czy kąt między wektorami jest ostry wykorzystujemy iloczyn skalarny (iloczyn skalarny jest dodatni wtedy i tylko wtedy gdy kąt jest ostry)
Przykład (0,3,1) (5,2,5) (1,1,1) (1,1,0) (-1,1,-1) (2,-1,-1)
CSG CSG – Constructive Solid Geometry Założenia: Sposób tworzenia scen trójwymiarowych z istniejących części Założenia: Mamy pewną liczbę brył Potrafimy wykonać pewne operacje Każda scena składa się z brył z danego zbioru poddanych danym operacjom
CGS - przykłady Bryły podstawowe (przykład):
CGS - przykłady Suma
CGS - przykłady Część wspólna
CGS - przykład Różnica
CGS - zadanie Dane bryły: Skonstruować:
Algorytm „przeciągania” (?) Dany przekrój ciągniemy wzdłuż pewnej, z góry ustalonej ścieżki (np. odcinek, jakaś krzywa). Cały obwód zostawia ślad, który razem z początkowym i końcowym przekrojem tworzy bryłę. Uogólniony walec: bryła uzyskana za pomocą algorytmu przeciągania, ale z dopuszczonymi operacjami skręcania i zmiany skali w trakcie przeciągania.
Algorytm „przeciągania” Przykład bryły utworzonej za pomocą prostego algorytmu przeciągania
Algorytm „przeciągania” Przykład uogólnionego walca, który powstał ze zwykłego koła przez przeciąganie po krzywej ze zmianą skali.