Kawałek Kodu

Co tu się odskryptala?! Czyli programistyczne porady na luzie

PrzyLUTuj mu! Czyli przetwarzanie graficzne obrazów.

Wbrew pozorom dzisiejszy wpis nie będzie uczył technik samoobrony, nie będzie też kursem lutowania online. Pokażę Ci jak od środka działają popularne funkcje dostępne w programach graficznych, jak negatyw, rozjaśnianie czy posteryzacja. Opierają się na jednopunktowych operacjach graficznych. Jednopunktowych, bo wpływ na wartość wynikowego punktu obrazu, ma wartość tylko jednego punktu obrazu źródłowego.
Operację taką można opisać równaniem: w(x,y)=F(z(x,y)), gdzie x, y, to współrzędne obrazu, z obraz źródłowy, a w obraz wynikowy. F to operacja jednopunktowa.

Czytaj dalej

The Fast & The Canvas, czyli szybki dostęp do pikseli na Canvas.

Pracując z elementem CANVAS spotykam się często z dwoma zagadnieniami: pobrania koloru piksela i kreślenia piksela. Jeśli chodzi stawianie punktu, to zazwyczaj spotykamy się z następującą metodą:

var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(100, 100, 1, 1);

Z zmiennej ctx mamy obiekt RenderingContext pozwalający na dostęp przez dwie współrzędne (stąd parametr '2d'). Punkt stawiamy poprzez nakreślenie wypełnionego prostokąta o wymiarach 1x1 (parametr 3 i 4) na współrzędnych 100,100 (parametr 1 i 2). Wcześniej ustawiliśmy kolor czerwony dla wypełnienia. Domyślny kolor wypełnienia to czarny, a domyślny kolor tła CANVAS to biały. I ta metoda oczywiście się sprawdza, ale niekoniecznie przy dynamicznych efektach na CANVAS, kiedy potrzebujemy postawić tych punktów tysiące lub dziesiątki tysięcy.

Jak być szybszym?

Czytaj dalej

Podróż do wnętrza kineskopu, czyli emulacja RGB.

Jeśli jako dziecko nie poznałeś smaku (a właściwie wyglądu) nowego kolorowego telewizora w Twoim domu, to spróbuję Ci go dziś przybliżyć. Przyblizyć teoretycznie i jeszcze bardziej wizualnie.

Jak zapewne wiesz, kolor na ekranie urządzenia, które teraz używasz powstaje z połączenia trzech barw: czerwonej, zielonej i niebieskiej (RGB). W zależności od natężenia każdej ze składowej ich połączenie tworzy inny kolor. Tyle, że ten kolor jest złudny, bo tworzą go trzy elementy (plamki) reprezentujące każdą ze składowych. Plamki są na tyle blisko, że ich nie zauważasz. Kiedy świecą mocno wszystkie trzy, Ty widzisz jeden punkt w kolorze białym. Skoro trzy plamki tworzą piksel, to każdy piksel zmieńmy w plamkę, a ich potrójna grupa utworzy nasz nowy, duży piksel. Każdy z dotychczasowych pikseli będzie reprezentował inną składową. Pozostaje tylko wybrać w jakim układzie będą reprezentować duży piksel.

Przychodzą mi do głowy trzy układy.

Czytaj dalej

Typowo męska logika, czyli fraktal Sierpińskiego.

Może już widziałeś ten piękny graficzny wzór, choć nie wiesz, że miałeś do czynienia z fraktalem. Fraktal to obiekt nieskończenie powtarzalny, albo samopodobny. Oznacza to, że w jego fragmencie jest zawarta całość. Mamy do czynienia z nimi nie tylko w formie komputerowej grafiki, ale również w otaczającym świecie (choć nie są to nieskończenie powtarzalne konstrukcje). Fraktalem jest kalafior czy brokuł, którego kawałek wyglądem przypomina całość. Banknoty niestety nie są fraktalami. Drzewo jest fraktalem. Wygląda na to, że cały wszechświat jest również fraktalem, którego odwzorowanie możemy znaleźć w żywej komórce.

