Extern 4 - Woche 13

Aufgaben

Bildbearbeitung

In diesem Abschnitt werden wichtige Bildbearbeitungsthemen erläutert, die für die Videobearbeitung ebenso notwendig sind. (Siehe auch nochmal PImage-Objekt)

Bildgröße

Nachdem mit loadImage() ein Bild in ein PImage geladen wurde, kann die Größe des Bildes abgefragt werden. Dazu können die Eigenschaften width und height verwendet werden.

PImage img = loadImage("sonnenschein.jpg"); println("Bildbreite=" + img.width); println("Bildhöhe=" + img.height);

Pixelarray

Ein Bild besteht aus den einzelnen Bildpunkten, die auf einer Fläche angeordnet sind. Auf die einzelnen Farbwerte des Zeichenbereichs kann – wie wir letztes Semester gesehen hatten – über die Anweisung get(x, y) zugegriffen werden. Wie man nun die Pixel eines Bildes auslesen und verwenden kann, ohne das Bild zeichnen zu müssen, wird im Folgenden gezeigt.

Die einzelnen Bildpunkte eines PImage-Bildes sind in einem Pixelarray gespeichert. In Processing kann man auf die Pixel via img.pixels[i] zugreifen. In diesem Array sind die Farbwerte jedes Bildpunktes allerdings einfach, d.h. linear hintereinander abgelegt.

So kann durch den Index bspw. nicht direkt auf das Pixel in der 3. Zeile, 2. Spalte zugegriffen werden (hier: j). Um nun auf das zweidimensionale Bild in gewohnter Weise zugreifen zu können, kann man folgende Formel verwenden: pixelIndex = y * bildBreite + x
Möchte man nun auf den Pixel vom obigen Beispiel zugreifen, also folgendermaßen (wobei natürlich immer bei 0 zu zählen begonnen wird):

int pixelIndex = 2 * img.width + 1; color col = img.pixels[pixelIndex];

Beispiel: Pointillism

Zur besseren Veranschaulichung dieses Pixelarrays hier ein Beispiel, dass ein Bild nicht direkt zeichnet, sondern an zufällige Positionen Kreise zeichnet, die von einem an dieser Stelle liegenden Farbwert beeinflusst werden.

Je mehr und je feinere Kreise gezeichnet werden, desto besser kann das Original-Bild erkannt werden.

PImage img; void setup() { size(500, 600); background(255); noStroke(); smooth(); img = loadImage("photographer.jpg"); } void draw() { drawPoint(img.pixels); } void drawPoint(int[] pixelArray) { int x = int(random(img.width)); int y = int(random(img.height)); color col = pixelArray[y * img.width + x]; fill(col, 127); ellipse(x, y, 14, 14); }

In setup() werden die üblichen Einstellungsanweisungen ausgeführt, und das Bild geladen. In drawPoint() wird zunächst (in Zeilen 17, 18) eine zufällige Position auf dem Bild ausgewählt und in integer-Variablen gespeichert. Danach wird der Farbwert des Pixels (über die obengenannte Formel) an dieser Position ausgelesen und ein Kreis in dieser Farbe gezeichnet.

Video 2

Pixel-Array der Zeichenfläche

Um schneller und performanter arbeiten zu können, können statt mit Zeichenanweisungen auch direkt die Farben des sichtbaren Felds manipuliert werden. So können einzelne Pixel über das Array pixels[] verändert werden, anstatt mit point(x, y).

Das Pixel-Array enthält für alle Pixel des Zeichenbereichs die Werte (vom Datentyp color). Das Array ist genauso groß wie die Zeichenfläche: Wenn der Sketch mit size(200, 100) erstellt wurde, ist das Array folglich 200×100 groß und enthält daher 20.000 Werte. Der Index bestimmt die Position innerhalb des Arrays. (Siehe Pixel-Array der Bilder)

Bevor mit dem Array gearbeitet werden kann, müssen die aktuellen Werte, d.h. die aktuell zu sehenden Farben auf der Zeichenfläche, mittels loadPixels() geladen werden. Nachdem man die Daten geändert hat, muss updatePixels() aufgerufen werden, um die Änderungen auch sichtbar zu machen.

size(200, 200); loadPixels(); for (int i = 0; i < width * height; i++) { pixels[i] = color(random(255), random(255), 0); } updatePixels();

• Processing Reference: pixels[]
• Processing Learning: PixelArray
• Processing Reference: loadPixels()
• Processing Reference: updatePixels()

Pixelmanipulation

Zum leichteren Start hier eine Funktion, die ein PixelArray verwendet, um es aus Rechtecken zu zeichnen. Die Parameter sind:

• pixelArray - Das PixelArray
• w - Weite des Ausschnitts
• w - Höhe des Ausschnitts
• wd - Weite der Rasterung
• hd - Höhe der Rasterung

void drawRectImage(int[] pixelArray, int w, int h, int wd, int hd) { for (int x = 0; x < w; x += wd) { for (int y = 0; y < h; y += hd) { // original (aka non-mirrored) int pIn = x + y * width; // twisted (aka mirrored) //int pIn = width - x - 1 + y * width; color c = pixelArray[pIn]; fill(c); rect(x, y, wd, hd); } } }

Möchte man zum Beispiel das Live-Bild mit dieser Methode zeichnen, kann folgender Aufruf genutzt werden:

void draw() { drawRectImage(liveVideo.pixels, 320, 200, 10, 10); }