Tag 2 6.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:

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:

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);

Aufgabe
Verwende den gerade erklärten Sketch als Grundgerüst und erstelle zwei eigene "Filter", um ein Bild durch geometrische Formen und Farbänderungen verfremdet darzustellen.

Kurzübung 2 – Pipettenwerkzeug

Programmiere ein Pipettenwerkzeug, mit dem man die Farbe aus einem geladenen Bild aufnehmen kann. Stelle die aufgenommene Farbe als gefülltes Rechteck am Mauspointer dar. Erstelle eine Variante, die die mittlere Farbe aus einem Aufnahmebereich von 5 X 5 Pixeln ermittelt.


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


int mode;

void setup(){
 size(690,300);
 colorMode(HSB);
}

void draw(){
    float xoff = 0.0;
    for(int x = 0; x < width; x++){
     for(int y = 0; y < height; y++){
       
       if(mode == 1 || mode == 2){
         float xc = map(x,0,width,0,255);
         float yc = map(y,0,height,0,255);
         set(x,y,color(xc,yc,mouseY));
       }else if (mode == 3){
         set(x,y, color(random(255)));
       }else if (mode == 4){
         // Perlin Noise
         //xoff = xoff + .01;
         //set(x,y, color(noise(xoff))*255);
         //println(noise(xoff));
         //set(x,y, color((randomGaussian()+2)*128.));
       }
     }
    } 
}

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