Page Comparison

...

Jedes Bild besteht aus einem Array an Farbinformationen (siehe Wikipedia). Diese Informationen werden in einem Raster (Breite, Höhe) dargestellt und ergeben so das ganze Bild. Abgelegt werden diese Informationen jedoch in einem simplen fortlaufenden Array [0][1][2][3]...[n]. Wir müssen also nun wissen, wie wir von einer Position aus dem Array (Index) auf eine Position auf dem Screen (x, y) schliessen können. Zur Veranschaulichung kann folgende Grafik herangezogen werden.

Image RemovedImage Added

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:

...

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

Image RemovedImage Added

Aufgaben

• Versucht andere Muster mit Hilfe des Pixel-Arrays zu zeichnen.
• Versucht folgendes Muster mit der gelernten Methode zu zeichnen:

Image RemovedImage Added

Pixel Farben auslesen

Auf die gleiche Art und Weise, wie wir die Farbwerte im pixels[]-Array setzen können, lassen sich diese auch auslesen. Dies lässt sich zum einen als color(r,g,b)-Variable machen, als auch Komponentenweise durch red(pixel[loc]), green(pixel[loc]) und blue(pixel[loc]). Zur Veranschaulichung können wir das Beispiel “P03_6_Pixels_Farbe_laden” anschauen.

Image RemovedImage Added

Bei diesem Beispiel machen wir das gleiche, was wir ganz zu Beginn getan haben, um ein Bild zu laden und auf der Zeichenfläche anzuzeigen. Dieses Mal verwenden wir aber statt der vor definierten Funktion image() eine eigene Funktion, welche durch alle Pixel des Arrays des Bildes geht und die darin enthaltenen Farbinformationen extrahiert:

...

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

Image RemovedImage Added

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

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

Image RemovedImage Added

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:

...

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

Image RemovedImage Added

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

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

Image RemovedImage Added

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.

...