Versions Compared

Version Old Version 13 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:

...

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();
  
  forint 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(600, 400);
  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 = green(myImage.pixels[loc]);
      float b = blue(myImage.pixels[loc]);

      float distance = mousePos.dist(currPixel);
      float brightness = (100-distance)/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,  }
  }
}

Flashlight

Image Removed

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

RGB);
destImage.pixels[loc] = color(255);

Folgend das komplette Processing-Sketch:

PImage myImage
Code Block
titleBeispiel
collapsetrue
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();
  myImagedestImage.loadPixels();
  
  PVector mousePos = new PVector(mouseX, mouseY);
  PVector currPixel = new PVector(0, 0)threshold = mouseX;
  
  for(int x=0; x<width; x++) {
    for(int y=0; y<height; y++) {
      int loc = x+y*width;
      
      currPixel.x = x;if(brightness(myImage.pixels[loc])<threshold) {
        currPixel.ydestImage.pixels[loc] = ycolor(255);
      } else {
     float r = red(myImagedestImage.pixels[loc]); = color(0);
      }
    }
  }
float
g = red(myImage.pixels[loc]destImage.updatePixels();
      float b = red(myImage.pixels[loc]);

      float distance = mousePos.dist(currPixel);
      float brightness = (50-distance)/50;
      
      r*=brightness;
      g*=brightnessimage(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 b*x=brightness1;      x<width; x++) {
    for(int y=0;  r = constrain(r,0,255);y<height; y++) {
      int gcurrLoc = constrain(g,0,255)x+y*width;
      bcolor currColor = constrain(b,0,255)myImage.pixels[currLoc];
      
      colorint cprevLoc = color(r,g,b);
 (x-1)+y*width;
      color prevColor = myImage.pixels[prevLoc];
      
    pixels[loc] = c;float difference = abs(brightness(currColor)-brightness(prevColor));
 }   }  destImage.pixels[currLoc] = updatePixelscolor(difference);
}

Threshold

Image Removed

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

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

Weitere Beispiele

Line Art

Image Added

PImage myImage; PImage destImage; int threshold = 100
Code Block
titleBeispiel
collapsetrue
Sketch
collapsetrue
PImage myImage;

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

void draw() {
  myImage.loadPixels();
  destImage.loadPixelsbackground(0);

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

...

ASCII Art

Image Removed

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

Image Added

Code Block
titleBeispielSketch
collapsetrue
PImage myImage;
PImage destImagemyImage;

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.

...