Versions Compared

Version Old Version 12 New Version Current
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.

...

Code Block
titleBeispiel
collapsetrue
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 through intall loccolumns = x+y*width;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 pixels[loc] =on if color(0); is dividable by two (even, odd)
}     } if (x%10 == 0) {
        pixels[loc] = color(255);
      } else {
        updatePixels(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:

...

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

Folgend das komplette Processing-Sketch:

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

...

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

Image Added

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

Code Block
titleBeispiel
collapsetrue
PImage myImage;
int pixelSize =
10;

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

void draw() {
  myImage.loadPixels()int size = 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 Added

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

Code Block
titleBeispiel
collapsetrue
PImage myImage;

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

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

  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)/50100;

            r*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 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:

Code Block
destImage = createImage(width, height, height, RGB);
destImage.pixels[loc] = color(255);
Code Block
titleBeispiel
collapsetrue
PImage myImage;
PImage destImage;
int threshold = 100 RGB);
destImage.pixels[loc] = color(255);

Folgend das komplette Processing-Sketch:

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

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

Weitere Beispiele

Line Art

Image Added

Code Block
titleSketch
collapsetrue
PImage myImage;

void setup() {
  size(2001920, 2001080);
  myImage = loadImage("EinBildGradient_3.png");
  destImage = createImage(width, height, RGBsmooth();
}

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

  // destImage.loadPixels(image(myImage,0,0);
  
  thresholdint 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 = if(brightness(myImage.pixels[loc])<threshold) {;
      pushMatrix();
      translate(x, y);
      rotate(radians((bright/255)*360));
  destImage.pixels[loc] = color(255    stroke(c);
      }strokeWeight(2);
else {     line((bright/255)*-50,    destImage.pixels[loc] = color(0, (bright/255)*50, 0);
      }popMatrix();
    }
  }
  
destImage.updatePixels();   image(destImage, 0, 0updatePixels();
}

Image Removed

...

ASCII Art

Image Added

Code Block
titleBeispielSketch
collapsetrue
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.
...