🎨

Pixelgrafiken mit 2D-Listen

Informatik · Python · Klassen 9–11 · PRIMM-Methode

Python Interaktiv Kl. 9–11

🎯 Worum geht's? Klasse 9–11 · 3 Unterrichtsstunden

Nach dieser Seite kannst du …

vorhersagen, welches Bild verschachtelte Schleifen erzeugen
Farben als Zahlen (0xRRGGBB) lesen und aus Rot, Grün und Blau berechnen
Muster mit %, Bedingungen und Spiegelungen gezielt verändern
eigene Pixelgrafiken programmieren

Vorwissen: Listen, for-Schleifen und if in Python

📝 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

✅ Aufgaben abgeschlossen

0

🔥 Streak (Tage)

–

🎯 Genauigkeit

📐 Das Wichtigste in Kürze

Ein Bild ist eine Liste von Zeilen: bild[z][s] ist das Pixel in Zeile z, Spalte s.
Leeres Bild: bild = [[0] * breite for _ in range(hoehe)].
Farben als Hex-Zahl 0xRRGGBB: 0xFF0000 rot, 0x00FF00 grün, 0x0000FF blau, 0xFFFFFF weiß, 0x000000 schwarz.
Aus Anteilen zusammensetzen: (rot << 16) | (gruen << 8) | blau (je 0–255).

🏅 Zuletzt verdiente Badges

🔮 Predict

Aufgabe 1 – Schachbrettmuster

Analysiere die Funktion, ohne das Bild anzusehen.

def schachbrett(groesse):
    bild = [[0] * groesse for _ in range(groesse)]
    for z in range(groesse):
        for s in range(groesse):
            if (z + s) % 2 == 0:
                bild[z][s] = 0xFFFFFF   # weiß
            else:
                bild[z][s] = 0x000000   # schwarz
    return bild

Aufruf: schachbrett(8)

Welches Bild entsteht?

Was ergibt (0 + 0) % 2, was (0 + 1) % 2? Welche Farbe hat Pixel [0][0]?

▶️ Run – Bild betrachten

So sieht das Ergebnis aus.

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

(0 + 1) % 2 = 1 – welcher Zweig wird dann ausgeführt?

🔍 Investigate

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

Warum zwei verschachtelte Schleifen?

✏️ Modify

Passe die Funktion an, sodass ein rot-blaues Schachbrett entsteht: 0xFF0000 statt weiß, 0x0000FF statt schwarz.

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

🛠️ Make

Schreibe dreifarben_muster(groesse): Drei Farben deiner Wahl wechseln sich diagonal ab – nutze (z + s) % 3 und eine Liste palette.

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

🔮 Predict

Aufgabe 2 – Farbverlauf

Rot hängt von der Spalte ab, Grün von der Zeile.

def farbverlauf(breite, hoehe):
    bild = [[0] * breite for _ in range(hoehe)]
    for z in range(hoehe):
        for s in range(breite):
            rot = (s * 255) // (breite - 1)
            gruen = (z * 255) // (hoehe - 1)
            blau = 128
            bild[z][s] = (rot << 16) | (gruen << 8) | blau
    return bild

Aufruf: farbverlauf(16, 12)

Welche Farbe hat das Pixel oben links?

Setze z = 0 und s = 0 ein: Was ergeben rot und gruen?

▶️ Run – Farbe berechnen

Berechne die Anteile des Pixels oben rechts (z = 0, s = 15).

breite = 16
hoehe = 12
z = 0
s = 15
rot = (s * 255) // (breite - 1)
gruen = (z * 255) // (hoehe - 1)
blau = 128

Anteil	Formel	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 macht (rot << 16) | (gruen << 8) | blau?

Warum steht die Zeile zuerst: bild[z][s]?

✏️ Modify

Setze blau nicht fest auf 128, sondern berechne blau = 255 - rot.

Nur die Zeile mit blau ändert sich.

🛠️ Make

Schreibe graustufen(breite, hoehe): links Weiß, nach rechts gleichmäßig dunkler bis Schwarz. Bei Grau gilt rot = grün = blau = hell mit hell = 255 - (s * 255) // (breite - 1).

Berechne hell für jede Spalte und setze denselben Wert für Rot, Grün und Blau ein.

