Spiegeln und Drehen
Erste Doppelstunde
Ziele
- Java: Deklaration und Verwendung von zweidimensionalen Arrays
- Bildbearbeitung: geometrische Bildoperationen
Didaktische Überlegungen
Verwendung von Arrays
Eindimensionale Arrays wurden schon in Klasse 9 behandelt. Die SuS müssten den Umgang beherrschen. Um an die Inhalte aus Klasse 9 anzuknüpfen, werden die grundlegenden Operationen im eindimensionalen Array wiederholt und auf ein zweidimensionales Color-Array übertragen. Dabei werden zunächst nur vordefinierte Farben (z.B. Color.BLACK) genutzt, um das Farbmodell noch nicht thematisieren zu müssen. Es wird auch nicht erwähnt, dass BLACK eine statische Konstante der Klasse Color ist. Ohne auf die Details einzugehen, werden aber von Anfang an die Begriff Klasse und Objekt korrekt benutzt.
Entscheidend für die Verarbeitung von zweidimensionalen Arrays sind verschachtelte For-Schleifen, die den SuSn auch schon aus Klasse 9 bekannt sein sollten. Zum Zeichnen der optischen Täuschungen wurden sie oftmals eingesetzt. Trotzdem sollte nochmals besprochen werden, wie diese Schleifen arbeiten. Durch die Aufgabe, x und y bei den Schleifendurchgängen anzugeben, wird der Ablauf nochmals verdeutlicht.
Geometrische Bildoperationen
Der Einstieg mit einem Beispielprogramm vermeidet das aufwändige Erklären der zur Verfügung stehenden Methoden der Klasse Picture. Aus dem Programmschnipsel wird die Benutzung sofort klar. Die Struktur dieser Methode wird für alle weiteren Bildbearbeitungsoperationen übernommen. Außerdem fördert die Analyse von fremdem Code das Verständnis für Algorithmen, ohne auf Syntaxprobleme zu stoßen.
Bei den geometrischen Bildoperationen (hier horizontale Spiegelung) wären zwei Vorgehensweisen denkbar:
-
x und y geben die Position des neuen Pixels an:
pixelNeu[x][y] = pixel[(breite-1)-x][y];
-
x und y geben die Position des Pixels im Originalbild an.
pixelNeu[(breite-1)-x][y] = pixel[x][y];
Variante 2 passt besser zu der Vorstellung, dass die alten Pixel auf eine neue Positionen verschoben werden. Dies setzt aber voraus, dass jedes Pixel auf genau eine neue Position abgebildet wird. Das ist bei der oben zu sehenden Spiegelung der Fall, aber im Allgemeinen nicht. Bei einer Vergrößerung oder Verkleinerung des Bildes oder auch beim Drehen eines Bildes gilt dies nicht. Dort muss für jedes Pixel entschieden werden, wie die Farbe ermittelt wird. Das kann z.B. mit nearest Neighbor-Verfahren oder mit bilinearer Interpolation geschehen. Daher wird hier von Anfang an die Variante 1 bevorzugt. Durch geeignete Aufgaben sollen die SuS sich diese Zusammenhänge selbst erschließen. Insbesondere bei den Drehungen ist dies nicht ganz so einfach. Daher wird zunächst die Spiegelung behandelt. Hier wird die Idee "(breite-1)-x" schon angelegt.
Implementation in BlueJ
In BlueJ arbeiten die SuS mit einem vorgegebenen Projekt. Dieses Projekt stellt die Klassen Beispielbild und GeometrischeBildoperationen bereit. Beispielbild ist eine Unterklasse von Picture. Die Klassen Picture, PictureViewer, HSB und einige weitere hier nicht benötigte Klassen sind ein Paket von Klassen die von der ZPG IMP bereit gestellt werden (Unterordner IMP).
Die Klasse Picture wurde schon in Klasse 9 für das Zeichnen von optischen Täuschungen eingesetzt und stellt die meisten Zeichenbefehle zur Verfügung, die es auch in Processing gibt. Zusätzlich gibt es die Methoden getPixelArray und setPixelArray, die das Bild als zweidimensonales Array zurückgeben bzw. das Bild gemäß dem Pixelarray setzen. In Processing liefern die entsprechenden Methoden ein eindimensionales Pixelarray. Sollte weiterhin Processing eingesetzt werden, müsste den SuSn eine Methode zum Umwandeln in ein zweidimensionales Array zur Verfügung gestellt werden.
Zusätzlich gibt es eine Klasse PictureViewer, die ein Objekt der Klasse Picture in einem Frame darstellen kann. Bei Erstellen eines neuen Bildes wird automatisch ein PictureViewer-Objekt erzeugt und das Bild angezeigt. Durch das Scrollrad kann das Bild vergrößert oder verkleinert dargestellt werden. Später wird bei der Erstellung eines graphischen User-Interfaces (GUI) eine veränderte PictureViewer-Klasse verwendet, die ein Bild in einer GUI anzeigen kann, ansonsten aber die gleichen Methoden bereitstellt.
Die Klasse HSB vereinfacht die Umrechnung von Color-Objekten in HSB-Werte (vgl. Farbmodell).
Die SuS arbeiten mit BlueJ nach folgendem Schema:
Sie erzeugen ein Objekt der Klasse Beispielbild (Rechtsklick auf den Klassennamen). Dadurch entsteht ein Objekt der Klasse Beispielbild.
Bildquelle: Beispielbild von ZPG IMP [CC BY-SA 4.0 DE], aus 01_alg_unterrichtsverlauf.pdf, bearbeitet
Bei diesem Objekt kann man mit der rechten Maustaste weitere Methoden aufrufen. Zum Beispiel kann man mit load(String dateiname) ein anderes Bild laden (Achtung: Strings mit Anführungszeichen eingeben: z.B. "beispiel2.png", alle Bilder müssen im Unterordner images liegen). Unter "inherited from Picture" finden sich weitere Methoden der Klasse Picture, mit denen man z.B. auf dem Bild malen oder seine Größe herausfinden kann. Außerdem ist dort auch die Methode getPixelArray().
Mit "Get" kann man dieses zweidimensionale Array als Objekt bekommen. Inspiziert man dieses Objekt kann man gut den Aufbau eines zweidimensionalen Arrays als Array von Arrays erkennen.
Bildquelle: Array als Objekt von ZPG IMP [CC BY-SA 4.0 DE], aus 01_alg_unterrichtsverlauf.pdf, bearbeitet
Man kann auch mit dem Codepad von BlueJ (Menü View -> Show Code Pad) gezielt einzelne Pixel verändern, wenn man zunächst mit dem Befehl import java.awt.Color; die Color-Klasse importiert hat:
import java.awt.Color;
pixel[2][3] = new Color(231, 23,123);
Setzt man im Beispielbild die Pixel mit setPixelArray neu, dann sieht man die vorgenommenen Änderungen. Eventuell kann man dies nach den ersten Aufgaben zu den Arrays machen.
Bildquelle: Beispiel 1 von ZPG IMP [CC BY-SA 4.0 DE], aus 01_alg_unterrichtsverlauf.pdf, bearbeitet
Normalerweise werden aber keine einzelnen Pixel verändert, sondern Algorithmen zur Bildbearbeitung implementiert, die sich auf das ganze Bild auswirken.
In der Klasse "geometrischeBildoperationen" ist ein erstes Beispiel (Spiegelung) implementiert. Erzeugt man ein Objekt der Klasse Beispielbild und ein Objekt der Klasse geometrische Bildoperationen, kann man die implementierte Operation auf das Bild anwenden (Rechtsklick auf geometri1).
Bildquelle: Beispiel 2 von ZPG IMP [CC BY-SA 4.0 DE], aus 01_alg_unterrichtsverlauf.pdf, bearbeitet
Als Parameter gibt man den Namen des Bild-Objektes (beispiel1) an. Das Ergebnis wird sofort angezeigt. Möchte man mit diesem Bild weitere Operationen durchführen, gibt man ihm mit "Get" einem Namen (z.B. beispiel2). Das neue Objekt taucht in der Objektleiste auf.
Nachdem die SuS einige Überlegungen zu den Pixelpositionen angestellt haben, implementieren sie weitere geometrische Bildoperationen.
Am Ende schließt sich die Implementation einer Methode an, die die neuen Methoden nutzt, um eine weitere Fähigkeit (Drehen um 180°) zu realisieren. Hierzu müssen die in BlueJ von Hand durchgeführten Operationen in Quelltext umgesetzt werden.
Unterrichtsverlauf: Herunterladen [odt][154 KB]
Unterrichtsverlauf: Herunterladen [pdf][233 KB]
Weiter zu RGB-Farbmodell und Faltungen