Bilder

Wie werden Bilder am Computer dargestellt?

Bilder darstellen

Um ein Bild mit Processing darzustellen wird das PImage-Objekt benötigt. Dazu müssen folgende Schritte getätigt werden:

1. Erstelle im Processing Ordner einen Ordner „data“ und speichere ein beliebiges Bild darin ab
2. Deklariere eine Variable des Typs PImage
3. Lade nun besagte Bilddatei in diese Variable mit dem loadImage() Befehl
4. Gib das Bild im Ausgabefenster mit Hilfe von image() aus

PImage img;

void setup(){
   size(800,600);
   img = loadImage("cat.jpg");
}

void draw(){
   background(0);
   image(img, 0, 0);
}

Das Programm wird im Ordner data nach dem Bild suchen und es darstellen.
Der Befehl image() erwartet als Parameter, das darzustellende Bild und die Koordinaten an welcher Stelle das Bild erscheinen soll. Zusätzlich kann Weite und Breite des Bilds angegeben werden.

image(img, x, y, width, height);

Bilder modifizieren

Filter

Mit dem tint() Befehl lassen sich Bilder einfärben

tint(255,0,0); 

 
Es gibt aber auch noch andere Filter, die über blendMode(MODE) angewandt werden können:
→ Reference
 
BLEND – normaler Modus
ADD – additive Überblendung mit den Weißanteilen
SUBTRACT – subtraktive Überblendung mit den Schwarzanteilen
DARKEST – nur die dunkelsten Stellen kommen durch
LIGHTEST – nur die hellsten Stellen kommen durch
DIFFERENCE – die Farben des unteren Bildes werden subtrahiert
EXCLUSION – ähnlich wie DIFFERENCE, aber nicht ganz so extrem
MULTIPLY – Farben werden multipliziert, das Resultat ist immer dunkler
SCREEN – das Gegenteil von MULTIPLY, hier werden die inversen Farben verwendet
REPLACE – die Pixel werden gänzlich ersetzt und verwenden nicht den Alphakanal

Farbwerte auslesen

Alle Pixel eines Bildes sind in einem Koordinatensystem angeordnet und gespeichert. Auch hier liegt der Ursprung in der linken oberen Ecke des Ausgabefensters. Diese Pixel können durch die x- und y-Koordinate angesprochen werden, zB mit dem Befehl get().

color c = img.get(500,500);

Mit get() werden also die Farbwerte ausgelesen und können in einer Variable mit dem Typ color gespeichert werden. Diese Variable kann dann ohne weiteres als Parameter eines fill() Befehls verwendet werden.

color c;  
// eine Variable vom Typ color deklarieren
c = img.get(500,500); 
//RGB Werte eines Bildes an der Stelle 500 x 500 auslesen und zuweisen
fill(c); 
// diese Werte als Füllfarbe definieren
ellipse(width/2, height/2, 10, 10);	
// eine Ellipse mit dieser Füllfarbe erzeugen

Möchte man nun alle Farbwerte eines Bildes auslesen, so muss hierzu ein verschachtelter Loop verwendet werden.

Übungen

Übung: Andy Warhol
Kreiere ein Bild, das einem Pop Art Bild von Andy Warhol nachempfunden ist.

Lösung

PImage img;   

void setup() {
  size(800, 600);
  img = loadImage("cat.jpg");  
}

void draw() {  
    
    image(img,0,0, 400, 300);
    // Filter the window with a threshold effect
    // 0.5 means threshold is 50% brightness
    tint(255,0,0);
    filter(THRESHOLD,0.5);
    
    image(img,width/2,0, 400, 300);
    filter(THRESHOLD,0.5);
    
    image(img,0,height/2, 400, 300);
    tint(#00FA27);
    filter(THRESHOLD,0.5);

    image(img,width/2,height/2, 400, 300);
    tint(#F5FA00);
    filter(THRESHOLD,0.5);
        
    blendMode(MULTIPLY);
    
    tint(255,0,0);
    image(img,0,0, 400, 300);

    tint(#00FA27);
    image(img,width/2,0, 400, 300);

    tint(#00EFFA);
    image(img,0,height/2, 400, 300);

    tint(#F5FA00);
    image(img,width/2,height/2, 400, 300);
}