Direkt zum Inhalt
Zum Ende des Inhalts
Zur Service-Navigation
Zur Suche
Zur Hauptnavigation
Zur Anmeldung/Registrierung

Homepage > Aktivitäten > Informatik > Programmieren > 1, 2, 3 ... > Klasse 4 bis 6 > 9: Nachrichten an die Erde funken > Graustufen- und bunte Bilder

9.3 (optional): Graustufenbilder und bunte Bilder kodieren

Autor/inn/en:
Publikation: 4.10.2016
Lernstufe: 3
Übersicht: Die Schüler kodieren Graustufenbilder und bunte Bilder.
Angestrebte Kenntnisse:
  • Information:
    • Ein Bild besteht aus einem Gitter von Bildpunkten (Pixeln).
    • Je mehr Pixel man verwendet, desto genauer wird das Bild wiederge­geben.
    • Bei Graustufen wird jedes Pixel durch mehrere Bits dargestellt.
    • Ein Farbton wird durch drei Zahlen beschrieben, die jeweils die Anteile von Rot, Grün und Blau angeben.
Wortschatz: Bildpunkt, Pixel, kodieren
Dauer: 1 Stunde 30 Minuten (eventuell zwei Mal 45 Minuten)
Material: Für jede Zweiergruppe: Für die Klasse:
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 dar­stellen; Nullen stellen weiße Pixel dar, Einsen schwarze Pixel.

Die Lehrerin kommt jetzt auf den (eventuell) von einigen Schülern in der Un­ter­richtsstunde 9.1 (Bilder versenden und emp­fangen) 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 ent­hä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 kodie­ren, 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 Text­editor 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:

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, abzuspei­chern 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 (über­tragbarer 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 kodie­ren) 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 ab­speichern [1].

Graustufen von weiß bis schwarz

Abb. 1: Streifen mit Graustufen von weiß bis schwarz

Die Schüler öffnen die abgespeicherte Datei zusätzlich mit dem Bildbearbei­tungsprogramm 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 ein­tragen (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 bun­ten Bildern funktioniert. Sie öffnen die Datei wieder parallel mit dem Text­edi­tor 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 ver­teilt 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 schwar­zen 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ön­nen natürlich auch ganz andere Kombinationen testen: "7 6 2" ergibt zum Bei­spiel 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 Far­ben Rot, Grün und Blau leuchten, und sich in einem immer wiederkehrenden glei­chen 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 be­steht aus drei rechteckigen Subpixeln der Farben Rot (R), Grün (G) und Blau (B). Schaut man auf den Computerbildschirm (ohne Lupe), bestimmt der je­wei­lige 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 (übertrag­barer Pixel-Plan).
  • Normalerweise werden die Subpixel mit 8 Bits kodiert, was 256 Hellig­keits­stufen 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 Sub­pixel: "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.

Ein Mini-Leuchtturm

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. An­schließ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 ver­wei­sen. 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.

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 ein­fa­che Bilder als Vorlagen nehmen. Dazu geben sie in der Bildersuche "Pixelbilder" an. Haben sie eine Figur/ein Muster ausgewählt, erstellen sie die entspre­chen­de pbm-, pgm- oder ppm-Datei und schauen sich das Ergebnis mit dem Bildbe­arbeitungsprogramm 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 Licht­farben 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 Bildbearbeitungs­pro­gramm "übersehen" (nicht ausgeführt). Man kann solche Kommentarzeilen ver­wenden, um das Programm übersichtlicher zu machen. Man könnte zum Bei­spiel 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: 18.1.2017

Allgemeine Informationen Alphabetischer Index Sitemap Häufig gestellte Fragen La main à la pâte

Anmeldung

Passwort vergessen?

Registrieren