🖼️

2D-Arrays & Pixelgrafiken

Informatik · Klasse 10 IMP · Gymnasium Baden-Württemberg · PRIMM-Methode

2D-Arrays Pixelgrafik Interaktiv Kl. 10 IMP

🎯 Worum geht's? Klasse 10–13 · 1–2 Unterrichtsstunden

Nach dieser Seite kannst du …

Zeilen und Spalten eines 2D-Arrays mit Indizes ansprechen
vorhersagen, welches Bild ein Programm in ein Pixel-Raster zeichnet
Programme verändern, damit ein gewünschtes Bild entsteht

Vorwissen: Arrays, verschachtelte Schleifen

📝 Aufgaben

Jede Aufgabe hat fünf Schritte: Predict › Run › Investigate › Modify › Make. Wähle eine Aufgabe aus – oder nutze oben die Leiste „Aufgaben: 1, 2, 3 …“.

0

⚡ Gesammelte XP

0

✅ Abgeschlossen

0

🔥 Streak (Tage)

–

🎯 Genauigkeit

📖 Die PRIMM-Methode

Jede Aufgabe durchläuft fünf Phasen:

🔮

P – Predict

Was erzeugt der Code wohl?

▶️

R – Run

Grafik betrachten & analysieren.

🔍

I – Investigate

Code gezielt untersuchen.

✏️

M – Modify

Code für neues Ziel anpassen.

🛠️

M – Make

Eigene Pixelgrafik programmieren!

💡 Was sind 2D-Arrays?

Ein 2D-Array ist wie eine Tabelle aus Zeilen und Spalten. In Java: int[][] bild = new int[zeilen][spalten]; — jeder Eintrag bild[z][s] speichert eine Farbe als RGB-Hex-Zahl. Zwei ineinandergeschachtelte Schleifen befüllen alle Pixel.

🏅 Zuletzt verdiente Badges

🔮 Predict

Aufgabe 1 – Schachbrettmuster

Analysiere die Methode, ohne die Grafik anzusehen.

Aufruf: schachbrett(8)

💡 Was ergibt (0+0) % 2? Was ergibt (0+1) % 2? Welche Farbe erhält Pixel [0][0]?

▶️ Run – Grafik betrachten

Sieh dir die erzeugte Pixelgrafik an.

schachbrett(8) – 8×8 Pixel, je 40 px dargestellt

Welche Farbe hat das Pixel bei Zeile 0, Spalte 1?

🔍 Investigate

Was ergibt (z + s) % 2 für z=3, s=3?

Warum werden zwei ineinandergeschachtelte Schleifen verwendet?

✏️ Modify

Passe die Methode so an, dass ein rot-blaues Schachbrett entsteht (0xFF0000 statt weiß, 0x0000FF statt schwarz). Die Logik mit % 2 bleibt gleich – nur die Farben ändern sich.

int[][] schachbrett(int groesse) {
    int[][] bild = new int[groesse][groesse];
    for (int z = 0; z < groesse; z++) {
        for (int s = 0; s < groesse; s++) {
            if ((z + s) % 2 == 0) {
                bild[z][s] = 0xFFFFFF; // anpassen
            } else {
                bild[z][s] = 0x000000; // anpassen
            }
        }
    }
    return bild;
}

Nur die beiden Farbwerte ändern sich – die Bedingung bleibt gleich.

🛠️ Make

Implementiere dreifarbenMuster: Statt schwarz/weiß sollen drei Farben diagonal abwechseln. Nutze (z + s) % 3 und eine Palette deiner Wahl. Für groesse = 9 soll ein gleichmäßiges Muster entstehen.

🎨 Farbpalette:

Farbe	Hex-Code
Rot	`0xFF4136`
Gelb	`0xFFDC00`
Blau	`0x0074D9`
Grün	`0x2ECC40`
Orange	`0xFF851B`
Cyan	`0x7FDBFF`

int[][] dreifarbenMuster(int groesse) {
    // Deine Implementierung hier

}

Lege die drei Farben in einem Array palette ab und wähle den Index mit (z + s) % 3.

🔮 Predict

Aufgabe 2 – Farbverlauf (Gradient)

Analysiere die Methode, ohne die Grafik anzusehen.

Aufruf: farbverlauf(16, 12)

💡 Was ist rot für s=0? Was ist gruen für z=0? Welche Farbe erscheint oben-links?

▶️ Run – Grafik betrachten

farbverlauf(16, 12) – skaliert auf 320×240 px

Berechne: Welchen Hex-Wert hat das Pixel oben-rechts (z=0, s=15, breite=16)?

Variable	Formel	Dein Wert
rot	(15 × 255) / 15
gruen	(0 × 255) / 11
blau	–

Setze s = 15, z = 0, breite = 16 und hoehe = 12 in die Formeln ein.

🔍 Investigate

Was bedeutet der Ausdruck (rot << 16) | (gruen << 8) | blau?

Warum ist das Array als int[hoehe][breite] deklariert (erst Zeilen, dann Spalten)?

✏️ Modify

Setze blau nicht auf 128, sondern berechne ihn so: blau = 255 - rot. Was ändert sich in der Grafik? Passe den Code an und prüfe.

int[][] farbverlauf(int breite, int hoehe) {
    int[][] bild = new int[hoehe][breite];
    for (int z = 0; z < hoehe; z++) {
        for (int s = 0; s < breite; s++) {
            int rot   = (s * 255) / (breite - 1);
            int gruen = (z * 255) / (hoehe - 1);
            int blau  = 128; // anpassen: 255 - rot
            bild[z][s] = (rot << 16) | (gruen << 8) | blau;
        }
    }
    return bild;
}

Nur die Zeile mit blau ändert sich – rot ist schon berechnet.

🛠️ Make

Implementiere graustufen: Jedes Pixel soll einen Graustufenwert erhalten, der von links nach rechts dunkler wird. Tipp: Bei Grau gilt rot == gruen == blau. Für s=0 soll Weiß entstehen, für s=breite-1 Schwarz.

int[][] graustufen(int breite, int hoehe) {
    // Deine Implementierung hier

}

Bei Grau sind Rot, Grün und Blau gleich. Der Wert soll bei s = 0 mit 255 beginnen und bis s = breite − 1 auf 0 fallen.

🔮 Predict

Aufgabe 3 – Diagonalmuster mit Palette

Aufruf: diagonalMuster(12)

💡 Welche Farbe hat Pixel [2][3]? Berechne: (2+3) % 6 = ? → palette[?]

▶️ Run – Grafik & Trace

diagonalMuster(12) – 12×12 Pixel

Trage die Palette-Indizes für die erste Zeile (z=0, s=0 bis s=5) ein:

[0][0]

[0][1]

[0][2]

[0][3]

[0][4]

[0][5]

Berechne für z = 0 jeweils (z + s) % 6.

🔍 Investigate

Welcher Ausdruck statt (z + s) erzeugt senkrechte Farbstreifen?

Warum stellt idx = (z + s) % palette.length sicher, dass kein Array-Index-Fehler auftritt?

✏️ Modify

Ändere den Ausdruck so, dass waagerechte Streifen entstehen (alle Pixel in einer Zeile haben dieselbe Farbe). Ändere nur den Index-Ausdruck (z + s).

int[][] diagonalMuster(int n) {
    int[] palette = {
        0xFF4136, 0xFF851B, 0xFFDC00,
        0x2ECC40, 0x0074D9, 0x7FDBFF
    };
    int[][] bild = new int[n][n];
    for (int z = 0; z < n; z++) {
        for (int s = 0; s < n; s++) {
            int idx = (z + s) % palette.length; // anpassen
            bild[z][s] = palette[idx];
        }
    }
    return bild;
}

Welche Variable ist innerhalb einer Zeile immer gleich? Nur von ihr soll der Index abhängen.

🛠️ Make

Implementiere rahmenMuster: Der äußere Rahmen (1 Pixel Breite) soll rot (0xFF0000), der Rest weiß (0xFFFFFF) sein. Für n = 10 soll ein weißes Quadrat mit rotem Rand entstehen.

int[][] rahmenMuster(int n) {
    // Deine Implementierung hier

}

Ein Pixel liegt am Rand, wenn es in der ersten oder letzten Zeile bzw. Spalte liegt.

🔮 Predict

Aufgabe 4 – Rahmen & Kreuz

Aufruf: rahmenKreuz(9)

💡 Welche Farbe erhält Pixel [0][4] (Rand + Kreuz)? Welche Bedingung greift zuerst?

▶️ Run – Trace-Tabelle

rahmenKreuz(9) – 9×9 Pixel

Bestimme die Farbe (blau/rot/grau) für diese Pixel:

Pixel	istRand?	istKreuz?
[0][0]	Ja	Nein
[4][4]	Nein	Ja
[2][3]	Nein	Nein
[0][4]	Ja	Ja

Die if-else-Kette prüft der Reihe nach: Rand vor Kreuz vor Hintergrund.

🔍 Investigate

Warum werden boolean-Variablen für die Bedingungen verwendet?

Was passiert, wenn n gerade ist (z. B. n=8)? Was ist dann die Mitte?

✏️ Modify

Ändere das Kreuz zu einem Diagonalkreuz: Die Pixel auf den Diagonalen (z == s oder z + s == n - 1) sollen rot sein, der Rahmen bleibt blau, der Hintergrund grau.

int[][] rahmenKreuz(int n) {
    int[][] bild = new int[n][n];
    int mitte = n / 2;
    for (int z = 0; z < n; z++) {
        for (int s = 0; s < n; s++) {
            boolean istRand  = z == 0 || z == n-1 || s == 0 || s == n-1;
            boolean istKreuz = z == mitte || s == mitte; // anpassen
            if (istRand)        bild[z][s] = 0x1565C0;
            else if (istKreuz)  bild[z][s] = 0xE53935;
            else                bild[z][s] = 0xF5F5F5;
        }
    }
    return bild;
}

Auf der einen Diagonale sind Zeile und Spalte gleich, auf der anderen ergeben sie zusammen n − 1.

🛠️ Make

Implementiere zielscheibe: Die Farbe jedes Pixels hängt vom Abstand zur Bildmitte ab. Nutze abwechselnd zwei Farben je nach abstand % 2. Tipp: Abstand (gerundet) = (int) Math.round(Math.sqrt((z-m)*(z-m) + (s-m)*(s-m))) mit Mitte m = n / 2.

int[][] zielscheibe(int n) {
    // Deine Implementierung hier

}

Berechne für jedes Pixel den gerundeten Abstand zur Mitte m = n / 2 und wähle die Farbe mit abstand % 2.

🔮 Predict

Aufgabe 5 – Spiegelung

Analysiere die Methode, ohne die Grafik anzusehen.

Aufruf: spiegelung(8)

💡 Was gilt für s und (n-1-s)? Welche Spalten erhalten dieselbe Farbe?

▶️ Run – Grafik betrachten

spiegelung(8) – 8×8 Pixel, je 40 px

Welche Farbe haben die Pixel bild[2][1] und bild[2][6] bei n=8?

🔍 Investigate

Was bewirkt n - 1 - s als zweiter Spaltenindex?

Wie viele Spalten je Zeile werden bei n=8 tatsächlich berechnet (der Rest wird gespiegelt kopiert)?

✏️ Modify

Ändere die Methode so, dass das Bild vertikal gespiegelt wird (oben ↔ unten, statt links ↔ rechts). Ersetze dazu n - 1 - s durch den passenden Ausdruck für Zeilen.

int[][] spiegelung(int n) {
    int[][] bild = new int[n][n];
    for (int z = 0; z < n; z++) {
        for (int s = 0; s < n / 2; s++) {
            int farbe = ((z + s) % 3 == 0) ? 0x3498DB : 0xE74C3C;
            bild[z][s]         = farbe; // anpassen: vertikale Spiegelung
            bild[z][n - 1 - s] = farbe;
        }
    }
    return bild;
}

Jetzt wird oben ↔ unten gespiegelt: Zeile z und Zeile n − 1 − z bekommen dieselbe Farbe. Welche Schleife läuft dann nur bis zur Hälfte?

🛠️ Make

Implementiere viertelSpiegelung: Das Bild soll in allen vier Quadranten gespiegelt identisch sein. Berechne die Farbe nur für das obere-linke Viertel und kopiere es in die übrigen drei. Nutze (z % 4) + (s % 4) für die Farbberechnung des Grundmusters.

int[][] viertelSpiegelung(int n) {
    // Deine Implementierung hier

}

Berechne die Farbe nur für das Viertel oben links (z und s bis n / 2) und setze sie in alle vier gespiegelten Positionen.

🔮 Predict

Aufgabe 6 – Zielscheibe

Analysiere die Methode, ohne die Grafik anzusehen.

Aufruf: zielscheibe(14)

💡 Was berechnet Math.sqrt((z-m)*(z-m) + (s-m)*(s-m))? Wovon hängt die Farbe ab?

▶️ Run – Grafik betrachten

zielscheibe(14) – 14×14 Pixel, je 20 px

Welchen Abstand hat Pixel [0][0] vom Mittelpunkt bei n=14 (m = 14 / 2 = 7)?

Formel: Math.sqrt((0-7)² + (0-7)²) ≈ ?

🔍 Investigate

Warum wird % 2 auf den gerundeten Abstand angewendet?

Was würde sich ändern, wenn man % 3 statt % 2 verwendet?

✏️ Modify

Ändere die Zielscheibe so, dass sie drei Farben statt zwei verwendet (rot, weiß, blau – abwechselnd von innen nach außen). Nutze % 3 und eine Farb-Palette.

int[][] zielscheibe(int n) {
    int[][] bild = new int[n][n];
    int m = n / 2;
    for (int z = 0; z < n; z++) {
        for (int s = 0; s < n; s++) {
            int abstand = (int) Math.round(Math.sqrt((z-m)*(z-m) + (s-m)*(s-m)));
            if (abstand % 2 == 0) { // anpassen: % 3 und Palette
                bild[z][s] = 0xE53935;
            } else {
                bild[z][s] = 0xFFFFFF;
            }
        }
    }
    return bild;
}

Lege drei Farben in einem Array ab und wähle den Index mit abstand % 3.

🛠️ Make

Implementiere ellipse: Statt eines Kreises soll eine Ellipse entstehen. Verwende unterschiedliche Skalierungsfaktoren für x- und y-Richtung: double rx = breite / 2.0, ry = hoehe / 2.0 und prüfe (dz/ry)² + (ds/rx)² <= 1.

📐 Ellipsenformel:

Pixel [z][s] liegt innerhalb der Ellipse, wenn: ((z - ry) / ry)² + ((s - rx) / rx)² ≤ 1

int[][] ellipse(int breite, int hoehe) {
    // Deine Implementierung hier

}

Halbachsen: rx = breite / 2.0, ry = hoehe / 2.0. Ein Pixel liegt innen, wenn ((z − ry) / ry)² + ((s − rx) / rx)² ≤ 1.

🔮 Predict

Aufgabe 7 – Freies Pixel-Make

Bevor du deinen Code schreibst, plane deine Grafik.

💡 Welche Idee möchtest du umsetzen?

▶️ Run – Inspirations-Galerie

Hier siehst du die Ergebnisse der ersten vier Aufgaben. Nutze sie als Inspiration.

Schachbrett

Gradient

Diagonalmuster

Rahmen & Kreuz

Was haben alle vier Methoden gemeinsam?

🔍 Investigate – Reflexion

Welchen Vorteil hat ein 2D-Array gegenüber einzelnen Variablen für jedes Pixel?

Wie viele Pixel hat ein int[20][30]-Bild insgesamt?

✏️ Modify – Interaktiver Pixel-Editor

Klicke auf das Raster, um Pixel einzufärben. Wähle eine Farbe und male dein Motiv. Dies entspricht dem manuellen Befüllen eines 2D-Arrays.

🛠️ Make – Eigene Pixelgrafik programmieren

Schreibe eine eigene Java-Methode, die ein 2D-Array mit Farbwerten füllt. Der Simulator führt deinen Code direkt aus. Verfügbar: z, s, breite, hoehe, Math.*.

🎨 Farb-Referenz (Hex-Werte):

Farbe	Hex-Code	Farbe	Hex-Code
Schwarz	`0x000000`	Weiß	`0xFFFFFF`
Rot	`0xFF0000`	Blau	`0x0000FF`
Grün	`0x00FF00`	Gelb	`0xFFFF00`
Orange	`0xFF8800`	Grau	`0x808080`

Bildgröße:

int[][] meinBild(int breite, int hoehe) {
    int[][] bild = new int[hoehe][breite];
    for (int z = 0; z < hoehe; z++) {
        for (int s = 0; s < breite; s++) {

            // === Dein Code hier ===
            int rot   = (s * 255) / (breite - 1);
            int gruen = (z * 255) / (hoehe - 1);
            int blau  = 128;
            bild[z][s] = (rot << 16) | (gruen << 8) | blau;

        }
    }
    return bild;
}

🏅 Deine Badges

📊 Statistik

↺ Fortschritt zurücksetzen

Achtung: Alle gespeicherten Ergebnisse werden unwiderruflich gelöscht.

📄 Arbeitsblatt erstellen

Wähle aus, welche Bereiche auf das Arbeitsblatt kommen. Es enthält dann alle … Aufgaben dieser Seite aus diesen Bereichen – mit Kästchen zum Ankreuzen, leeren Tabellen und Platz zum Schreiben, ohne Lösungen und Tipps.

Bereiche für das Arbeitsblatt 🔮 Predict – vorhersagen, was der Code macht ▶️ Run – Werte Zeile für Zeile in die Tabelle eintragen 🔍 Investigate – untersuchen, warum der Code so arbeitet ✏️ Modify – Code gezielt verändern 🛠️ Make – eigene Methode schreiben

Aufgabe gelöst!

2D-Arrays & Pixelgrafiken

📝 Aufgaben

📖 Die PRIMM-Methode

P – Predict

R – Run

I – Investigate

M – Modify

M – Make

💡 Was sind 2D-Arrays?

🏅 Zuletzt verdiente Badges

🏅 Deine Badges

📊 Statistik

↺ Fortschritt zurücksetzen

📄 Arbeitsblatt erstellen