Z fraktalami nieodłącznie wiąże się rekurencja. Dzięki niej powstaje trójkąt Sierpińskiego, kiedy to w duży trójkąt wrysowujemy odwórcony mniejszy, a pozostałe trzy miejsca są zapełniane w ten sam sposób jak duży. I tak dopóki starczy sił albo czasu.
Ale nie zawsze się wiąże. Możemy skorzystać z innej cechy liczb jaką jest możliwość ich reprezentacji binarnej i operacji logicznych na nich. W ten sposób możemy stworzyć fraktal Sierpińskiego oparty na trójkącie prostokątnym.

Czytaj dalej

Wyżymanie HTML, czyli gumowa kostka w CSS.

Kiedy poznawałeś wciągający świat transformacji 3D w CSS pewnie trafiłeś na efekt obracającego się sześcianu. Dziś możliwości CSS trochę spowszedniały, a my aby nie stać w miejscu zrobimy skok jednocześnie w przyszłość i przeszłość. Pokażę Ci odzworowanie retroefektu zwanego rubber vectors, korzystając z aktualnych możliwości transformacji 3D. Przy zderzeniu przeszłości i przyszłości zobaczysz coś niedzisiejszego. Właściwie to już widziałeś na powyższym wideo, ale za chwilę będziesz mógł cieszyć się tym oglądając na żywo.

Jak skręcić kostkę (nie swoją)?

Idea efektu jest dosyć prosta. Polega na rysowaniu kostki w standardowy sposób, natomiast co linię pokazujemy klatkę animacji o jeden (lub więcej) późniejszą. Musimy w tym celu mieć X buforów na poszczególne klatki animacji. Pierwszą klatkę rysujemy na pierwszym buforze, podczas kolejnej kopiujemy go (i wszystkie za nim) o jeden niżej, a klatkę rysujemy znów na pierwszym. Pobierając kolejne linie z coraz to "późniejszych" buforów sprawiają one wrażenie "ciągnięcia się" za tymi powyżej.

Czytaj dalej

Podczerwień czy nadfiolet, czyli kolor najbliższy spośród możliwych.

Ooo, już nie będzie tak kolorowo jak przy poprzednich wpisach. Zapoznamy się z problemem wyszukiwania podobnego (najbliższego) koloru dla zadanego koloru, przy założeniu, że działamy w ograniczonej palecie (np. mamy do czynienia z paletą indeksowaną).

Być może nie miałeś w ogóle styczności z tym problemem i czytasz wpis tylko z czystej ciekawości (co mnie również bardzo cieszy), więc wyjaśnię Ci na początek czym jest paleta indeksowana.

Z tym rodzajem palety mamy do czynienia, kiedy przechowujemy tabelę zawierającą pod kolejnymi indeksami kolory użyte w pliku graficznym.
Nie ma więc tu sytuacji, że każdy element grafiki (załóżmy piksel) jest określony przez indywidualny kolor. Zakładając, że mamy do czynienia z trybem RGB (bez kanału alpha) i pikselem białym w prawym górnym rogu, jest on określony poprzez grupę bajtów 255, 255, 255, a kolor czarny na prawno od niego, określony jest jako 0,0,0. Jeśli trzeci piksel jest znów biały, to jego miejsce w pliku zajmuje grupa 255, 255, 255.
W przypadku grafiki opartej na palecie indeksowanej, kolor biały może być przechowywany pod indeksem 0 w tabeli palety, a kolor czarny pod indeksem 1 tejże tabeli. Kolejność przechowywania kolorów w tabeli palety nie ma żadnego znaczenia, tzn. kolory nie muszą być ustawione w kolejności jasności czy relatywnie do położenia na kole barw. Tu trzy piksele (biały, czarny, biały) grafiki, będą reprezentowane w pliku poprzez wartości 0, 1, 0, odpowiadając indeksom w tabeli palety, czyli de facto kolorom, ale nie w sposób bezpośredni.

Rezprezentacja w pamięci obrazu (3 piksele) opartego o paletę bezpośrednią:

255,0,0 0,255,0 255,255,0 255,0,0
Czytaj dalej