9.3 (optional): Graustufenbilder und bunte Bilder kodieren
| Autoren: | |
| Publikation: | 4.10.2016 |
| Lernstufe: | 3 |
| Übersicht: | Die Schüler kodieren Graustufenbilder und bunte Bilder. |
| Angestrebte Kenntnisse: |
|
| Wortschatz: | Bildpunkt, Pixel, kodieren |
| Dauer: | 1 Stunde 30 Minuten (eventuell zwei Mal 45 Minuten) |
| Material: |
Für jede Zweiergruppe:
|
| Herkunft: | La main à la pâte, Paris |
Ausgangssituation
Die Lehrerin erinnert an die Zusammenfassung der letzten Unterrichtsstunde: Man kann ein Schwarz-Weiß-Bild durch Nullen und Einsen darstellen; Nullen stellen weiße Pixel dar, Einsen schwarze Pixel.
Die Lehrerin kommt jetzt auf den (eventuell) von einigen Schülern in der Unterrichtsstunde 9.1 (Bilder versenden und empfangen) gemachten Vorschlag zurück: "Im Zusammenhang mit dem Verpixeln der Bilder mit den Früchten hattet ihr vorgeschlagen, einige Kästchen grau auszumalen anstatt schwarz oder weiß". Die Lehrerin öffnet die Datei bitmap-graustufen.pgm mit einem Bildbearbeitungsprogramm. Die Datei stellt ein Graustufenbild dar. Man muss auch hier wieder heranzoomen, um die einzelnen Pixel sehen zu können. Die Schüler stellen fest, dass dieses Bild nicht nur schwarze und weiße Pixel enthält, sondern auch Pixel in drei verschiedenen Grautönen: hellgrau, mittelgrau und dunkelgrau.
Recherchearbeit: Ein Graustufenbild kodieren
Die Lehrerin fragt, ob Nullen und Einsen reichen werden, um
ein Bild zu kodieren, das von Schwarz bis Weiß insgesamt
fünf Abstufungen aufweist. Es reicht natürlich nicht,
man braucht zum Kodieren eines solchen Bildes weitere Zahlen.
Die Schüler öffnen die Datei
bitmap-graustufen.pgm
nun auch mit dem Texteditor und schauen sich an, wie das Bild
kodiert wurde. Die Lehrerin verteilt das
Arbeitsblatt 42
(Graustufen-Bilder kodieren).
Nach einigen Minuten fassen die Schüler ihre Beobachtungen zusammen:
- In der ersten Zeile steht jetzt P2 und nicht P1. (Die Lehrerin erklärt, dass die magische Zahl "P2" anzeigt, dass es sich um ein Graustufenbild handelt, bei dem die Abstufungswerte nicht binär, sondern in Dezimalziffern von 0 bis 7 angegeben werden.)
- In der zweiten Zeile steht wieder die Anzahl der Spalten und Reihen (jeweils 15): Das Graustufenbild besteht demnach aus 15 mal 15 Pixeln.
- Es gibt eine zusätzliche Zeile, in der die Zahl 7 steht. Das entspricht der höchsten Zahl, die in den Bilddaten vorkommt.
- Die Zahlen der Bilddaten liegen zwischen 0 und 7: Das sind 8 Zahlen und nicht nur zwei wie bei einem Schwarz-Weiß-Bild.
- Je kleiner die Zahl, desto dunkler ist das entsprechende Pixel.
Ein schwarzes Pixel wird durch "0" kodiert, ein weißes durch "7":
"1" stellt ein sehr dunkles Grau dar, "2" ein etwas weniger dunkles, ... und "6" ein sehr helles Grau. Bei Schwarz-Weiß-Bildern war es genau umgekehrt. Dort wurde ein weißes Pixel durch "0" kodiert!
Die Lehrerin ergänzt diejenigen Punkte aus der obigen Liste, die von keiner Gruppe erwähnt wurden. Wenn die Schüler noch Fragen haben, ermuntert die Lehrerin sie, die Datei im Texteditor an manchen Stellen zu ändern, abzuspeichern und im Bildbearbeitungsprogramm jedes Mal zu aktualisieren ("Datei → Wiederherstellen" oder einfach Strg-Taste R). So können sie ganz schnell sehen, was die Veränderung in der Datei bewirkt hat.
Wissenschaftliche Anmerkungen
- Die Anzahl der Graustufen, die bei einem Graustufenbild kodiert werden, entspricht im Allgemeinen einer Zweierpotenz: also zum Beispiel 8, 16, 32 oder 256 Graustufen. Für die Kodierung von 8 Graustufen braucht man 3 Bits, für 16 Graustufen 4 Bits, für 32 Graustufen 5 Bits und für 256 Graustufen 8 Bits (siehe die Unterrichtsstunde 7.3).
- Die Dateinamenserweiterung pgm bedeutet portable greyscale map (übertragbarer Graustufen-Plan).
Aufgabe: Graustufen kodieren (in Zweiergruppen)
Die Schüler bekommen folgende Aufgabe: Sie sollen mit dem Texteditor eine Datei erstellen, die einen Streifen mit einer Abstufung von Grautönen darstellt (Abb. 1). Die Lehrerin projiziert das Arbeitsblatt 42 (Graustufen-Bilder kodieren) an die Wand und macht die Schüler darauf aufmerksam, dass am linken Ende des Streifens ein weißes Pixel ist. Die Schüler öffnen die (bisher leere) Datei bitmap-graustufen-leer.pgm. Sie können auch eine "neue Datei" öffnen, müssen dann aber daran denken, dass sie die Datei mit der Endung .pgm abspeichern [1].
Abb. 1: Streifen mit Graustufen von weiß bis schwarz
Die Schüler öffnen die abgespeicherte Datei zusätzlich mit dem Bildbearbeitungsprogramm und zeigen ihr Ergebnis der Lehrerin. Dazu sollten auf dem Bildschirm beide Dateien nebeneinander geöffnet sein. Die meisten Schüler werden die folgende Kodierung gewählt haben:
P2
16 1
15
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0
In der ersten Zeile muss P2 stehen, da es sich um ein Graustufenbild handelt. Die Schüler müssen dann die Anzahl der Graustufen in dem Streifen zählen (es sind 16) und können daraufhin in der zweiten Zeile die Größe des Gitters eintragen (16 Spalten, 1 Reihe). Da es 16 Graustufen sind, steht in dritten Zeile 15. In der vierten Zeile stehen schließlich die Abstufungen der Grautöne von 15 (weißes Pixel ganz links) bis 0 (schwarzes Pixel ganz rechts).
Eine andere Möglichkeit, den Streifen mit Graustufen zu kodieren, wäre die folgende:
P2
16 1
31
31 29 27 25 23 21 19 17 15 13 11 9 7 5 3 0
Recherchearbeit: Ein buntes Bild kodieren
Nachdem sie gelernt haben, wie man Graustufenbilder kodiert, sollen die Schüler anhand der Datei bitmap-bunt.ppm herausfinden, wie das Kodieren von bunten Bildern funktioniert. Sie öffnen die Datei wieder parallel mit dem Texteditor und dem Bildbearbeitungsprogramm. Die Datei stellt ein einziges rotes Pixel dar (das man stark heranzoomen muss, um überhaupt etwas zu sehen). Die Lehrerin rät ihnen, sich am Anfang nur mit der letzten Zeile zu befassen und zu beobachten, was passiert, wenn man die drei Zahlen ändert. Sie verteilt die Handlupen und bittet die Schüler, sich das Pixel nach jeder Änderung mit der Lupe anzuschauen.
Die vier Zeilen der Datei bitmap-bunt.ppm:
P3
1 1
7
7 0 0
Die Schüler modifizieren die dritte Zeile und beobachten, wie sich die Farbe des Pixels verändert. Sie stellen insbesondere fest, dass "0 0 0" einem schwarzen Pixel und "7 7 7" einem weißen Pixel entspricht. Andere Kombinationen von "0" und "7" ergeben die in der Tabelle 1 aufgelisteten Farben. Die Schüler können natürlich auch ganz andere Kombinationen testen: "7 6 2" ergibt zum Beispiel Goldgelb, "1 5 6" ein kräftiges Hellblau.
Während der gemeinsamen Erörterung berichten die Schüler, dass man mit der Lupe kleine nebeneinander angeordnete Rechtecke beobachtet, die in den Farben Rot, Grün und Blau leuchten, und sich in einem immer wiederkehrenden gleichen Muster über den ganzen Bildschirm erstrecken (siehe das Bild mit den Pixeln und Subpixeln am Computerbildschirm). Steht in der letzten Zeile der Datei "0 0 0", leuchten die drei (roten, grünen und blauen) Subpixel kaum. Steht dort dagegen "7 7 7", leuchten die drei Subpixel sehr hell. Bei "7 7 0" leuchten nur die roten Subpixel hell, und so weiter und so fort.
Die Klasse fasst zusammen: Die Werte in der letzten Zeile geben an, wie hell die roten, grünen und blauen Subpixel leuchten. Ein quadratisches Pixel besteht aus drei rechteckigen Subpixeln der Farben Rot (R), Grün (G) und Blau (B). Schaut man auf den Computerbildschirm (ohne Lupe), bestimmt der jeweilige Anteil dieser drei Farben (also wie hell die jeweiligen Subpixel leuchten), wie man die einzelnen Farben wahrnimmt. Die folgende Tabelle wird an die Tafel geschrieben, da sie für die Lösung der nächsten Aufgabe hilfreich ist.
| 0 0 0 | 7 7 7 | 7 0 0 | 0 7 0 | 0 0 7 | 0 7 7 | 7 0 7 | 7 7 0 |
| schwarz | weiß | rot | grün | blau | cyan | magenta | gelb |
Tab. 1: Farben des Pixels je nach Wert der drei Zahlen in der letzten Zeile der Datei
Die Lehrerin kann erwähnen, dass es meistens 256 Helligkeitsgrade für Rot, Grün und Blau gibt, und nicht nur 8 wie in unserem Beispiel. In der folgenden Aufgabe gibt es sogar nur jeweils zwei Helligkeitsgrade von Rot, Grün und Blau: entweder aus oder an – so wie bei der Kodierung von Schwarz-Weiß-Bildern.
Wissenschaftliche Anmerkungen
- Die Dateinamenserweiterung ppm bedeutet portable pixmap (übertragbarer Pixel-Plan).
- Normalerweise werden die Subpixel mit 8 Bits kodiert, was 256 Helligkeitsstufen entspricht (Werte zwischen 0 und 255). Um ein Pixel im RGB-Farbraum binär zu kodieren, braucht man also 24 Bits (= 3 x 8), siehe die Unterrichtsstunde 7.3 (Information binär kodieren).
Aufgabe: Einen bunten Mini-Leuchtturm kodieren
Die Lehrerin stellt den Schülern eine weitere Aufgabe: Sie sollen einen kleinen bunten Leuchtturm kodieren, und zwar mit nur zwei Helligkeitsstufen für die Subpixel: "0" für ein ausgeschaltetes Subpixel und "1" für ein eingeschaltetes Subpixel. Die Datei leuchtturm-vorlage.ppm enthält bereits die notwendigen Kopfdaten, die Schüler müssen "nur" noch bei den Bilddaten einige der Nullen durch Einsen ersetzen.
Abb. 2: Ein bunter Mini-Leuchtturm
Die Kopfdaten der Datei leuchtturm-vorlage.ppm:
P3
5 5
1
Die magische Zahl "P3" kündigt die Pixeldatei eines bunten Bildes an (portable pixmap). Die Datei besteht aus 5 x 5 Pixeln und der höchste Zahlenwert in den Bilddaten ist 1. Anschließend kommt eine Kommentarzeile mit #-Zeichen [2], um die Blocks mit den drei Subpixeln besser zu erkennen.
Falls die Schüler nicht weiterkommen, kann die Lehrerin auf die Tabelle 1 verweisen. Die Lösung lautet wie folgt:
P3
5 5
1
# # # # #
0 1 1 0 1 1 1 0 0 1 1 0 1 1 0
0 1 1 0 1 1 1 1 1 0 1 1 0 1 1
0 1 1 0 0 0 0 0 0 0 1 1 0 1 1
0 0 0 0 0 0 0 0 0 0 0 0 0 1 1
0 0 1 0 0 1 0 0 1 0 0 1 0 0 1
Diesmal gibt es nur eine mögliche Lösung, da verlangt wurde, dass nur Nullen und Einsen zum Kodieren verwendet werden.
Zusammenfassung
Die Schüler fassen zusammen, was sie in dieser Unterrichtsstunde gelernt haben.
- Man kann die Farben der Pixel eines Bildes durch Zahlen darstellen.
- Bei einem Graustufenbild wird jedes Pixel durch eine Zahl dargestellt. Hat das Bild 8 Graustufen, liegt diese Zahl zwischen 0 (schwarzes Pixel) und 7 (weißes Pixel).
- Bei einem bunten Bild wird jedes Pixel durch drei Zahlen dargestellt. Diese geben die Rot-, Grün- und Blauanteile des Farbtons an.
- Um ein Graustufenbild oder ein buntes Bild zu übertragen, kodiert man es und übermittelt die kodierte Version. Hat man die kodierte Version empfangen, wird diese dekodiert, um das Bild wieder zusammenzusetzen.
Die Lehrerin vervollständigt den Abschnitt "Information" des Plakats "Was ist Informatik?".
Mögliche Erweiterung
Die Schüler können das Kodieren üben, indem sie sich aus dem Internet einfache Bilder als Vorlagen nehmen. Dazu geben sie in der Bildersuche "Pixelbilder" an. Haben sie eine Figur/ein Muster ausgewählt, erstellen sie die entsprechende pbm-, pgm- oder ppm-Datei und schauen sich das Ergebnis mit dem Bildbearbeitungsprogramm an.
In dieser Unterrichtseinheit geht es neben dem Kodieren von Bildern immer wieder um Farben und insbesondere um die Zusammensetzung von Farben. Dieses Thema ist Gegenstand des Unterrichtsmoduls "Körperfarben und Lichtfarben zusammensetzen".
Fußnoten
1: XnView erkennt die Datei als Bitmap-Datei, auch wenn sie eine ganz andere (oder keine) Endung hat.
2:
Zeilen, die mit dem Zeichen "#" beginnen, werden vom
Bildbearbeitungsprogramm "übersehen" (nicht ausgeführt).
Man kann solche Kommentarzeilen verwenden, um das Programm übersichtlicher
zu machen. Man könnte zum Beispiel in der Datei
leuchtturm-vorlage.ppm
vor der ersten Zeile drei neue Zeilen einfügen, in denen steht:
# Dies ist eine 5 x 5 Pixel große Bilddatei,
# in der durch Verändern der Werte der Bilddaten
# ein bunter Leuchtturm erscheinen soll.
Letzte Aktualisierung: 29.11.2023
