Skąd się biorą kolory na ekranie?

Wyświetlacz w zestawie CODEBOX Tv jest pełnokolorowy – każdy z jego pixeli ma wbodowane trzy diody led – czerwoną (Red), zieloną (Green) i niebieską (Blue) – w podobny sposób zbudowane jest większość ekranów, które możesz spotkać na co dzień w telewizorach, telefonach czy tabletach – wszystkie one wyświetlają kolory w trybie RGB (Red Green Blue) miksując proporcje tych właśnie trzech składowych kolorów.

W trybie RGB kolorem wyjściowym jest kolor czarny – taką barwę ma wyłączony ekran telefonu czy telewizora. Wyświetlacz z zestawu CODEBOX Tv nie jest czarny, ale przyjmujemy, że odpowiednikiem czerni jest brak świecenia diody.

Zrwóć uwagę, jak powstają barwy pośrednie w trybie RGB:
– żółty to połączenie czerwonego i zielonego
– biały to maksymalne świecenie wszystkich trzech składowych
– fioletowy to połączenie czerwonego i niebieskiego
– połączenie zielonego i niebieskiego to kolor seledynowy
– czarny to brak świecenia – czyli wszystkie trzy składowe na zero

Jak sterujemy kolorami?

Naszym głównym narzędziem do zarządzania kolorami pixeli jest bloczek Tv : Kolor

Jak widzisz, jego trzy parametry to właśnie składowe kolorów trybu RGB, czyli kolejno: CZERWONY (Red), ZIELONY (Green) i NIEBIESKI (Blue).

Przykład 1 : Kolorowa emotka

Zwróć uwagę na istotną rzecz, która dzieje się w powyższym przykładzie. Na ekranie są cztery prostokąty, pierwsze dwa są czerwone, ale tylko przed pierwszym znajduje się bloczek KOLOR – w momencie kiedy ustawimy kolor na jakąś wartość, będzie ona obowiązywać dla wszystkich następujących potem bloczków rysujących (PROSTOKĄT i WYŚWIETL LICZBĘ) do momentu, aż nie zmienimy jej na inny kolor. Dzięki temu, jeśli chcemy wyświetlić więcej obiektów w tym samym kolorze, nie musimy przed każdym z nich umieszczać bloczka KOLOR, wystarczy jeden na początku.

Przykład 2 : Elf

Drugi przykład pokazuje podstawową słabość rysowania przy pomocy kodu – jeśli chcemy stworzyć jakąkolwiek bardziej złożoną ilustrację, nasz kod (czy to w bloczkach, czy pisany) szybko zaczyna rozrastać się do znacznych rozmiarów. Na pewno nie jest to najbardziej efektowna metoda rysowania – dlatego wymyślono programy graficzne 😉

Tak czy inaczej, programowanie tego typy pixel artowych ilustracji to świetna zabawa i logiczno/matematyczna łamigłówka, niczym układanie puzzli. Jeśli szukasz więcej wzorów, na których możesz poćwiczyć programowanie wyświetlacza wystarczy, że wpiszesz w wyszukiwarkę internetową 8×8 piexel art i przełyczysz na tryb GRAFIKI

Przykład 3 : Kolor tęczy

Kiedy więc rysowanie poprzez programowanie ma sens? Na przykład wtedy, kiedy chcemy stworzyć jakiś wizualny efekt, albo interaktywną animację. Zobacz, jak można łączyć sygnały z czujników robota z obiektami wyświetlanymi na ekranie. Na poniższym video przy pomocy potencjometru sterujemy kolorem prostokąta.

Tym razem do określenia koloru użyliśmy bloczka Tv : Kolor tęczy pozwala on nam zdefiniować dowolny odcień koloru przy pomocy jednej liczby dzięki czemu łatwo możemy tworzyć animowane przejścia tonalne pomiędzy kolorami i łatwo uzyskać tytułowy tęczowy efekt. Ograniczeniem tej metody określania kolorów jest fakt, że nie możemy sterować jasnością świecenia.

Przykład 4 : Konfetti

Wprowadźmy trochę dynamiki na nasz wyświetlacz. Niezawodnym sposobem na wprowadzenie do tworzonego przez nas programu odrobiny zamieszania jest użycie liczb losowych. Spróbujmy zaprogramować nasz wyświetlacz tak, aby z każdym odtworzeniem pętli “powtarzaj” zapalał się jeden pixel o losowych współrzędnych X i Y oraz losowym kolorze.

Na początku każdej pętli ekran jest czyszczony przy pomocy bloczku WYCZYŚĆ WYŚWIETLACZ. Spróbujmy sprawdzić, co będzie jeśli wyłączymy ten bloczek (kliknij na niego prawym przyciskiem myszy i zaznacz opcję WYŁĄCZ BLOK).

Tym razem pixele raz zapalone nie są wyłączane na początku pętli, dzięki czemu otrzymujemy ciekawy, narastający efekt przypominający rozsypywanie konfetti.

Zwróć uwagę, że tym razem program jest dość prosty – składa się raptem z kilku bloczków, a otrzymujemy efekt sprawiający wrażenie złożoności – gdybyśmy chcieli stworzyć go w jakimś graficznym programie do tworzenia animacji, musielibyśmy się dużo bardziej napracować.

Na tym przykładzie najlepiej widać, kiedy “rysowanie poprzez programowanie” ma sens. Kiedy chcemy narysować jakiś konkretny obiekt – kota, dom, drzewo, itd., lepiej użyć programu graficznego. Ale kiedy chcemy stworzyć jakąś generowaną animację, którą można matematycznie opisać, być może prościej będzie ją zaprogramować, niż rysować klatka po klatce. A na pewno, kiedy chcemy stworzyć coś interaktywnego – lampę, która zapali się, kiedy wejdziemy do pokoju, albo animację która będzie reagować na nasze ruchy – wtedy nie obejdzie się bez programowania.