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:
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 Qualität 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);
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;
}
}