...
| Code Block |
|---|
pixels[loc] = color(r,g,b); |
Folgend das komplette Processing-Sketch:
| Code Block | ||||
|---|---|---|---|---|
| ||||
PImage myImage;
void setup() {
size(200, 200);
myImage = loadImage("EinBild.png");
}
void draw() {
loadPixels();
myImage.loadPixels();
for(int x=0; x<width; x++) {
for(int y=0; y<height; y++) {
int loc = x+y*width;
float r = red(myImage.pixels[loc]);
float g = green(myImage.pixels[loc]);
float b = blue(myImage.pixels[loc]);
pixels[loc] = color(r,g,b);
}
}
updatePixels();
} |
...
Die Methode zum setzen und auslesen von Bildinfromationen (Farben) lässt sich sehr gut nutzen um damit Bilder zu manipulieren oder – noch wichtiger – zu analysieren.
Pixelate
Im folgenden Beispiel verwenden wir die gelernten Funktionen um ein Bild gröber aufzulösen.
| Code Block | ||||
|---|---|---|---|---|
| ||||
PImage myImage;
int pixelSize = 10;
void setup() {
size(200, 200);
myImage = loadImage("EinBild.png");
}
void draw() {
myImage.loadPixels();
for(int x=0; x<width; x+=pixelSize) {
for(int y=0; y<height; y+=pixelSize) {
int loc = x+y*width;
color c = myImage.pixels[loc];
fill(c);
noStroke();
rect(x, y, pixelSize, pixelSize);
}
}
} |
...
Flashlight
Im folgenden Beispiel verändern wir die Helligkeit der Pixel durch die Position der Maus.
| Code Block | ||||
|---|---|---|---|---|
| ||||
PImage myImage;
void setup() {
size(200, 200);
myImage = loadImage("EinBild.png");
}
void draw() {
loadPixels();
myImage.loadPixels();
PVector mousePos = new PVector(mouseX, mouseY);
PVector currPixel = new PVector(0, 0);
for(int x=0; x<width; x++) {
for(int y=0; y<height; y++) {
int loc = x+y*width;
currPixel.x = x;
currPixel.y = y;
float r = red(myImage.pixels[loc]);
float g = red(myImage.pixels[loc]);
float b = red(myImage.pixels[loc]);
float distance = mousePos.dist(currPixel);
float brightness = (50-distance)/50;
r*=brightness;
g*=brightness;
b*=brightness;
r = constrain(r,0,255);
g = constrain(g,0,255);
b = constrain(b,0,255);
color c = color(r,g,b);
pixels[loc] = c;
}
}
updatePixels();
} |
Threshold
Im folgenden Beispiel zeichnen wir ein Schatz-Weiss Bild welches auf bestimmte Grenzwerte abgestimmt ist. Ausserdem zeichnen wir in diesem Beispiel nicht auf die Zeichenfläche direkt, sondern initialisieren ein neues “leeres” Bild auf dem wir dann zeichen:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
PImage myImage;
PImage destImage;
int threshold = 100;
void setup() {
size(200, 200);
myImage = loadImage("EinBild.png");
destImage = createImage(width, height, RGB);
}
void draw() {
myImage.loadPixels();
destImage.loadPixels();
threshold = mouseX;
for(int x=0; x<width; x++) {
for(int y=0; y<height; y++) {
int loc = x+y*width;
if(brightness(myImage.pixels[loc])<threshold) {
destImage.pixels[loc] = color(255);
} else {
destImage.pixels[loc] = color(0);
}
}
}
destImage.updatePixels();
image(destImage, 0, 0);
} |
...
Simple Sobel
Im letzten Beispiel verwenden wir einen Filter um Kanten zu erkennen. Dazu vergleichen wir immer den aktuellen Pixel mit seinen Nachbarn.
| Code Block | ||||
|---|---|---|---|---|
| ||||
PImage myImage;
PImage destImage;
void setup() {
size(200, 200);
myImage = loadImage("EinBild.png");
destImage = createImage(width, height, RGB);
}
void draw() {
myImage.loadPixels();
destImage.loadPixels();
for(int x=1; x<width; x++) {
for(int y=0; y<height; y++) {
int currLoc = x+y*width;
color currColor = myImage.pixels[currLoc];
int prevLoc = (x-1)+y*width;
color prevColor = myImage.pixels[prevLoc];
float difference = abs(brightness(currColor)-brightness(prevColor));
destImage.pixels[currLoc] = color(difference);
}
}
destImage.updatePixels();
image(destImage, 0, 0);
} |
...
Aufgaben
- Lest und versteht Seite 270 – 272 (Convolution Filter) im Buch “Learning Processing” von Daniel Shiffman.
- Schaut euch die Beispiele zu Bildern unter Generative Gestaltung an.
- Erstellt ein Beispiel, welches euch das Histogramm eines Bildes visuell wieder gibt. (R,G,B,Brightness).
- Erstellt ein Beispiel, welches für bestimmte Helligkeitswerte einen Buchstaben zeichnet.
...