lehrkraefte:snr:informatik:glf22:python:chaos-game-mit-pygame [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~

====== Spielerisch-chaotische Einführung in Python ======

===== Chaos-Spiel − der springende Punkt =====

(eventuell Würfel mitnehmen...)

Das Chaos-Spiel geht wie folgt:
<WRAP round info>
Seien $A$, $B$, $C$ die Ecken eines gleichseitigen Dreiecks auf der Tafel.

Wähle zufällig einen weiteren Punkt $P$. Wir lassen diesen Punkt „springen“, indem wir die folgenden Anweisungen unendlich oft wiederholen:
<WRAP round box>
  - Wähle zufällig einen der Eckpunkte $A$, $B$, $C$, etwa mit Hilfe eines Würfels: 
      * $A$ falls der Würfel 1 oder 2 zeigt;
      * $B$ falls er 3 oder 4 zeigt;
      * $C$ falls er 5 oder 6 zeigt.    
  - Der „neue“ Punkt $P$ sei der Mittelpunkt zwischen dem „alten“ Punkt $P$ und dem erwürfelten Eckpunkt. 
  - Markiere diesen neuen Punkt $P$.
</WRAP>
</WRAP>

===== Aufgabe 1 =====

<WRAP round todo>
Spiele das Chaos-Spiel auf einem Blatt Papier. Kannst Du erraten, welche geometrische Figur herauskommt?

Die Antwort wirst du sehen, sobald du das nachfolgende Python-Programm auf deinem Rechner zum Laufen gebracht hast.
</WRAP>


===== Aufgabe 2: Python-Programm zum Chaos-Spiel verstehen =====
<WRAP round todo>

Lies das nachfolgende Python-Programm ''chaos-game.py'' und versuche, es zu verstehen! 

Testfragen:
  - Wo wird der zufällige Punkt $P=(x,y)$ erzeugt?
  - Im Programm wird mit einem "Würfel" mit drei Seiten gewürfelt. In welcher Zeile wird mit diesem Würfel gewürfelt?
  - Wo "springt" der Punkt $P$?
  - Kannst du erraten, was die Befehlszeile ''for i in range(0, iterationen):'' bewirkt? (englisch //range// = Bereich)

Wenn du diese oder zumindest einige dieser Fragen beantworten kannst (und dir somit grob klar ist, was das Programm macht): Bringe das Programm auf deinem Rechner zum Laufen, wie in der nächsten Aufgabe beschrieben.

<wrap lo>Wer noch kein Python kann, wird beim ersten Lesen nichts oder nur wenig verstehen - der Sinn ist aber, dass ihr ähnlich wie beim äusserst effektiven frühkindlichen Erlernen der Muttersprache nun einer neuen Programmiersprache in einer nicht-trivialen Situation ausgesetzt werdet und durch Nachfragen und Erklärungen meinerseits mit der Zeit ein gewisses Verständnis entwickelt.</wrap>
</WRAP>

==== Python-Programm zum Chaos-Spiel ====

<code python chaos-game.py>
import pygame
from random import *

breite = 500
hoehe = 433                     # ungefähr sqrt(3)/2 * breite;     sqrt = square root = Quadratwurzel
iterationen = 10000

weiss = (255, 255, 255)         # Ein Tupel aus drei Zahlen, kodiert die Farbe Weiss im RGB-Modell, das wir später kennenlernen werden.
 
# Koordinaten des Punkts A
xA = 0
yA = hoehe
 
# Koordinaten des Punkts B
xB = breite
yB = hoehe
 
# Koordinaten des Punkts C
xC = int(breite / 2)            # Der Befehl "int" macht eine Kommazahl (= reelle Zahl = real number) durch Abschneiden der Nachkommastellen zu einer ganzen Zahl (= integer).
yC = 0

pygame.init()
pygame.display.set_caption("Das Chaos-Spiel")

leinwand = pygame.display.set_mode((breite + 1, hoehe + 1))

pygame.draw.line(leinwand, weiss, (xA, yA), (xB, yB))
pygame.draw.line(leinwand, weiss, (xB, yB), (xC, yC))
pygame.draw.line(leinwand, weiss, (xC, yC), (xA, yA))

pygame.display.update()

x = randint(0, breite)
y = randint(0, hoehe)

for i in range(0, iterationen):
    zufall = randint(1, 3)
    if zufall == 1:
        x = x + 0.5 * (xA - x)
        y = y + 0.5 * (yA - y)
    if zufall == 2:
        x = x + 0.5 * (xB - x)
        y = y + 0.5 * (yB - y)
    if zufall == 3: 
        x = x + 0.5 * (xC - x)
        y = y + 0.5 * (yC - y)
    leinwand.set_at((round(x),round(y)), weiss)               # Zeichnet ein Pixel am Punkt (x,y) bzw. genauer an den gerundeten Koordinaten.
    pygame.display.update((round(x), round(y), 1, 1))
    # denn das ist deutlich schneller als
    # pygame.display.update()
    pygame.time.delay(1)

    if i % 1000 == 0:                                        # "Prozent-Division" liefert den Rest der Division.
        print(i)

print("Fertig! Das Fenster wird in 5 Sekunden geschlossen.") # Ausgabe der Zeichenkette (= string) zwischen den Anführungszeichen.
print(f"Insgesamt wurden {iterationen} Punkte gezeichnet.")  # f-string = formatted string
        

pygame.time.delay(5000)                                      # Pause in Millisekunden
pygame.quit()
</code>

==== Derselbe Python-Code sehr ausführlich kommentiert (eine Art Musterlösung zu Aufgabe 2) ====

<hidden Programm-Code mit Erklärungen>
<code python chaos-game-explained.py>
# Sierpinski-Dreieck per Chaos-Spiel
# Alle Zeilen, die mit dem Hash- oder Doppelkreuz-Symbol # beginnen, sind Kommentare
# und werden vom Computer beim Ausführen des Programms ignoriert.
# Leerzeilen dienen nur der besseren Strukturierung und werden ebenfalls vom Computer ignoriert.
 
# Import von Pakete/Bibliotheken (packages/libraries) mit Grafik- und Zufallsbefehlen
# (eigentlich ist pygame ein Paket zur Spieleprogrammierung, 
# jedoch eignet es sich auch zum Zeichnen einfacher Grafiken und ich habe nichts "Besseres" gefunden):
import pygame
from random import *


# Es folgen zwei Zuweisungen, kodiert durch das Gleichheitszeichen "=":
# Wir weisen der Variablen "breite" den Wert 10000 rechts des Gleichheitszeichens zu.
# Das Gleichheitszeichen ist NICHT als mathematische Gleichheit zu verstehen. 
# Es handelt sich um eine Zuweisung! (Dies wird weiter unten klarer.)
# (Wir werden die Variable "breite" im Programm nicht ändern - es handelt sich also genauer um eine Konstante.)
# Analog wird die Variable/Konstante "hoehe" auf 8660 gesetzt.
breite = 500
hoehe = 433                        # ungefähr sqrt(3)/2 * breite;     sqrt = square root = Quadratwurzel

# Die folgende Variable gibt an, wie oft wir den Punkt springen lassen.
iterationen = 10000

weiss = (255, 255, 255)            # Ein Tupel aus drei Zahlen, kodiert die Farbe Weiss im RGB-Modell, das wir später kennenlernen werden.
 
# Koordinaten des Punkts A
xA = 0
yA = hoehe
 
# Koordinaten des Punkts B
xB = breite
yB = hoehe
 
# Koordinaten des Punkts C
xC = int(breite / 2)               # Der Befehl "int" macht eine Kommazahl (= reelle Zahl = real number) durch Abschneiden der Nachkommastellen zu einer ganzen Zahl (= integer).
yC = 0


# Die folgenden drei Befehle erzeugen ein Fenster mit dem Titel "Das Chaos-Spiel"
# mit einem rechteckigem Ausschnitt der Zeichenebene.
# Genauer wird der Bereich mit x-Koordinaten von 0 bis "breite" und
# y-Koordinaten von 0 bis "hoehe" bereitgestellt.
# Beachte: Die x-Achse zeigt nach rechts, die y-Achse nach UNTEN!
# Jedes Pixel (= jeder Bildpunkt) mit ganzzahligen Koordinaten in diesem Bereich 
# kann später gefärbt werden.
# In der Titelleiste des Fensters erscheint die Zeichenkette (englisch string)
# "Das Chaos-Spiel".
pygame.init()
pygame.display.set_caption("Das Chaos-Spiel")

leinwand = pygame.display.set_mode((breite + 1, hoehe + 1))

# Zeichne gerade Linien zwischen den angegebenen Punkten (auf der "leinwand" mit Farbe "weiss"):
pygame.draw.line(leinwand, weiss, (xA, yA), (xB, yB))
pygame.draw.line(leinwand, weiss, (xB, yB), (xC, yC))
pygame.draw.line(leinwand, weiss, (xC, yC), (xA, yA))

# Die Linien werden zunächst "verborgen" gezeichnet. Um sie wirklich anzuzeigen, muss man
# das Display updaten. (Dies ist so gemacht, um ein Flackern des Bildschirms zu vermeiden.)
pygame.display.update()


# zufaellige Startkoordinaten des springenden Punktes
# "randint" ist eine Abkürzung für "random integer" = "zufällige ganze Zahl" 
# zwischen den angegebenen Grenzen (jeweils einschliesslich). 
x = randint(0, breite)
y = randint(0, hoehe)

 
# Es folgt eine sogenannte "for-Schleife" (englisch "for loop").
# Die Variable i nimmt nacheinander die Werte 0, 1, 2, ..., iterationen - 1 an.
# Beachte, dass der Wert iterationen nicht angenommen wird.
# (Hierbei ist iterationen - 1 unser Ersatz für unendlich.)
# Für jeden dieser Werte wird der nachfolgende eingerückte Bereich (Einrückung jeweis vier Leerzeichen)
# genau einmal durchlaufen.
# ACHTUNG: Falsche Einrückungen verursachen Fehler.
for i in range(0, iterationen):

    # Weise der Variablen "zufall" eine Zufallszahl zu, die den Wert 1,2 oder 3 hat.
    # Wir wuerfeln sozusagen mit einem dreiseitigen Wuerfel. 
    # Dabei sind die drei Zahlen 1, 2, 3 gleich wahrscheinlich.
    zufall = randint(1, 3)

    # Es folgt eine sogenannte "if-Bedingung" (englisch "if condition"): 
    # Falls die Variable "zufall" den Wert 1 hat (Gleichheit von Variablen wird mit "==" 
    # und nicht mit "=" abgefragt),
    # werden die folgenden eingerueckten Zeilen durchgeführt.
    if zufall == 1:

        # Die neue x-Koordinate unseres springenden Punktes liegt genau zwischen der alten x-Koordinate
        # des springenden Punktes und der x-Koordinate von A.
        # Hier wird nun klar, dass "=" eine Zuweisung ist und kein Gleichheitszeichen:
        # Der Variablen x links wird als neuem Wert das zugewiesen,
        # was die Berechnung rechts ergibt - in dieser Berechnung wird der alte Wert von x verwendet.
        x = x + 0.5 * (xA - x)
 
        # Analog fuer die neue y-Koordinate
        y = y + 0.5 * (yA - y)
 
        # Hier endet der eingerückte Befehlsblock, der ausgefuehrt wird, wenn zufall == 1 gilt.
 

# Die beiden folgenden if-Bedingungen sind nun hoffentlich klar.
    if zufall == 2:
        x = x + 0.5 * (xB - x)
        y = y + 0.5 * (yB - y)
    if zufall == 3: 
        x = x + 0.5 * (xC - x)
        y = y + 0.5 * (yC - y)
    leinwand.set_at((round(x),round(y)), weiss)               # Zeichnet ein Pixel am Punkt (x,y) bzw. genauer an den gerundeten Koordinaten.
    pygame.display.update((round(x), round(y), 1, 1))
    # Das Updaten eines kleinen rechteckigen Bereichs ist deutlich schneller als das Updaten
    # des gesamten Zeichenbereichs mit
    # pygame.display.update()
    pygame.time.delay(1)

    # Alle 1000 Iterationen wird die Variable i ausgegeben.
    if i % 1000 == 0:                                        # "Prozent-Division" liefert den Rest der Division.
        print(i)
 
# Hier endet die for-Schleife, denn der folgende Befehl ist nicht mehr eingerueckt.

print("Fertig! Das Fenster wird in 5 Sekunden geschlossen.") # Ausgabe der Zeichenkette (= string) zwischen den Anführungszeichen.
print(f"Insgesamt wurden {iterationen} Punkte gezeichnet.")  # f-string = formatted string
        

# Pause von 5000 Millisekunden, also 5 Sekunden
pygame.time.delay(5000)                                      
# Schliesse das Zeichenfenster.
pygame.quit()
</code>
</hidden>


===== Aufgabe 3: Python (inklusive pygame) installieren und das obige Programm zum Laufen bringen (zuerst in VS Code) =====

<WRAP round todo>
1. Installiere Python auf deinem Rechner. Am einfachsten geht dies über den Windows App Store.((Alternative (nicht empfohlen, denn vermutlich muss man dann noch einige Pfad-Einstellungen von Hand vornehmen): Download von https://www.python.org/downloads/)) (Man kann die App "Python" starten und dann direkt in der "Python-Shell" Python-Befehle eingeben. Das brauchen wir aber heute nicht.)

2. Speichere das obige Python-Programm ''chaos-game.py'' in deinem Verzeichnis ''C:\Users\Vorname.Nachname\informatik\python'' (durch Anklicken des Programm-Namens mit der RECHTEN Maustaste, ''Save as''/''Speichern unter'').

3. Öffne das Programm ''chaos-game.py'' mit VS-Code (etwa über das Menü per ''File''->''Open File''). Versuche, es dort zum Laufen zu bringen (über das Menü per ''Run''->''Run without debugging'' (oder deutsch ''Ausführen''->''Ausführen ohne Debugging'') oder schneller mit dem Shortkey''Ctrl+F5''). - Vermutlich klappt das nicht: Du musst die Library ''pygame'' installieren wie im folgenden 4. Punkt beschrieben (dies ist eine Bibliothek von Befehlen, die das Programmieren von Spielen erleichtern (pygame = python game library); wir verwenden sie, da sie sich auch gut zum Erstellen von Zeichnungen eignet):

4. Öffne die Anwendung/App "Eingabeaufforderung" (= "command prompt" = "Befehlszeile", auf manchen Schul-Windows-Rechnern muss man "cmd" suchen). Gib dort den Befehl ''pip install pygame'' ein, gefolgt von ''Enter'': (''pip'' ist ein Paketverwaltungsprogramm für Python; pip ist ein Akronym für "pip installs packages", vgl. [[https://de.wikipedia.org/wiki/Pip_(Python)|]])

(Falls das Probleme macht, vielleicht klappt das Folgende (nicht getestet): Probiere es mit ''python -m pip install pygame''.)

{{:lehrkraefte:snr:informatik:glf22:python:install-pygame.png?800|}}

5. Nun solltest du das Programm in VS-Code starten können (so wie im Punkt 3 beschrieben).
</WRAP>

===== Ordnung im Chaos: Mehr Infos zum Chaos-Spiel =====

<WRAP center round info>
Die Figur, die das Chaos-Spiel produziert, heisst [[https://en.wikipedia.org/wiki/Sierpi%C5%84ski_triangle|Sierpiński-Dreieck]]. Weitere Infos zum Chaos-Spiel findest du unter [[https://en.wikipedia.org/wiki/Chaos_game|Wikipedia - Chaos game]].
</WRAP>


===== Aufgabe 4: Python-Extensions installieren (da VS Code gerade offen ist) =====

<WRAP center round todo>
Installiere die beiden Extensions "Python" und "Pylance" in VS Code wie im Folgenden erklärt (eventuell wurde dir dies bereits von VS Code vorgeschlagen und du hast diese Aufgabe bereits erledigt). Sie erleichtern das Programmieren in Python.

  * In der linken Symbolleiste klicke auf das "Extension"-Icon (zweites von unten): {{:lehrkraefte:snr:informatik:glf22:python:vscode-extension-item-on-lhs.png?30|}}
  * Im "Extensions-Fenster" werden dir vermutlich die beiden Erweiterungen Python und Pylance vorgeschlagen (sonst kannst du im Suchfeld nach ihnen suchen). Installiere sie (vermutlich wird Pylance (und anderes) mit Python gleich mitinstalliert): {{:lehrkraefte:snr:informatik:glf22:python:python-extension.png?500|}}, {{:lehrkraefte:snr:informatik:glf22:python:pylance-extension.png?300|}} 
</WRAP>



===== Aufgabe 5: Programm per Eingabeaufforderung zum Laufen bringen =====


<WRAP round todo>
Du kannst das Programm auch ohne den Editor/die Entwicklungsumgebung VS-Code ablaufen lassen:

Verwende wieder die App "Eingabeaufforderung" und gib die folgenden Befehle ein (wenn deine Verzeichnisse anders heissen, musst du die Befehle in naheliegender Weise anpassen; z. B. musst du etwas wie ''cd "OneDrive - Kt. SG BLD"'' eingeben, um wenn du deine Informatik-Dateien unter OneDrive gespeichert hast).((Bei Problemen: Schau im Terminal von VS Code nach, was dort steht! Alternative (insbesondere nützlich, wenn deine Daten auf OneDrive liegen): Nimm statt der "Eingabeaufforderung" die "PowerShell". Wenn du im Explorer in dem Verzeichnis bist, wo dein Python-Programm liegt, öffne die PowerShell in diesem Verzeichnis per Rechtsklick (nicht auf eine Datei klicken, sondern auf den "freien Bereich" unter den Dateien).))
  * ''cd informatik'' + ''Enter'' (Erklärung: ''cd'' steht für "change directory")
  * ''cd python'' + ''Enter'' (nun bist du hoffentlich in dem Verzeichnis, in dem du das Programm ''chaos-game.py'' abgespeichert hast)
  * ''python chaos-game.py'' + ''Enter'' (dies bewirkt, dass das Programm ''chaos-game.py'' ausgeführt wird))

Dein Screen sollte ungefähr wie folgt aussehen und das Programm sollte starten:

{{:lehrkraefte:snr:informatik:glf22:python:run-chaos-game-anfang.png?600|}}

Alternativen:
  - In der "Eingabeaufforderung" kannst du auch direkt sinngemäss ''python C:\Users\Olaf.Schnuerer\informatik\python\chaos-game.py'' eingeben (to be tested).
  - Du kannst das Programm auch in der "Python-Shell" aufrufen. Starte die App "Python". Gib dort sinngemäss ''exec(open("chaos-game.py").read())'' ein, wenn du im richtigen Verzeichnis bist; sonst musst du entweder zuerst in das richtige Verzeichnis wechseln oder zusätzlich den Pfad ähnlich wie oben angeben. Die Python-Shell kannst du übrigens mit ''exit()'' per Tastatur beenden.
  - Du kannst das Python-Programm direkt aus dem Explorer laufen lassen: Je nach Einstellungen, direkt per ''Doppelklick'' oder per ''Rechtsklick''+"Open with" und dort Python auswählen. (Was beim Doppelklick auf eine Datei eines gegebenen Typs passiert (Dateinamenserweiterung), kann man einstellen per Rechtsklick auf die Datei->"Properties"->"Opens with".)
</WRAP>


===== Wichtige Begriffe, die du kennen solltest =====

<WRAP center round info>
Erklärung wichtiger Begriffe: //Algorithmus//, //Implementierung//, //IDE//:

  * Eine Folge von Handlungsanweisungen (wie unsere erste Erklärung des Chaos-Spiels oben) nennt man einen [[https://de.wikipedia.org/wiki/Algorithmus|Algorithmus]]((Oft wird von einem Algorithmus verlangt, dass er nach endlich vielen Schritten endet.)). Jedes Kochrezept oder jede Bastelanleitung oder jede Spielanleitung ist ein Beispiel für einen Algorithmus.

  * Das oben angegebene Python-Programm ist eine [[https://de.wikipedia.org/wiki/Implementierung#Softwaretechnik|Implementierung]] des Chaos-Spiel-Algorithmus - wir sagen dem Computer also mit Hilfe der Programmiersprache Python in präziser, computerverständlicher Form, was er tun soll.

  * Computerprogramme schreibt man in Editoren. Meist verwendet man Editoren, die das Programmieren sinnvoll unterstützen. Solche Editoren heissen [[https://de.wikipedia.org/wiki/Integrierte_Entwicklungsumgebung|Entwicklungsumgebungen]] (= integrierte Entwicklungsumgebungen = integrated development environment, kurz IDE). Wir arbeiten mit der IDE "Visual Studio Code". In ihr kann man Python-Programm direkt ausführen (per ''Ctrl+F5'').
</WRAP>



===== Bonus-Aufgabe 1 (relativ einfach) =====

<WRAP center round todo>
Verändere den Programm-Code so, dass 1'000'000 Punkte gezeichnet werden und dass nach dem Zeichnen eines Punktes **keine** Pause von einer Millisekunde gemacht wird. (Ich habe diese Pause oben eingeführt, damit das Bild nicht "sofort" da ist; lösche den entsprechenden Befehl oder kommentiere ihn mit ''#'' aus.)
</WRAP>

===== Bonus-Aufgabe 2 (wenn du den Programm-Code ziemlich gut verstehst) =====

<WRAP round todo>
Passe das Python-Programm so an, dass einige der Bilder in https://en.wikipedia.org/wiki/Chaos_game#Jumps_other_than_1/2 entstehen. Wenn du zum Beispiel das "Vicsek fractal" zeichnen willst:
  * Sorge dafür, dass die Leinwand quadratisch ist (also Höhe = Breite).
  * Definiere fünf Punkte $A$, $B$, $C$, $D$, $E$.
  * Statt des Faktors 0.5 in den Programmzeilen, wo der Punkt springt, verwende den Faktor ''2/3''.

Du darfst natürlich kreativ sein und andere Punktekonstellationen und Faktoren ausprobieren.
</WRAP>
  
  

===== Link zur Kursseite =====

[[lehrkraefte:snr:informatik:glf22|Zur Kursseite]]