Bildbearbeitung – Woche 8

Aufgaben

H1: Ringe

Lösung

Zeichne an zufällige Positionen einen Ring unterschiedlicher Größe. Erstelle dazu eine Funktion zum Zeichnen des Rings, der man als Parameter die Größe übergeben kann.

Variante: Zeichne bei Mausklick auf einmal 100 große Ringe.

H2: Bildhaft

Lösung

Lade zunächst erstmal ein Bild in Processing und zeige es an.

Programmiere dann eine Schleife, die das Bild jeweils um einen Pixel versetzt wiederholt zeichnet. Wenn du ein ähnliches Ergebnis erreicht hast, probiere weitere Möglichkeiten aus.

H3: Ballonfahrt

Lösung

Lasse einen Ballon fliegen! Lade ein Bild von einem Ballon und setze ihn an die aktuelle Mausposition.

Such dir ein Foto (z.B. bei Flickr), schneide den Ballon aus und speichere das Bild mit einer Alpha-Maske.
Zeichne einen Himmelshintergrund. Alternativ kannst du auch ein Himmelsfoto als Hintergrund benutzen.

Variante: Animiere den Ballon.

Variante: Lass es Abend werden! Färbe mit tint() den Ballon ein.

---

Bildbearbeitung

In der digitalen Bildbearbeitung werden computergestützt Bilder bearbeitet. Dies umfasst die Analyse, die Manipulation, die Speicherung und die Anzeige von (Raster-)Bildern. Die Bildbearbeitung kommt in vielen Gebieten zum Einsatz, sei es um die Helligkeit eines Fotos nachzuverbessern, um einen Ausschnitt perspektivisch zu korrigieren, oder eine eingescannte Grafik zu schärfen.

Die digitale Bearbeitung von Bildern geschieht in drei Schritten:

1. Eingabe

   Im ersten Schritt gelangen Bildinformationen in den Computer. Dabei werden von unterschiedlichen Quellen aus der realen Welt (Fotos, Zeichnungen, Video) die Lichtinformationen so aufgezeichnet, dass digitale Daten entstehen. Dies geschieht — vereinfacht beschrieben — bei einer Digitalkamera so, dass die Lichtstärke, die durch die Linse auf einen lichtempfindlichen Chip trifft, als Helligkeitswerte (für die drei Farbkanäle rot, grün, blau) digital gespeichert werden. Diese ergeben dann die einzelnen Pixel (Bildpunkte).

2. Verarbeitung

   Hier spielt sich die eigentliche Bearbeitung ab: Die Bilder werden zu unterschiedlichen Zwecken verändert. Ob optimiert, verfremdet, erweitert oder anderweitig manipuliert, immer ändern sich mehrere oder alle Bildpunkte, um in einem veränderten Gesamtbild zu resultieren.

3. Ausgabe

   Im letzten Schritt werden die digital vorhandenen Bilddaten so aufbereitet und ausgegeben, dass wir Menschen sie wieder als Bild wahrnehmen können. Dies geschieht etwa durch eine Anzeige auf einem Monitor oder durch den Druck auf Papier.

Bearbeitungsbereiche

Man kann die Bereiche, wie Bilder digital verarbeitet werden, grob in drei Kategorien aufteilen (nach Shiffman):

• Verwendung

  Einfache Anzeige von Bildern, etwa als Hintergrund oder als Sprite. (Ohne Bearbeitung.)

• Pixelmanipulation

  Lesen und Schreiben von einzelnen Bildpunkten. Um beispielsweise die Helligkeit eines Bilds zu ändern, braucht man nur alle einzelnen Pixel ändern.

• Pixelgruppenmanipulation

  Lesen und Schreiben von mehreren Bildpunkten. Beim Weichzeichnen eines Fotos etwa müssen die umgebenden Pixel analysiert werden, um einen Mittelwert der Farben und Helligkeiten zu erhalten, so dass ein Blur-Effekt erreicht werden kann.

Wir werden uns zunächst der Verwendung und der einfachen Pixelmanipulation zuwenden.

Bilder in Processing verwenden

In diesem Abschnitt wird gezeigt, wie man in Processing Bilder lädt und anzeigt.

PImage

Um Bilder in Processing verwenden zu können, müssen wir diese in einer Variable speichern. Dazu verwenden wir den neuen Datentyp PImage. (Dies ist im Gegensatz zu int, float oder boolean kein primitiver, sondern ein Objekt-Datentyp, was auch an der Großschreibung erkennbar ist.)

• Processing Reference: PImage

loadImage()

Mit dieser Anweisung werden Bilder aus einer Datei in eine PImage-Variable geladen. Processing kann Bilder mit den Dateiformaten JPEGs, GIFs, PNGs und TGAs laden. Die Bilder sollten dabei im data-Ordner unterhalb des Programmordners liegen. (Nutze den Menüpunkt "Sketch > Show Sketch Folder", um zum Programmordner zu gehen.)

Zu beachten ist, dass die Bilder nur einmal geladen werden sollten, da dies recht lange dauert. Würde man direkt in draw() ein Bild laden, würde das Programm deutlich langsamer werden.

• Processing Reference: loadImage
• Processing Examples: Displaying Image

image()

Zeichnet Bilder an die angegebene Position. Gibt man auch die Paramter width und height an, so kann man das Bild skalieren.

• Processing Reference: image
• Processing Examples: Displaying Image

background()

Zeichnet ein Bild als Hintergrund.

Wichtig ist, dass die Originalgröße des Bildes genauso groß sein muss, wie die Zeichenfläche; ansonsten gibt Processing eine Fehlermeldung aus.

• Processing Reference: background

Bilder aus Processing speichern

saveFrame()

Speichert den aktuellen Zeichenbereich als Bild. Die Bilder werden unter dem angegebenen Namen in den Sketch-Ordner gespeichert. Wenn man das Rautenzeichen (#) im Namen als Platzhalter verwendet, ersetzt Processing dies mit der aktuellen Framenummer.

Bei dem Beispiel wird also bei jedem Mausklick ein Bild gespeichert, wie etwa folgende:

Hierbei können die gleichen Bildformate verwendet werden, wie auch bei loadImage(). Processing speichert die Bilder abhängig von der angegebenen Dateiendung (also etwa JPEGs bei "btk.jpg").

• Processing Reference: saveFrame