Versions Compared

Version Old Version 6 New Version 7
Changes made by

Joël Gähwiler

Joël Gähwiler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Wenn wir nur mit der Processing Zeichenfläche arbeiten und keine externen Bilder hinzu laden, können wir die Farben auf der Zeichenfläche direkt aus dem pixels[]-Array auslesen. Dazu laden wir uns die Farbwerte in den Speicher loadPixels() gehen mit zwei verschachtelten for-Schleifen durch x und y Positionen und setzen an der entsprechenden Stelle einen neuen Farbwert pixels[loc] = color(255);. Zum Abschluss ist es wichtig updatePixels() auf zu rufen um die neuen Werte zu aktualisieren:

Code Block
titleBeispiel
collapsetrue
void setup() {
  size(200, 200);
}

void draw() {
  loadPixels();

  for(int x=0; x<width; x++) {
    for(int y=0; y<height; y++) {
      int loc = x+y*width;
      
      if(x%2 == 0) {
        pixels[loc] = color(255);
      } else {
        pixels[loc] = color(0);
      }
    }
  }

  updatePixels();
}

Wenn wir das für jeden zweiten x-Wert machen erhalten wir beispielsweise folgendes Bild:

...

Code Block
pixels[loc] = color(r,g,b);
Code Block
titleBeispiel
collapsetrue
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();
}

Pixel lesen, verändern und schreiben

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.

Im folgenden Beispiel “P03_7_Pixels_Pixelate” verwenden wir die gelernten Funktionen um ein Bild gröber aufzulösen.

Code Block
titleBeispiel
collapsetrue
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);
    }
  }
}


Processing_03_9

Im Beispiel “P03_8_Pixels_Brightness_Interaktiv” folgenden Beispiel verändern wir die Helligkeit der Pixel durch die Position der Maus.

Code Block
titleBeispiel
collapsetrue
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();
}


Processing_03_10

Im folgenden Beispiel “P03_9_Pixels_Threshold” 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
destImage = createImage(width, height, RGB);
destImage.pixels[loc] = color(255);
Code Block
titleBeispiel
collapsetrue
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);
}


Processing_03_11

Im letzten Beispiel “P03_10_Pixels_Nachbar” verwenden wir einen Filter um Kanten zu erkennen. Dazu vergleichen wir immer den aktuellen Pixel mit seinen Nachbarn.

Code Block
titleBeispiel
collapsetrue
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);
}


Processing_03_12

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.

...