Bildbearbeitung – Woche 8
Aufgaben
H1: Ringe
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
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
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.
H4: Algorithmen in der Software Kunst
Recherchiere, wie der Begriff "Algorithmus" im Rahmen der Software Kunst definiert und angewendet wird.
Stichwörter: Software Kunst, Generative Kunst, Generative Grafiken, New Media Art
Sende mir per E-Mail (t.nagel@btk-fh.de) bis zum nächsten Mal (15.06.) einen Ausschnitt oder ein Zitat mit Quellenangabe zu, das du gefunden hast und passend findest.
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:
- 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).
- 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.
- 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.)
loadImage()
loadImage(imageName);
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.
image()
image(imageVar, x, y);image(imageVar, x, y, width, height);
Zeichnet Bilder an die angegebene Position. Gibt man auch die Paramter width und height an, so kann man das Bild skalieren.
background()
background(imageVar);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.
Bilder aus Processing speichern
saveFrame()
saveFrame(imageName);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").