Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

Processing 03

Processing 03

In diesem Tutorial werden wir anfangen mit Bildern zu arbeiten – dabei benutzen wir zunächst statische Bilder. Wir werden Schritt für Schritt unsere eigenen Filter schreiben und einfache Histogramm-Aufgaben bearbeiten.

PImage?

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; danach können wir ein beliebiges Bild mit myImage = loadImage("EinBild.png"); laden und mit image(myImage, 0, 0, width, height); darstellen.

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: tint(255); – Originale Darstellung des Bildes Processing_03_1 tint(100); – Etwas mehr Schwarz-Anteile Processing_03_2 tint(255,127); – Transparenz auf 50% Processing_03_3 tint(0,200,127); – Grünlich einfärben Processing_03_5 tint(255,0,0,200); – Rot einfärben und Transparenz auf ca.75% Processing_03_4

Array von Bildern

Es lassen sich natürlich auch mehrere Bilder anzeigen. Dazu deklarieren wir ein Array von PImage Objekten PImage [] images;, installieren dann die Objekte mit images = new PImage[numOfImages]; und geben ihnen schliesslich den eigentlichen Inhalt images[i] = loadImage("Bilder"+i+".png");. Für die Darstellung der Bilder geben wir dann den gewünschten Index an. Zum Beispiel image(images[whichImage], 0, 0);

Aufgabe

- Erweitert das Beispiel "P03_3_PImage_Bild_Array" 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. Processing_03_6-04 Wenn wir nur mit der Processing Zeichenfläche arbeiten und keine externen Bilder hinzu laden, können wir die Farben auf der Zeichenfläche direkt aus dem pixels[]-Array auslesen. Dazu laden wir uns die Farbwerte in den Speicher loadPixels() gehen mit zwei verschachtelten for-Schleifen durch x und y Positionen und setzen an der entsprechenden Stelle einen neuen Farbwert pixels[loc] = color(255);. Zum Abschluss ist es wichtig updatePixels() auf zu rufen um die neuen Werte zu aktualisieren. Wenn wir das für jeden zweiten x-Wert machen erhalten wir beispielsweise folgendes Bild. Processing_03_7

Aufgaben

- Versucht andere Muster mit Hilfe des Pixel-Arrays zu zeichnen - Versucht folgendes Muster mit der gelernten Methode zu zeichnen Processing_03_8

Pixel Farben auslesen

Auf die gleiche Art und Weise, wie wir die Farbwerte im pixels[]-Array setzen können, lassen sich diese auch auslesen. Dies lässt sich zum einen als color(r,g,b)-Variable machen, als auch Komponentenweise durch red(pixel[loc]), green(pixel[loc]) und blue(pixel[loc]). Zur Veranschaulichung können wir das Beispiel "P03_6_Pixels_Farbe_laden" anschauen. Processing_03_1 Bei diesem Beispiel machen wir das gleiche, was wir ganz zu Beginn getan haben, um ein Bild zu laden und auf der Zeichenfläche anzuzeigen. Dieses Mal verwenden wir aber statt der vor definierten Funktion image() eine eigene Funktion, welche durch alle Pixel des Arrays des Bildes geht und die darin enthaltenen Farbinformationen extrahiert float r = red(myImage.pixels[loc]); float g = green(myImage.pixels[loc]); float b = blue(myImage.pixels[loc]); Dann kopieren wir diese Informationen in das Pixel Array der Zeichenfläche pixels[loc] = color(r,g,b);

Pixel lesen, verändern und schreiben

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. Im Beispiel "P03_7_Pixels_Pixelate" verwenden wir die gelernten Funktionen um ein Bild gröber aufzulösen. Processing_03_9 Im Beispiel "P03_8_Pixels_Brightness_Interaktiv" verändern wir die Helligkeit der Pixel durch die Position der Maus. Processing_03_10 Im Beispiel "P03_9_Pixels_Threshold" 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 destImage = createImage(width, height, RGB); Auf welches wir dann zeichnen mit destImage.pixels[loc] = color(255); Processing_03_11 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. Processing_03_12

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

Weiteres:

- PImage - Referenz auf processing.org - Learning Processing - Shiffman Seiten 121 - 137