Informatik G23c

# Pixel-Grafiken

Pixelgrafiken bestehen bekanntlich aus einzelnen Bildpunkten. Das wird im interaktiven Pixelviewer schön dargestellt.

Aufgabe «Pixelviewer»

Mit dem Python-Modul cs20-image können die Bildpunkte eines Bildes ausgelesen werden. Ein einzelner Pixel besteht jeweils aus einem Rot-, einem Grün und einem Blau-Anteil. Die Anteile bewegen sich zwischen 0 und 255.

# additives Farbmodell (RGB)

Das additive Farbmodell verhält sich wie Licht: Die Grundfarben sind Rot, Grün und Blau. Mischt man alle Farben, so ergibt sich weisses Licht. Der Computer arbeitet vielerorts mit dem additivien Farbmodell:

  • Bei der Eingabe, also ein Scanner oder eine Digitalkamera erkennt die Lichtstrahlen.
  • Bei der Ausgabe, z.B. der Bildschirm der mit Licht leuchtet

Inverse

RGB-Farbmodell[1]

Normalerweise – z.B. bei JPG-Dateien – arbeitet der Computer mit einer Farbtiefe von 24 Bit, d.h. für jede der drei Grundfarben wird eine 8-Bit-Zahl gespeichert: 0 steht für kein Anteil dieser Farbe, 255 für den maximalen Anteil.

Schreibweisen:
hex: #ffffff
rgb: rgb(255, 255, 255)

# Beispiel

Das folgende Beispiel findet man auf der Seite des python-Moduls: https://github.com/bnmnetp/cImage (opens new window)
Ich habe die einzelnen Zeilen kommentiert.

import image                                # das image-Modul importieren

win = image.ImageWin(480, 640, "Image Processing")    # ein neues Fenster erzeugen: 480 pixel breit, 640 pixel hoch mit einem Titel
original_image = image.FileImage('lcastle.gif')      # Die Datei lcastle.gif laden und als original_image zur Verfügung stellen

width = original_image.get_width()          # die Breite des geladenen Bildes als width abspeichern
height = original_image.get_height()        # die Höhe als hieight speichern
print(width, height)                        # Dimensionen in der Shell ausgeben

original_image.draw(win)                    # geladenes Bild im erzeugten Fenster anzeigen
my_image = original_image.copy()            # Kopier des Bildes erzeugen und als my_image zur Verfügung stellen

for row in range(height):                   # das Bild zeilenweise durchgehen – row geht von 0 bis height-1
    for col in range(width):                # die Zeile pixelweise durchgehen – col geht von 0 bis width-1
        v = my_image.get_pixel(col,row)     # den Bildpunkt an den Koordinaten (col, row) holen und als v zur Verfügung stellen
        v.red = 255 - v.red                 # den Rot-Wert des Bildpunktes invertieren
        v.green = 255 - v.green             # den Grün-Wert des Bildpunktes invertieren
        v.blue = 255 - v.blue               # den Blau-Wert des Bildpunktes invertieren
        my_image.set_pixel(col,row,v)       # den Bildpunkt an den Koordinaten (col, row) mit der invertierten Farbe setzen

my_image.draw(win)                          # das invertierte Bild im selben Fenster darstellen
print(win.get_mouse())                      # auf einen Mausklick warten und die Koordinaten in der Shell ausgeben 
my_image.save('lcastle-inverted.gif')       # das invertierte Bild speichern
print(my_image.to_list())                   # das neue Bild als Liste (von Pixel) in der Shell ausgeben
win.exit_on_click()                         # beim nächsten Mausklick aufs Fenster dieses schliessen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Beispiel-Bild des Beispiels in verschiedenen Formaten

gif
png
jpg

Ergebnisse «invertiert» (Beispiel) und «Graustufen» (Aufgabe)

invertiert
Graustufen

Hinweis

Schau, dass du nicht mit allzugrossen Bilddateien arbeitest. Sonst kann es schon mal einige Sekunden gehen bis alle Bildpunkte durchgearbeitet sind.

Aufgabe

  1. Starte Thonny und installiere das Modul cs20-image (siehe Thonny, Paketverwaltung)
  2. Teste das obenstehende Beispiel aus
    • Kopiere den Code und speichere das Python-Skript ab
    • Speichere das Vorlagen-Bild am selben Ort ab
    • Starte das Skript
  3. Speichere das Skript unter dem Namen greyscale.py ab und baue es so um, dass es die Farben der Bildpunkte nicht invertiert, sondern daraus einen Grauwert berechnet.
  4. Schaue dir die weiteren Möglichkeiten an und versuche, etwas davon umzusetzen. Oder überlege dir selbst etwas Ähnliches, was man mit dieser Art der Bildmanipulation programmieren könnte. Dokumentiere dein Vorhaben und dein Vorgehen!

# mögliche Programme

# einfache Filter

Jeder Pixel kann unabhänig von den Nachbarpixel angepasst werden:

# fortgeschrittene Filter

Die Umgebung der Bildpunkte muss berücksichtigt werden, also auch die angrenzenden Punkte:

  • Unschärfe (blur)
  • RGB-Glitch-Effekt durch Verschiebung der Kanäle

# Weiteres

  • Graustufen- oder RGB-Histogramm (opens new window) erzeugen
  • lokale Bearbeitung mit Mausklicks: z.B. bei einem Klick alle umliegenden Pixel mit einer ähnlichen Farbe ausfüllen (flood fill)

  1. sharkD via Wikimedia Commons (opens new window) ↩︎

Letzte Änderung: 11.1.2021, 18:16:19

← Anwendung: Sprachen und PPP →