2.2 Pixel modifizieren

Farbwerte auslesen und verarbeiten

Die Pixel des Bitmap-Bildes sind in einem Koordinatensystem angeordnet, der Ursprung liegt in der linken oberen Ecke des Ausgabefensters. Jedes Pixel kann durch Angabe seiner x- und y-Koordinate eindeutig angesprochen werden. Mit dem Befehl get() lassen sich Farbwerte Pixel unter Angabe der Koordinaten auslesen:


color c = img.get(200,300);

Obige Code-Zeile liest den Farbwert des Pixels an der Koordinatenposition x=200, y=300 aus und weist ihn der Variable c zu. Diese wird gleichzeitig als vom Variablen-Typ color definiert. Variablen vom Typ color werden auf gleiche Weise wie die bereits bekannten Typen int oder float deklariert:


color c;                    // Variable vom Typ color deklarieren
c = color(255,0,0);     // der Variablen einen Farbwert zuweisen
fill(c);                    // Variable verwenden

Einer Variablen vom Typ color kann nun ein Farbwert zugewiesen werden, der später überall dort angewandt werden kann, wo Farbwerte verwendet werden.

Möchte man nun alle Pixel eines Bildes auslesen, so verwendet man dafür in der Regel zwei verschachtelte for-loops:


for(int y=0; y < height; y += 1){ 
     for(int x=0; x < width; x += 1){
        color c = img.get(x,y);
     }
}

Beispiel 2-3


PImage img;
float resX = 30;
float resY = 30;
int shape = 1;
int thickness = 1;

void setup(){
   size(1000,1000);
   img = loadImage(„grimes.jpg“); 
   img.loadPixels();
}

void draw(){
   background(255);
   for(int y=0; y < height; y += resY){ 
     for(int x=0; x < width; x += resX){
       int pos = x + y * width;
       color c = img.get(x,y);
       fill(c);

       if(shape == 1){
         noStroke();
         ellipse(x,y,resX, resY);
       }else if(shape == 2){
         stroke(140);
         rect(x,y, resX, resY);
       }else if(shape == 3){
         stroke(c,100);
         strokeWeight(thickness);
         line(x,y, x+resX, y+resY);
       }
     }
   }
}

void keyPressed(){

   if(key == '+‘){
       resX += 1;
       resY += 1;
   }
   if(key == '-‘ && resX > 1){
       resX -= 1;
       resY -= 1;
   }

   if(key == '1‘){
     shape = 1;
   }
   if(key == '2‘){
     shape = 2;
   }
   if(key == '3‘){
     shape = 3;
   }
   if(key == 'y‘ && thickness > 1){
     thickness = thickness/2;
   }
   if(key == 'x‘){
     thickness = thickness*2;
   }
}

Um visuelle Eigenschaften von Farben auszulesen stehen in Processing einige weitere Befehle zur Verfügung:

  • blue() Blauanteil einer Farbe im RGB-Modus(0-255).
  • green() Grünanteil einer Farbe im RGB-Modus(0-255).
  • red() Rotanteil einer Farbe im RGB-Modus(0-255).
  • hue() Die Sättigung einer Farbe im HSB-Modus (0-255).
  • saturation() Die Sättigung einer Farbe im HSB-Modus (0-255).
  • brightness() Die Helligkeit einer Farbe im HSB-Modus (0-255).
  • alpha() Die Transparenz einer Farbe (0-255).

colorMode() – HSB Farbraum<

Mit dem Befehl colorMode() lässt sich einstellen, nach welchem Farbraum Processing Farben verarbeitet. Normalerweise verwendet Processing den RGB-Farbraum, weshalb bspw. der Befehl color() die Parameter Rot, Grün und Blau erwartet: color(255,100,100); Daneben lassen sich Farben auch im HSB Farbraum angeben (auch als HSV bezeichnet). Eine Farbe wird dann nicht über Rot, Grün und Blau, sondern über Hue, Saturation und Brightness definiert:

  • Hue – Der Farbwert der Farbe. Wird über einen Winkel von 0 bis 360 Grad im Farbkreis definiert.
  • Saturation – Die Sättigung der Farbe. Wird von 0-100% angegeben.
  • Brightness – Die Helligkeit der Farbe. Wird von 0-100% angegeben.

Farbwähler in Photoshop mit unterschiedlichen Farbsystemen (links). HSB-Farbwähler kreisförmigem Hue (rechts).


colorMode(HSB);
color c = color(100, 255, 255);
background (c);

set()-Befehl

Farbwerte von Bitmap-Bildern lassen sich mit dem get()-Befehl auslesen. Analog dazu lassen sie sich mit dem set()-Befehl auch in Pixel schreiben. Der Befehlt erwartet die Koordinaten des Pixels sowie den zu schreibenden Farbwert:


img.set(200,300, color(255,0,0));       // setzt das Pixel an Position 200, 300 auf rot

Zuvor muss eine PImage-Variable definiert worden sein (in obiger Zeile „img“).

Die Zeichenfläche des Ausgabefensters ist immer und automatisch vom Typ PImage. Daher können get() und set() verwendet werden, um den Inhalt des Ausgabefensters zu manipulieren.

Beispiel 2-4


void setup(){
 size(800,800);
 colorMode(HSB);
}

void draw(){
 for(int x = 0; x < width; x++){
   for(int y = 0; y < height; y++){
       float xc = map(x,0,width,0,255);
       float yc = map(y,0,height,0,255);
       set(x,y,color(xc,yc,mouseY));
   }
 } 
}

void keyPressed(){
 if (key == '1‘){
   colorMode(HSB);
 }else if (key == '2‘){
   colorMode(RGB);
 }
}