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:
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).
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.
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.
Man kann die Bereiche, wie Bilder digital verarbeitet werden, grob in drei Kategorien aufteilen:
Einfache Anzeige von Bildern, etwa als Hintergrund oder als Sprite. (Ohne Bearbeitung.)
Lesen und Schreiben von einzelnen Bildpunkten. Um beispielsweise die Helligkeit eines Bilds zu ändern, braucht man nur alle einzelnen Pixel ändern.
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.
In diesem Abschnitt wird gezeigt, wie man in Processing Bilder lädt und anzeigt.
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(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.)
PImage foto;
void setup() {
size(400, 400);
foto = loadImage("schmetterling.jpg");
}
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(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.
void draw() {
// Zeichnet foto an Position 10,20
image(foto, 10, 20);
// Zeichnet bild2 an Mausposition
image(bild2, mouseX, mouseY);
// Zeichnet foto3 an Position 0,0 mit
// der Größe 100×100
image(foto3, 0, 0, 100, 100);
}
background(imageVar);Zeichnet ein Bild als Hintergrund.
void draw() {
background(foto);
// Andere Zeichenanweisungen ...
}
Wichtig ist, dass die Originalgröße des Bildes genauso groß sein muss, wie die Zeichenfläche; ansonsten gibt Processing eine Fehlermeldung aus.
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.
void draw() {
// Zeichne zufällig positionierte, bunte Kreise
fill(random(255), random(255), random(255), 50);
ellipse(random(width), random(height), 50, 50);
}
void mousePressed() {
saveFrame("confetti-#####.png");
}
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").
Siehe Woche 9