Page Comparison

...

Image ist eine Klasse, welche uns in Processing erlaubt, Bilder darzustellen und zu bearbeiten. Grundsätzlich können die Formate .gif, .jpg, .tga und .png gelesen werden. Die einfachste Art und Weise mit einem Bild zu arbeiten ist es auf den Screen zu zeichnen. Der Ablauf ist dabei immer gleich: 1.Objekt deklarieren, 2.Bild laden, 3.Bild darstellen. Dazu wird zunächst ein Objekt der Klasse PImage deklariert:

PImage myImage;

...

myImage = loadImage("Bild.png");

image(myImage, 0, 0, width, height);

PImage myImage;

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

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

Tint

Mit der Funktion tint() könne einfache Bildfilter erstellt werden. Dabei werden die Werte, welche mit tint() angegeben werden immer zum Bild hinzu gemischt. Hier ein Paar Beispiele:

PImage myImage;

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

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

Array von Bildern

Es lassen sich natürlich auch mehrere Bilder anzeigen. Dazu deklarieren wir ein Array von PImage Objekten und initialisieren es:

...

Für die Darstellung der Bilder geben wir dann den gewünschten Index an:

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

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

...

Aufgabe

Erweitert das

...

Beispiel so dass durch drücken des Rechts- bzw. Linkspfeiles durch die Bilder gegangen wird.

Pixel schreiben

Jedes Bild besteht aus einem Array an Farbinformationen (siehe Wikipedia). Diese Informationen werden in einem Raster (Breite, Höhe) dargestellt und ergeben so das ganze Bild. Abgelegt werden diese Informationen jedoch in einem simplen fortlaufenden Array [0][1][2][3]...[n]. Wir müssen also nun wissen, wie wir von einer Position aus dem Array (Index) auf eine Position auf dem Screen (x, y) schliessen können. Zur Veranschaulichung kann folgende Grafik herangezogen werden.

...

Wenn wir das für jeden zweiten x-Wert machen erhalten wir beispielsweise folgendes Bild.:

Aufgaben

• Versucht andere Muster mit Hilfe des Pixel-Arrays zu zeichnen.
• Versucht folgendes Muster mit der gelernten Methode zu zeichnen:

...

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

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.

...