Versions Compared

Version Old Version 14 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
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 = myImage.pixels[loc];
      
      fill(c);
      noStroke();
      rect(x, y, pixelSize, pixelSize);
    }
  }
}

Flashlight

Image Removed

Im 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++);
      noStroke();
      rect(x, y, size, size);
    }
  }
}

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, 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) {
    for(int y=0; y<height; y++) {
  destImage.pixels[loc] = color(255);
    int loc = x+y*width;
} else {
        destImage.pixels[loc] = color(0);
 currPixel.x = x;    }
  currPixel.y = y;}
  }

  destImage.updatePixels();
  image(destImage, 0,   float r = red(myImage.pixels[loc]);
      float g = red(myImage.pixels[loc]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);
      float b myImage = redloadImage(myImage.pixels[loc]"EinBild.png");
  destImage = createImage(width, height, RGB);
float}
distance
=void mousePos.distdraw(currPixel); {
  myImage.loadPixels();
  float brightness = (50-distance)/50destImage.loadPixels();
  
  for(int x=1; x<width; x++) {
    r*=brightness;
    for(int y=0; y<height; y++) {
   g*=brightness;   int currLoc =  b*=brightness;x+y*width;
      color currColor = myImage.pixels[currLoc];
     r =
constrain(r,0,255);      int gprevLoc = constrain(g,0,255);(x-1)+y*width;
      color bprevColor = constrain(b,0,255)myImage.pixels[prevLoc];
      
      colorfloat cdifference = color(r,g,babs(brightness(currColor)-brightness(prevColor));
      
      destImage.pixels[loc] = c;
    }currLoc] = color(difference);
    }


 updatePixels(); }

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.updatePixels();
  destImage.pixels[loc] = color(255);

...

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.

...