niedziela, 21 lipca 2013

Proste filtry graficzne w Processing : zrozumieć zapis koloru

Strasznie mi wstyd, że od miesiąca nie znalazłem czasu, by tu zajrzeć.
Dziś wrócę do moich korzeni, czyli styku programowania i grafiki komputerowej. Chciałbym pokazać osobom mniej zaawansowanym jak napisać prosty filtr do obrazu statycznego. Będę pracował nad zdjęciem Cateriny, której fotkę można znaleźć tu: http://commons.wikimedia.org/wiki/File:Luca_Patrone_Caterina_in_autumn.jpg Obraz pochodzi z Wikicommons, czyli możemy z niego legalnie i za darmo korzystać; objęty jest licencją CC BY-SA (tutaj możesz poczytać o czym ona mówi). Obraz został znormalizowany i skadrowany.

Filtr, który będę pokazywał nazywa się plamą barwną. Obraz po zadziałaniu filtra winien wyglądać, jakby był malowany farbami. Znajdujące się obok siebie piksele powinny zlać się ze sobą dając efekt plamy, która powstanie poprzez zatarcie drobnych różnic kolorystycznych pomiędzy pikselami. Nie będziemy rozmazywali obrazu.

Zanim jednak, muszę przypomnieć dwie tożsamości z logiki Boole'a. Z tabeli prawdy koniunkcji wynika, że:

W językach C, C++ czy Java (Processing jest nakładką na Java) istnieją dwa operatory koniunkcji. Pojedynczy ampersand (&) oraz podwójny (&&). Użycie podwójnego ampersanda bierze lewe i prawe wyrażenie, i pomiędzy tymi dwoma wyrażeniami oblicza wartość logiczną. Nas bardziej interesuje operator pojedynczego ampersanda. Oba operandy pojedynczego ampersanda (liczby, nie wartości logiczne) są traktowane operatorem koniunkcji w taki sposób, że pierwszy bit pierwszego operandu jest w koniunkcji z pierwszym bitem drugiego operandu, drugi bit pierwszego operandu z drugim bitem drugiego operandu itd.




Na rysunku powyżej pokazałem przykład działania operatora ampersand. Z tożsamości u góry wynika, że te bity drugiego operandu na których są jedynki spowodują przepisanie bitów pierwszego operandu, a tam gdzie drugi operand ma zera, w wyniku znajdą się zera. Aby było szybciej, operację koniunkcji bitowej będę nazywał and-owaniem.

Zakładam, że obraz zapisany jest za pomocą przestrzeni koloru RGB, 24 bity / piksel, w formacie RGBRGBRGB... Załóżmy, że obraz jest w skali szarości, czyli R=G=B. Na ostatnim bicie (prawym, LSB) można zapisać wartość co najwyżej wartość 1, na skrajnie lewym (MSB) co najwyżej 127.

Jesteśmy w skali szarości. Wykonując koniunkcję piksela przez wartość 255 jego wartość się nie zmieni, natomiast jeżeli dwa piksele różnią się minimalnie (o jeden), to gdyby wykonać koniunkcję przez 0b11111110, czyli 254, to różnice między tymi pikselami by się zatarły. Bazując na tej zasadzie będzie wykonywany efekt plamy barwnej. Wpierw na obrazie w skali szarości (znormalizowanym), później kolorowym. Caterina będzie miała ciężki dzień.

Przygotowałem następujący zestaw masek przez które będę and-ował kolejne piksele obrazka:




odpowiadające kolejno wartościom: 0xFF, 0xF8, 0xF0, 0xE0, 0xC0, 0x80. Ponieważ każda z tych masek dotyczy tylko jednej składowej koloru, to w praktyce każdy piksel trzeba będzie and-ować przez 0xFFFFFF, 0xF8F8F8 itd...

Wraz z kolejną maską zacierane będzie coraz więcej informacji o kolorze, co oznacza że coraz liczniejsze grupy pikseli będą miały identyczną wartość.

Uruchomiłem kod generujący maskowanie pikseli zgodnie z opisanym algorytmem. Wyszło tak:


Lewy górny róg obrazu opisuje wartość hex maski użytej do uzyskania obrazu.

Na obrazie kolorowym można spodziewać się efektów dodatkowych. Wartości RGB będą różne, zatem możliwe że dla danego koloru przeand-owanie piksela spowoduje że nie wszystkie składowe koloru ulegną zmianie, a w rezultacie że na obrazie pojawią się kolory, których nigdy nie było. Przykład:


 
Oba kolory po prawej powstały przez przeand-owanie koloru po lewej, lecz tak jak w pierwszym wypadku z zieleni przeszło w zieleń, tak w drugim pojawił się niepodobny kolor. Wracając, na obrazie kolorowym wyszło tak:


Kod generujący powyższe filtr w języku Processing wygląda następująco:


/*
 * Prosty filtr graficzny - efekt barwnej plamy w Processing
 * Copyright (C) 2013  Adam 'foo-script' Rakowski
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.

 * Źrodło obrazka z przykładu: http://commons.wikimedia.org/wiki/File:Luca_Patrone_Caterina_in_autumn.jpg
 * Obraz na licencji CC BY-SA
 */


PImage przed;

void setup()
{
  przed = loadImage("obraz.jpg");
  if (przed==null)
  {
    print("Obraz nie istnieje");
    return;
  }
  
  size( przed.width*2, przed.height*3);
  
  int[] maski = { 0xf8f8f8, 0xf0f0f0, 0xe0e0e0, 0xc0c0c0, 0x808080 };

  image( przed, 0, 0 );
  for (int w=0; w<3; w++)
    for (int k=0; k<2; k++)
    {
      if (w==0 && k==0) continue;
      image( filtr_plamy(przed, maski[2*w+k-1]) , k*przed.width, w*przed.height);
      text( String.format("%H", maski[2*w+k-1]) , k*przed.width, w*przed.height+10 );
    }
}

PImage filtr_plamy(PImage zrodlo, int maska)
{
  assert(zrodlo != null);
  PImage wynik=przed.get();
  wynik.loadPixels();
  for (int i=0; i<zrodlo.width * zrodlo.height; i++)
    wynik.pixels[i] &= maska;
  return wynik;
}