🔮 Predict

Aufgabe 3 – Diagonalmuster mit Palette

Der Farbindex ergibt sich aus Zeile plus Spalte.

def diagonal_muster(n):
    palette = [0xFF4136, 0xFF851B, 0xFFDC00,
               0x2ECC40, 0x0074D9, 0x7FDBFF]
    bild = [[0] * n for _ in range(n)]
    for z in range(n):
        for s in range(n):
            idx = (z + s) % len(palette)
            bild[z][s] = palette[idx]
    return bild

Aufruf: diagonal_muster(12)

Welches Bild entsteht?

Pixel mit gleichem z + s haben dieselbe Farbe – z. B. [0][2], [1][1], [2][0].

▶️ Run – Farbindizes

Trage den Palettenindex für die oberste Zeile (z = 0) ein.

n = 12
palette_laenge = 6
z = 0

	[0][0]	[0][1]	[0][2]	[0][3]	[0][4]	[0][5]
`idx`

Berechne (0 + s) % 6.

🔍 Investigate

Welcher Ausdruck statt (z + s) ergibt senkrechte Streifen?

Warum gibt (z + s) % len(palette) nie einen IndexError?

✏️ Modify

Ändere nur den Index-Ausdruck so, dass waagerechte Streifen entstehen.

Welche Variable ist innerhalb einer Zeile immer gleich?

🛠️ Make

Schreibe rahmen_muster(n): Der äußere Rand (1 Pixel) ist rot 0xFF0000, der Rest weiß 0xFFFFFF.

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

🔮 Predict

Aufgabe 4 – Rahmen und Kreuz

Die Bedingungen werden der Reihe nach geprüft.

def rahmen_kreuz(n):
    bild = [[0] * n for _ in range(n)]
    mitte = n // 2
    for z in range(n):
        for s in range(n):
            ist_rand = z == 0 or z == n - 1 or s == 0 or s == n - 1
            ist_kreuz = z == mitte or s == mitte
            if ist_rand:
                bild[z][s] = 0x1565C0    # blau
            elif ist_kreuz:
                bild[z][s] = 0xE53935    # rot
            else:
                bild[z][s] = 0xF5F5F5    # grau
    return bild

Aufruf: rahmen_kreuz(9)

Welches Bild entsteht?

Welche Bedingung greift für Pixel [0][4] zuerst?

▶️ Run – Farben bestimmen

Bestimme die Farbe (blau/rot/grau) der Pixel bei rahmen_kreuz(9).

Pixel	Rand?	Kreuz?
[0][0]	ja	nein
[4][4]	nein	ja
[2][3]	nein	nein
[0][4]	ja	ja

Rand geht vor Kreuz geht vor Hintergrund.

🔍 Investigate

Warum werden die Bedingungen in Variablen gespeichert?

Was ist mitte bei n = 8?

✏️ Modify

Ändere das Kreuz zu einem Diagonalkreuz: rot sind die Pixel mit z == s oder z + s == n - 1.

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

🛠️ Make

Schreibe zielscheibe(n): Abstand zur Mitte m = n // 2 mit d = round(math.sqrt((z - m) ** 2 + (s - m) ** 2)); bei geradem d rot 0xFF0000, sonst weiß.

Berechne für jedes Pixel den gerundeten Abstand zur Mitte und wähle die Farbe mit d % 2.

🔮 Predict

Aufgabe 5 – Spiegelung

Nur die linke Hälfte wird berechnet, die rechte gespiegelt.

