Macierz obrazu

Każdy obraz można przedstawić jako macierz punktów składającą
się z rzędów i kolumn.

HTML5 canvas - macierz obrazu

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
pixela od lewej strony obrazka w prawo, a y położeniem piksela od góry
obrazka w dół, czyli doładnie odwrotnie jak w macierzy matematycznej,
czy tablicach dwuwymiarowych.

Nie ma to większego znaczenia ponieważ tutaj dane obrazów
zapisujemy w tablicu 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:

HTML5 canvas - macierz obrazu

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:

  1. r – (red) składnik czerwony
  2. g – (green) składnik zielony
  3. b – (blue) składnik niebieski
  4. 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:

HTML5 canvas - macierz obrazu

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *