Page Comparison

In diesem Tutorial werden wir anfangen mit Bildern zu arbeiten – dabei benutzen wir zunächst statische Bilder. Wir werden Schritt für Schritt unsere eigenen Filter schreiben und einfache Histogramm-Aufgaben bearbeiten.

...

Danach können wir ein beliebiges Bild lade laden und darstellen:

Code Block
myImage = loadImage("Bild.png"); image(myImage, 0, 0, width, height);

Folgend das komplette Processing-Sketch:

Code Block

title	Beispiel
collapse	true

PImage myImage;

void setup() {
  size(200,200);
  myImage = loadImage("EinBild.png");
}

void draw() {
  image(myImage, 0, 0, width, height);
}

...

`tint(255);`	Originale Darstellung des Bildes
`tint(100);`	Etwas mehr Schwarz-Anteile
`tint(255, 127);`	Transparenz auf 50%
`tint(0, 200, 127);`	Grünlich einfärben
`tint(255, 0, 0, 200);`	Rot einfärben und Transparenz auf ca. 75%

Folgend ein komplettes Processing-Sketch:

Code Block

title	Beispiel
collapse	true

PImage myImage;

void setup() {
  size(200,200);
  myImage = loadImage("EinBild.png");
}

void draw() {
  background(255);
  tint(100);
  image(myImage, 0, 0, width, height);
}

...

Code Block
image(images[3], 0, 0);

Folgend das komplette Processing-Sketch:

Code Block

title	Beispiel
collapse	true

PImage [] images;
int numOfImages = 6;

int whichImage = 0;

void setup() {
  size(200,200);
  images = new PImage[numOfImages];
  
  for(int i=0; i<numOfImages; i++) {
    images[i] = loadImage("Bilder"+i+".png");
  }
}

void draw() {
  image(images[whichImage], 0, 0, width, height);
}

void mousePressed() {
  whichImage = (int)random(0, numOfImages);
}

...

Code Block

title	Beispiel
collapse	true

void setup() {
  size(200600, 200400);
}

void draw() {
  loadPixels();

  for(int x=0; x<width; x++) {// loop through all rows
   for for(int y=0; y<height; y++) {
    // loop intthrough locall = x+y*width;
columns per row
    for (int x=0; x<width; x++) {
  if(x%2 == 0) { // calculate pixel location in list
  pixels[loc] = color(255);  int loc = y*width + }x;
else
{      // set color depending on if color is dividable by two (even, odd)
      if (x%10 == 0) {
        pixels[loc] = color(0255);
      } else {
  }   }   pixels[loc] = color(0);
      }
    }
  }

  updatePixels();
}

Wenn wir das für jeden zweiten zenten 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:

...

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.

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:

...

Code Block
pixels[loc] = color(r,g,b);

Folgend das komplette Processing-Sketch:

Code Block

title	Beispiel
collapse	true

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.Im

Pixelate

Image Added

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

Code Block

title	Beispiel
collapse	true

PImage myImage;
int pixelSize = 10;

void setup() {
  size(200600, 200400);
  myImage = loadImage("EinBild.png");
  myImage.loadPixels();
}

void draw() {
  int size  myImage.loadPixels()= mouseX/10+1;
  
  for(int x=0; x<width; x+=pixelSizesize) {
    for(int y=0; y<height; y+=pixelSizesize) {
      int loc = x+y*width;
      
      color c = myImage.pixels[loc];
      
      fill(c);
      noStroke();
      rect(x, y, pixelSizesize, pixelSizesize);
    }
  }
}

Flashlight

Image RemovedImage Added

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

Code Block

title	Beispiel
collapse	true

PImage myImage;

void setup() {
  size(200600, 200400);
  myImage = loadImage("EinBild.png");
}

void draw() {
  loadPixels();
  myImage.loadPixels();

  PVector  PVector mousePos = new PVector(mouseX, mouseY);
  PVector currPixel = new PVector(0, 0);

   for 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 = redgreen(myImage.pixels[loc]);
      float b = redblue(myImage.pixels[loc]);

      float distance = mousePos.dist(currPixel);
      float brightness = (50100-distance)/50;
     100;

      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

Image 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:

Code Block
destImage = createImage(width, height, RGB); destImage.pixels[loc] = color(255);

Folgend das komplette Processing-Sketch:

Code Block

title	Beispiel
collapse	true

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(] = color(0);
      }
    }
  }

  destImage.updatePixels();
  image(destImage, 0, 0);
}

Simple Sobel

Image Added

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

Code Block

title	Beispiel
collapse	true

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

Weitere Beispiele

Line Art

Image Added

Code Block

title	Sketch
collapse	true

PImage myImage;

void setup() {
  size(1920, 1080);
  myImage = loadImage("Gradient_3.png");
  smooth();
}

void draw() {
  myImage.loadPixels();
  background(0);

  // image(myImage,0,0);
  
  int steps = mouseX + 4;
  for (int x=0; x<width; x+=steps) {
    for (int y=0; y<height; y+=steps) {
      int loc = x+y*width;

      float bright = brightness(myImage.pixels[loc]);
      color c = myImage.pixels[loc];
      pushMatrix();
      translate(x, y);
      rotate(radians((bright/255)*360));
      stroke(c);
      strokeWeight(2);
      line((bright/255)*-50, 0, (bright/255)*50, 0);
      }popMatrix();
    }
  }
  
destImage.updatePixels();   image(destImage, 0, 0updatePixels();
}

Image Removed

...

ASCII Art

Image Added

Code Block

title	BeispielSketch
collapse	true

PImage myImage;
PImage destImage;

void setup() {
  size(200900, 200900);
  myImage = loadImage("EinBildMarilyn.pngjpg");
  destImage = createImage(width, height, RGBsmooth();
}

void draw() {
  myImage.loadPixels();
  background(0);

  // destImage.loadPixels(image(myImage,0,0);
  
  int steps = mouseX+10;
  for (int x=10; x<width; x++=steps) {
    for (int y=0; y<height; y++=steps) {
      int currLocloc = x+y*width;

      colorfloat currColorbright = brightness(myImage.pixels[currLocloc]);
      color c = myImage.pixels[loc];
   int prevLoc = fill(x-1)+y*widthc);
      color prevColor = myImage.pixels[prevLoc]textSize(map(bright,0,255,0,50));
      
      float differenceString ascii = absCharacter.toString(brightness(currColorchar)-brightness int(prevColorbright));
      destImage.pixels[currLoc] = color(differencetext(ascii,x,y);
    }
  }
  
destImage.updatePixels();   image(destImage, 0, 0updatePixels();
}

...

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.

...

Version	Old Version 10	New Version Current
Changes made by	Joël Gähwiler	Joël Gähwiler
Saved on	Feb 20, 2017	Feb 20, 2018

Versions Compared

Key

Aufgaben

Pixelate

Flashlight

Threshold

Simple Sobel

Weitere Beispiele

Line Art

ASCII Art

Aufgaben