def spiegelung(n):
    bild = [[0] * n for _ in range(n)]
    for z in range(n):
        for s in range(n // 2):
            farbe = 0x3498DB if (z + s) % 3 == 0 else 0xE74C3C
            bild[z][s] = farbe
            bild[z][n - 1 - s] = farbe
    return bild

Aufruf: spiegelung(8)

Welche Aussage trifft auf das Bild zu?

bild[z][s] und bild[z][n - 1 - s] bekommen jeweils dieselbe Farbe.

▶️ Run – Bild betrachten

So sieht das Ergebnis aus.

Welche Farbe haben bild[2][1] und bild[2][6]?

Für s = 1 ist n − 1 − s = 6.

🔍 Investigate

Was berechnet n - 1 - s?

Wie viele Spalten je Zeile werden bei n = 8 tatsächlich berechnet?

✏️ Modify

Spiegle das Bild oben ↔ unten statt links ↔ rechts: Die obere Hälfte wird berechnet, die untere gespiegelt.

Jetzt bekommen Zeile z und Zeile n − 1 − z dieselbe Farbe. Welche Schleife läuft dann nur bis zur Hälfte?

🛠️ Make

Schreibe viertel_spiegelung(n): Berechne die Farben nur im Viertel oben links (z und s bis n // 2) und spiegle sie in alle vier Viertel. Das Muster im Viertel darfst du frei wählen.

Berechne die Farbe nur einmal und setze sie in alle vier gespiegelten Positionen.

🔮 Predict

Aufgabe 6 – Zielscheibe

Die Farbe hängt vom Abstand zur Bildmitte ab.

import math

def zielscheibe(n):
    bild = [[0] * n for _ in range(n)]
    m = n // 2
    for z in range(n):
        for s in range(n):
            abstand = round(math.sqrt((z - m) ** 2 + (s - m) ** 2))
            if abstand % 2 == 0:
                bild[z][s] = 0xE53935
            else:
                bild[z][s] = 0xFFFFFF
    return bild

Aufruf: zielscheibe(14)

Welches Bild entsteht?

Alle Pixel mit gleichem Abstand zur Mitte liegen auf einem Kreis.

▶️ Run – Abstand berechnen

Bei zielscheibe(14) ist m = 14 // 2 = 7.

Welchen Abstand hat Pixel [0][0] von der Mitte (gerundet auf zwei Stellen)?

√((0 − 7)² + (0 − 7)²) = √98.

🔍 Investigate

Wozu dient abstand % 2?

Was ändert sich mit % 3?

✏️ Modify

Verwende drei Farben: palette = [0xE53935, 0xFFFFFF, 0x1565C0] und den Index abstand % 3.

Lege die drei Farben in eine Liste und wähle den Index mit abstand % 3.

🛠️ Make

Schreibe ellipse(breite, hoehe): Ein Pixel liegt innen, wenn ((z - ry) / ry) ** 2 + ((s - rx) / rx) ** 2 <= 1 mit rx = breite / 2, ry = hoehe / 2. Innen rot 0xE53935, außen grau 0xF5F5F5.

Berechne für jedes Pixel den Ausdruck aus der Aufgabe und wähle die Farbe danach.

🔮 Predict

Aufgabe 7 – Eigene Pixelgrafik

Plane zuerst, was du zeichnen möchtest.

Welche Idee möchtest du umsetzen?

Jede Idee ist richtig – überlege, welche Teile des Bildes von z, welche von s abhängen.

▶️ Run – Was haben die Muster gemeinsam?

Denk an die Aufgaben 1 bis 6 zurück.

Was haben alle Funktionen gemeinsam?

Schau dir die Struktur der bisherigen Funktionen an.

🔍 Investigate

Welchen Vorteil hat eine Liste von Listen gegenüber einzelnen Variablen je Pixel?

Wie viele Pixel hat [[0] * 30 for _ in range(20)]?

✏️ Modify

Verändere den Farbverlauf: Wähle andere Formeln oder Farben, sodass ein anderes Bild entsteht. Mit „▶ Ausführen“ siehst du dein Ergebnis.

Ändere z. B. den festen Wert von blau oder tausche, welche Farbe von z bzw. s abhängt.

🛠️ Make

Programmiere deine eigene Grafik in mein_bild(breite, hoehe) – zum Beispiel deine Idee aus Predict. Sie muss eine Liste von Zeilen zurückgeben und mindestens zwei Farben verwenden.

Teile das Bild mit Bedingungen auf z und s in Bereiche und gib jedem Bereich eine Farbe.

🏅 Deine Badges

Verdiente Badges leuchten auf.

📊 Statistik

↺ Zurücksetzen

Alle gespeicherten Daten werden 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!

Pixelgrafiken mit 2D-Listen

📝 Aufgaben

📐 Das Wichtigste in Kürze

🏅 Zuletzt verdiente Badges

🏅 Deine Badges

📊 Statistik

↺ Zurücksetzen

📄 Arbeitsblatt erstellen