Zastosowanie Macierzy w Grafice Komputerowej: Przykład Odbicia Horyzontalnego
Opublikowano: 05.11.2024
Macierze znajdują zastosowanie w wielu dziedzinach takich jak fizyka, ekonomia, robotyka czy mechanika. Jednak uważam jednym z najbardziej obrazowych i przystępnych przykładów ich użycia jest grafika komputerowa.
Dzięki macierzom możemy reprezentować zarówno pojedyncze piksele, gdzie każdy piksel ma wartość kolorów RGB (Red Green Blue):
\( P=
\begin{bmatrix}
R & G & B
\end{bmatrix}
\)
Jak i całe obrazy, które traktujemy jako macierze pikseli.
Przykład obrazu 3x3 piksele:
\(
\begin{bmatrix}
&[R_{00} & G_{00} & B_{00}] & [R_{01} & G_{01} & B_{01}] & [R_{02} & G_{02} & B_{02}]& \\
&[R_{10} & G_{10} & B_{10}] & [R_{11} & G_{11} & B_{11}] & [R_{12} & G_{12} & B_{12}]& \\
&[R_{20} & G_{20} & B_{20}] & [R_{21} & G_{21} & B_{21}] & [R_{22} & G_{22} & B_{22}]&
\end{bmatrix}
\)
Możemy też zapisać obraz w formie trzech odzielnych macierzy, poniżej przykład interaktywny dla obrazka 2x2 piksele:
Przykład pozwala modyfikować zawartość macierzy i na żywo obserwować jak wpływa to na obrazek.
Przyjmuje wartości z zakresu od 0 do 255.
Takie podejście umożliwia wykonywanie różnorodnych transformacji obrazu, jak np.: obracanie obrazka, skalowanie, przesunięcie czy odbicie.
Przykład transformacji, który prezentuję poniżej, to odbicie horyzontalne obrazu. Ta operacja powoduje odwrócenie obrazu wokół osi pionowej, co można wyobrazić sobie jako "przerzucenie" obrazu na drugą stronę.
Image by Adina Voicu from Pixabay
Jak ta operacja wygląda od strony matematycznej?
Przedstawmy nasz obrzek jako macierz:
\(\begin{bmatrix} P_{00} & P_{01} & P_{02} \\ P_{10} & P_{11} & P_{12} \\ P_{20} & P_{21} & P_{22} \end{bmatrix}\)
Każdy element \(P_{ij}\) to piksel na pozycji \((i,j)\) gdzie \(i\) oznacza numer wiersza, a \(j\) numer kolumny.
Jeśli chcemy odbić obraz względem osi pionowej (czyli zamienić piksele miejscami w poziomie), musimy dla każdego piksela w danym wierszu zamienić jego pozycję z odpowiadającym mu pikselem "po drugiej stronie" wiersza.
Wzór na nowe wzpółrzędne dla piksela możemy przedstawić w taki sposób:
\(P'_{i, j} = P_{i, (n - 1) - j}\)
gdzie,
\(n\) to liczba kolumn w macierzy
\(i\) to indeks wiersza
\(j\) to indeks kolumny, który zmienia się na \((n - 1) - j\)
Weźmy pierwszy piksel (\(P_{00}\)) z naszej macierzy:
\(\begin{bmatrix} P_{00} & & \\ & & \\ & & \end{bmatrix}\)
\(i\) zostaje identyczne czyli: 0
\(j\) wyliczymy ze wzoru: \( (n - 1) - j = (3-1) - 0 = 2\)
Korzystając z wyliczonych współrzędnych możemy umieścić piksel na jego nowym (odbitym miejsu):
\(\begin{bmatrix} & & P_{00} \\ & & \\ & & \end{bmatrix}\)
Po powtórzeniu tej operacji dla pozostałych pikseli macierz będzie wyglądać następująco:
\( \begin{bmatrix} P_{02} & P_{01} & P_{00} \\ P_{12} & P_{11} & P_{10} \\ P_{22} & P_{21} & P_{20} \end{bmatrix} \)