Pliki i kolory.

Prezentacja na temat: "Pliki i kolory."— Zapis prezentacji:

1 Pliki i kolory

2 Modele barw

3 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

4 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

5 Model CMY

6 Przestrzeń koloru CMY

7 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

8 Model RGB

9 Przestrzeń modelu RGB

10 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ść

11 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)

12 Model użytkowy HSV Z tego koła wybiera się: barwę (H) nasycenie (S)
i dodatkowo jasność (V) jako oddzielny parametr

13 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.

14 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

15 Przykład

16 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.

17 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

18 Kolory w internecie

19 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

20 Tabela kolorów bezpiecznych

21 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.

22 Efekt przesunięcia Na środku kolor oryginalny, wokół możliwe kolory po przesunięciu.

23 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.

24 Dithering - przykład Oryginał Po ditheringu

25 Mechanizm ditheringu

26 Dithering na szaro

27 Wygładzanie

28 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.

29 Anti-aliasing – metoda

30 Anti-aliasing – przykład
Z wygładzaniem Bez wygładzania

31 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.

32 Pliki obrazów

33 GIF Graphic Interchange Format – najpopularniejszy format plików graficznych w internecie. Cechy: Indeksowany kolor 8-mio bitowy Kompresja LZW Przezroczystość Animacja Przeplot

34 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.

35 GIF - kompresja Kompresja LZW – (Lempel-Zev-Welch) Bezstratna
Wykorzystuje powtórzenia w strumieniu danych. Algorytm (w dużym uproszczeniu): [ # # # # # # # # # ] kompresuj do: [ 9 # ]

36 GIF – przykład 100 x 100 pikseli Paleta 8 bitów
Oryginał (BMP) bajtów GIF 1085 bajtów 10 razy mniejszy!

37 GIF – przykład 100 x 100 pikseli Paleta 8 bitów
Oryginał (BMP) bajtów GIF 1666 bajtów ponad 50% większy niż poprzedni

38 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

39 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.

40 GIF – przeplot, przykład
W trakcie ściągania Bez przeplotu Z przeplotem

41 GIF – wykorzystanie TAK Logo, rysunek, kreskówka, schemat
Prosta animacja Obrazek pokazywany na specjalnych tłach NIE Obrazy fotograficzne

42 JPEG Joint Photographic Expert Group Cechy:
24 bitowy kolor w modelu RGB Kompresja stratna

43 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)

44 JPEG – przykład

45 JPEG – przykład kompresji

46 JPEG

47 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)

48 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 – odcieni przezroczystości Informacja o korekcji gamma

49 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.

50 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

51 PNG - przykład BMP – 10999 bajtów PNG – 1055 bajtów (GIF – 1085)
PNG – 953 bajty (GIF – 1666)

52 Algorytmy graficzne

53 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ł

54 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

55 Reprezentacja - przykłady

56 Wierzchołkowo-krawędziowa
Wierzchołki: [ [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ] 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 ] ]

57 Ścienna Wierzchołki [ [ 0 0 0 ] [ 2 0 0 ] [ 0 2 0 ] [ 0 0 2 ]
[ ] [ ] [ ] [ ] ] Ściany [ [ ] [ ] [ ] [ ] [ ] [ ] ]

58 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)

59 Algorytm ścian niewidocznych
Promienie światła

60 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)

61 Przykład (0,3,1) (5,2,5) (1,1,1) (1,1,0) (-1,1,-1) (2,-1,-1)

62 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

63 CGS - przykłady Bryły podstawowe (przykład):

64 CGS - przykłady Suma

65 CGS - przykłady Część wspólna

66 CGS - przykład Różnica

67 CGS - zadanie Dane bryły: Skonstruować:

68 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.

69 Algorytm „przeciągania”
Przykład bryły utworzonej za pomocą prostego algorytmu przeciągania

70 Algorytm „przeciągania”
Przykład uogólnionego walca, który powstał ze zwykłego koła przez przeciąganie po krzywej ze zmianą skali.