Macierz obrazu
Każdy obraz można przedstawić jako macierz punktów składającą się z rzędów i kolumn.
Nasz obrazek składa się z 4 rzędów i 4 kolumn, czyli ma rozmiar 4 x 4 = 16 pikseli.
Podając położenie komórki w macierzy podajemy współrzędne (rząd, kolumna), w których leży dana komórka. Jednak przy pracy z obrazami współrzędne piksela podajemy jako (x,y), gdzie x jest położeniem piksela od lewej strony obrazka w prawo, a y położeniem piksela od góry obrazka w dół, czyli dokładnie odwrotnie jak w macierzy matematycznej, czy tablicach dwuwymiarowych.
Nie ma to większego znaczenia ponieważ tutaj dane obrazów zapisujemy w tablicy 1-wymiarowej.
Gdyby informacje o każdym pikselu były zapisane w postaci jednej liczby (tak jest na przykład w języku Java) nasza tablica opisująca obraz miałaby taki wygląd:
Jednak w JavaScript dane każdego piksela zapisane są w czterech kolejnych komórkach 1-wymiarowej tabeli, które podają w kolejności składowe koloru:
- r – (red) składnik czerwony
- g – (green) składnik zielony
- b – (blue) składnik niebieski
- a – (alpha) transparentność
Każdy ze składników jest liczbą od 0 do 255
W metodach tworzących kolor składnik alpha podajemy w postaci liczby zmiennoprzecinkowej od 0.0 do 1.0 (0 do 255)
Nasza tablica wygląda zatem tak:
W operacjach na obrazach możemy dokonywać zmiany danych poszczególnych pikseli. Operacje na pikselach i związane z nimi iteracje pokażemy dalej w tekście.