Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr?: Podstawy grafiki komputerowej Jak widzi człowiek? Zanim zobaczymy obraz, przechodzi on przez wiele różnych części oka, a następnie nerwami wędruje do mózgu, gdzie jest dodatkowo przetwarzany (m.in. mózg odwraca zarejestrowany obraz). Uproszczony przebieg można przedstawić jako: Rogówka komora przednia oka soczewka ciało szkliste siatkówka nerwy mózg W siatkówce znajdują się dwa rodzaje światłoczułych receptorów: czopki i pręciki, które rejestrują obraz. Czopki odpowiadają za widzenie kolorów. Występują 3 rodzaje czopków, z których każdy reaguje tylko na jedno z 3 widm światła: niebieskie (około 420nm), zielone (około 530nm) i czerwone (około 700nm). Najmniej jest czopków niebieskich. Pręciki są dużo bardziej wrażliwe na światło od czopków. Pozwalają tyko na widzenie czarno-białe, jednak dzięki nim widzimy przy bardzo małej ilości światła. Obraz padający na siatkówkę jest odwrócony, w mózgu jest dodatkowo przetwarzany dzięki czemu widzimy go prawidłowo. Mózg może przetworzyć obraz w dowolny sposób - niekoniecznie to co widzimy istnieje w takiej samej postaci w rzeczywistości. Poniżej znajduje się kilka przykładów złudzeń optycznych. Siatka Hermana Policz liczbę szarych kropek:
Zjawisko irradiacji Biały kwadrat wydaje się być większy niż czarny: Sześcian Neckera
Nie wiadomo, który róg sześcianu leży bliżej, przez co mózg ma problemy z określeniem, które ściany są przednimi, a które tylnymi. Czym jest kolor? Światło jest promieniowaniem elektromagnetycznym, które posiada długość fali od około 380nm (fiolet) do około 760 nm (czerwień) i jest wykrywane przez wzrok (promieniowanie widzialne). Bardzo często dodatkowo do światła wlicza się promieniowanie podczerwone i nadfioletowe, które również są badane tymi samymi metodami. Światło posiada właściwości zarówno fali (np. odbicie, załamanie), jak i korpuskularne (np. zjawiska fotoelektryczne, jonizacja). Właściwości te są określane terminem dualizm korpuskularnofalowy. Światło możemy podzielić na światło wyemitowane i światło odbite: światło wyemitowane pochodzi bezpośrednio ze źródła, np. ze Słońca, żarówki, czy monitora. światło odbite pochodzi od obiektu, który odbija światło, natomiast sam go nie emituje (np. światło Księżyca, światło odbite od kartki papieru). Barwa powstaje w mózgu człowieka na podstawie zarejestrowanych przez oko fal świetlnych. Oko ludzkie potrafi odbierać fale pomiędzy 380, a 760 nm (światło widzialne) - jest to tzw. spektrum widzialne. Poniżej znajduje się ultrafiolet, powyżej podczerwień. Spośród wszystkich barw, które widzimy, możemy wyróżnić najważniejsze barwy, nazywane barwami podstawowymi. Barwy podstawowe są minimalnym zestawem kolorów, pozwalającym w wyniku ich łączenia na uzyskanie pozostałych barw. Dla człowieka minimalny zestaw barw składa się z 3 kolorów.
Możemy wyróżnić dwa rodzaje mieszania kolorów podstawych: addytywne i subtraktywne. Barwy addytywne korzystają z 3 kolorów: Czerwonego (Red), Zielonego (Green) oraz Niebieskiego (Blue) w skrócie RGB. Ten sposób powstawania barw występuje w świetle wyemitowanym. Połączenie wszystkich składowych w równych proporcjach daje kolor biały. Połączenie: czerwonego i zielonego daje żółty, czerwonego i niebieskiego magentę, natomiast zielonego i niebieskiego cyjan. Barwy subtraktywne korzystają również z 3 kolorów, jednak nieco innych: Żółtego (Yellow), Magenty (Magenta) oraz Cyjanu (Cyan) w skrócie CMY. Ten sposób powstawania barw występuje w świetle odbitym. Połączenie wszystkich składowych w równych proporcjach daje kolor czarny. Połączenie magenty i żółtego powoduje powstanie koloru czerwonego, magenty i cyjanu niebieskiego, natomiast żółtego i cyjany koloru zielonego. Matematyczne odwzorowanie barwy ze świata rzeczywistego, które uwzględnia sposób w jaki człowiek odbiera kolory nazywane jest przestrzenią kolorów. Przestrzenie opisują barwy w oderwaniu od ich subiektywnego odbioru przez człowieka. W wizualizacjach 3D najczęściej przedstawia się je jako zdeformowaną sferę lub sześcian, natomiast w wizualizacjach 2D przyjmuje kształt zdeformowanego trójkąta. Najpopularniejsze przestrzenie kolorów: RGB CMYK CIELab (CIE1976) Jedną z najważniejszych cech każdej przestrzeni kolorów jest rozpiętość barwna (ang. color gamut). Określa ona, jak dużo kolorów jest dostępnych w danej przestrzeni, urządzeniu (np. monitorze, drukarce), bądź materiale (np. papier fotograficzny). Im szersza rozpiętość, tym więcej kolorów można odwzorować, im węższa tym mniej. Przestrzeń RGB opiera się na wykorzystaniu 3 kolorów podstawowych: czerwonego (Red), zielonego (Green) i niebieskiego (Blue). Nazwa pochodzi od pierwszych liter angielskich nazw. Bazuje na addytywnym mieszaniu kolorów i jest najczęściej wykorzystywaną przestrzeń kolorów w informatyce. Można ją spotkać m. in. w większości plików graficznych, aparatach cyfrowych, skanerach i monitorach. Przestrzeń RGB jest zależna od urządzenia, tzn. wartości kolorów będą zależały od tego, jak dane urządzenie potrafi je odczytać bądź wyświetlić.
Przestrzeń CMYK opiera się na wykorzystaniu 4 kolorów: Cyjanu (Cyan), Magenty (Magenta), Żółtego (Yellow) oraz Czarnego (Black, oznaczanego najczęściej jako Key). Bazuje na subtraktywnym mieszaniu kolorów. Dodatkowy kolor czarny jest używany, ponieważ w prawdziwych wydrukach trudno jest uzyskać czystą czerń łącząc cyjan, magentę oraz żółty. Wykorzystywana jest najczęściej w wydruku (w poligrafii, drukarkach) i podobnie jak RGB jest przestrzenią zależną od urządzenia.
Przestrzeń CIELab jet przestrzenią opracowaną przez Międzynarodową Komisję Oświetleniową - CIE (Comission Internationale de l Eclairage). Składa się z 3 elementów: L* - jasność a* - położenie na osi czerwony-zielony b* - położenie na osi żółty-niebieski Pozwala odwzorować wszystkie kolory widziane przez człowieka, zawiera w sobie większą część przestrzeni RGB i CMYK. Bardzo ważną cechą tej przestrzeni jest to, że jest niezależna od urządzenia. Dzięki temu wykorzystuje się ją jako wzorzec, a także podczas konwersji pomiędzy innymi przestrzeniami. Przestrzeń CIELab - Wizualizacja dla L=75% Zapis kolorów w komputerze Najczęściej w komputerze możemy spotkać się z przestrzenią RGB, która zapisuje kolory ośmiobitowo. Oznacza to, że każda składowa będzie zapisywana na ośmiu bitach dla każdego koloru możliwe wartości będą w przedziale <0,255>. Każdy kolor jest zapisywany za pomocą zestawu trzech liczb, odpowiadających kolejno składowej czerwonej, zielonej i niebieskiej, np.: 255, 0, 0 będzie oznaczało kolor czerwony 0, 255, 0 kolor zielony 0, 0, 255 kolor niebieski Odpowiednio sterując wartościami możemy uzyskać różne inne kolory, np.: 0, 0, 0 kolor czarny 255, 255, 255 kolor biały 127, 127, 127 kolor szary 255, 0, 255 kolor różowy 255, 255, 0 kolor żółty 0, 255, 255 kolor jasnoniebieski, turkusowy W celu ułatwienia zapisu koloru, czasami stosuje się zapis z użyciem systemu szesnastkowego. Liczby podawane są wtedy bez przecinków, ponieważ łatwo zauważyć, że każda para liczb oznacza inną składową. Dodatkowo przed liczbami umieszcza się znak #. Przykładowo: #FF0000 kolor czerwony #00FF00 kolor zielony
#0000FF kolor niebieski Grafika rastrowa i wektorowa Monitory komputerowe wyświetlają obraz za pomocą drobnych punktów, które razem składają się na kształty i kolory. W podobny sposób są zapisywane obrazy w pamięci komputera. Najmniejszy element, z którego składa się obraz nazywany jest pikselem. Piksel posiada informacje o kolorze, oraz dokładnie ustaloną pozycję. [obrazek z zaznaczonymi pikselami] Takie rozwiązanie pozwala na natychmiastowe wyświetlenie obrazu i nadaje się idealnie np. do zdjęć. Jednak podczas zmiany rozmiaru mogą pojawić się problemy: Problem ten częściowo rozwiązują tzw. algorytmy interpolacji, które obliczają nowe wartości pikseli na podstawie skomplikowanych wzorów matematycznych, starając się usunąć efekt pikselizacji. Mimo to np. rysunki nawet po ich zastosowaniu mogą nie osiągnąć zadowalającej jakości (zazwyczaj następuje utrata ostrości). Sposobem na rozwiązanie tego problemu jest użycie grafiki wektorowej, która zamiast pikseli zapamiętuje obiekty za pomocą wzorów matematycznych. Dzięki temu stosując skalowanie stosujemy je tak naprawdę do przekształcenia samego wzoru i kształtu figury. Dzięki temu podczas rysowania nie są widoczne powiększone piksele. Oprócz tego mamy również możliwość zaznaczania i przesuwania pojedynczych figur w dowolny sposób. Ćwiczenie Narysuj koło w programie Gimp programie do grafiki rastrowej. Następnie zmniejsz je oraz zwiększ 4-krotnie (bez użycia algorytmu interpolacji). Zaobserwuj jak zmienia się krawędź. Powtórz tą samą czynność z użyciem interpolacji. Następnie korzystając z programu Inkscape (program do grafiki wektorowej) narysuj również koło i wykonaj zmniejszenie oraz zwiększenie. Zaobserwuj wygląd krawędzi koła. Jak można było zauważyć w ćwiczeniu, grafika wektorowa w przypadku rysunków zawierających np. figury geometryczne, czy krzywe pozwala na dużo większą swobodę podczas tworzenia.
Animacja komputerowa Animacja komputerowa jest jednym z działów grafiki komputerowej, który zajmuje się ożywianiem statycznych obrazów. Animacja składa się zazwyczaj z serii statycznych obrazów, nazywanych klatkami, które wyświetlane odpowiednio szybko oszukują mózg i sprawiają wrażenie ruchu. Minimalna prędkość z jaką muszą być wyświetlane klatki, aby ruch był płynny to według badań statystycznych około 10 klatek na sekundę (frames per second - fps). Oto zestawienie najczęściej używanych prędkości: 12 fps pierwszy standard filmowy 15 fps tradycyjne kreskówki 24, 25, 30 fps film kinowy Wartości te są wystarczające do zastosowań filmowych, jednak w przypadku bardzo dynamicznych scen (lub gdy klatki nie są ze sobą powiązane) należy stosować znacznie więcej fps. Ćwiczenie Wczytaj animację w programie gimp, a następnie wyeksportuj ją do animowanych plików gif, z różną liczbą fps: 3, 6, 10, 15, 20 (podczas eksportu pojawi się okno, gdzie należy zaznaczyć eksport jako animację oraz czas trwania każdej klatki=1000/ wybrane fps). Zaobserwuj co się dzieje podczas odtwarzania animacji. W ćwiczeniu animacja była tworzona z użyciem grafiki rastrowej w celu wprowadzenia w ruch danego elementu należało zmodyfikować piksele (w odpowiednich klatkach). Animacje można tworzyć również z użyciem grafiki wektorowej np. popularne animacje flash w większości są zrobione z jej użyciem. Możliwość przenoszenia w łatwy sposób obiektów oraz możliwość ich bezstratnego skalowania pozwala na bardzo dużą swobodę. Animacja z użyciem szkieletu Technika szkieletowa jest techniką, którą wykorzystuje się do tworzenia realistycznie poruszających się postaci i zwierząt. W tym celu tworzony jest uproszczony szkielet, który jest zbliżony do jego rzeczywistego odpowiednika. Szkielet ten posiada wirtualne stawy, które pozwalają na zginanie wirtualnych kości. Najczęściej na model nakładane są dodatkowe elementy tworząc wirtualną skórę. W technice tej występuje jednak problem z brakiem realistycznych ruchów mięśni, które nie są w żaden sposób odwzorowywane. Kości w szkielecie mają najczęściej ustaloną hierarchię, która może wyglądać następująco: Miednica Tułów Prawe ramię Prawe przedramię Prawa dłoń Lewe ramię Lewe przedramię Lewa dłoń Głowa Prawa kość udowa Prawa kość piszczelowa Prawa stopa Lewa kość udowa Lewa kość piszczelowa Lewa stopa
Rozwiązanie to pozwala na automatyczne poruszanie kośćmi znajdującymi się niżej w hierarchii (co odwzorowuje rzeczywistość poruszając np. ramieniem poruszamy również dłonią i palcami). Technika szkieletowa może być wykorzystywana w grafice 2D oraz 3D, jednym z programów 2D, który pozwala na tworzenie animacji z jej wykorzystaniem jest Stykz (strona domowa: http://www.stykz.net/). Technika szkieletowa w programie Stykz została ograniczona do samego szkieletu, który możemy dowolnie budować z użyciem odcinków- kości o długości i szerokości ustawianej przez nas. Po uruchomieniu programu Stykz otwiera się okno, gdzie z sekcji Create a new document wybieramy Default Document. Szkielet postaci wygląda następująco: Na czerwono zaznaczone są wirtualne stawy punkty których położenie należy zmienić w celu poruszenia kości. Żółty punkt jest głównym stawem, znajdującym się najwyżej w hierarchii i służy głównie do przesuwania całej postaci po obszarze roboczym. Stykz definiuje dwa rodzaje kości : linie oraz okręgi, które możemy dodawać korzystając z okna narzędziowego. Dodawanie kości do już istniejącego szkieletu polega na wybraniu rodzaju kości i kliknięciu na wybrany staw (czerwone bądź żółte kółko). Możemy również stworzyć zupełnie nowy szkielet klikając w dowolnym miejscu w obszarze roboczym. Grubość i kolor kości (oraz kilka innych ustawień) możemy zmienić w oknie Segment properties, po uprzednim jej zaznaczeniu Zaznaczanie stawów Zaznaczanie kości kości- odcinki kości- okręgi
Zmiana rodzaju kości Ustawienie widoczności oraz ruchów Szerokość - grubość Długość Kąt pod jakim ustawiona jest kość Kolor Okno o nazwie Frames służy do zarządzania klatkami. Domyślnie po utworzeniu nowego projektu mamy już utworzoną pierwszą klatkę. Następnie w celu dodania kolejnej klikamy ikonę New Frame znajdującą z prawej strony. Usunąć klatkę można wybierając opcję Delete z menu otwierającego się po kliknięciu prawym klawiszem. Po dodaniu nowej klatki postać pozostaje w tej samej pozycji, jaką miała w ostatniej klatce. Ćwiczenie Uruchom program Stykz i stwórz prostą animację poruszającej się postaci oraz biegnącego psa.