Versions Compared

Version Old Version 15 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();

  // loop through all rows
  for (int xy=0; x<widthy<height; xy++) {
    // loop through all columns per row
    for (int yx=0; y<heightx<width; yx++) {
      // calculate pixel location in list
      int loc = x+y*width;
      y*width + x;

      // set color depending on if color is dividable by two (even, odd)
      if (x%2x%10 == 0) {
        pixels[loc] = color(255);
      } 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:

...

Code Block
titleBeispiel
collapsetrue
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

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*=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

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:

...