lehrkraefte:blc:informatik:glf22:python:graphics

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
lehrkraefte:blc:informatik:glf22:python:graphics [2022/11/23 09:35] – ↷ Page moved from python:graphics to lehrkraefte:blc:informatik:glf22:python:graphics Ivo Blöchligerlehrkraefte:blc:informatik:glf22:python:graphics [2022/11/25 07:09] (current) – [Sinus/Cosinus] Ivo Blöchliger
Line 1: Line 1:
 +====== Simple Grafik mit graphics.py ======
 +Installieren Sie zuerst das nötige Paket, siehe [[#Setup|unten]].
 +
 +===== Dokumentation =====
 +Dokumentation als [[https://mcsp.wartburg.edu/zelle/python/graphics/graphics/index.html|Webseite]] oder als [[https://mcsp.wartburg.edu/zelle/python/graphics/graphics.pdf|pdf]].
 +
 +
 +====== Aufgaben ======
 +===== Wiederholungen =====
 +Testen und Verstehen Sie folgenden Code:
 +<code python>
 +from graphics import *
 +
 +win = GraphWin("Hello", 600, 600)
 +
 +for i in range(100,600,100):
 +    r = Rectangle(Point(i,200), Point(i+50,250))
 +    r.setFill("red")
 +    r.draw(win)
 +
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +
 +<WRAP todo>
 +Verändern Sie das Programm so, dass folgendes Bild entsteht: {{:python:pasted:20221117-092728.png}}
 +<hidden Lösungsvorschlag>
 +<code python>
 +from graphics import *
 +
 +win = GraphWin("Hello", 600, 600)
 +
 +for i in range(100,600,100):
 +    r = Rectangle(Point(200,i), Point(250,i+50))
 +    r.setFill("green")
 +    r.draw(win)
 +
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +</hidden>
 +</WRAP>
 +
 +<WRAP todo>
 +Erweitern Sie das Programm so, dass folgendes Bild entsteht: {{:python:pasted:20221117-093016.png}}
 +<hidden Lösungsvorschlag>
 +<code python>
 +from graphics import *
 +
 +win = GraphWin("Hello", 600, 600)
 +
 +for i in range(100,600,100):
 +    for j in range(100,600,100):
 +        r = Rectangle(Point(j,i), Point(j+50,i+50))
 +        r.setFill("blue")
 +        r.draw(win)
 +
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +</hidden>
 +</WRAP>
 +
 +<hidden Zusatzaufgabe>
 +Erzeugen Sie folgendes Bild: {{:python:pasted:20221117-093920.png}}
 +
 +Hinweis: Testen Sie, ob die Summe der Koordinaten durch eine bestimme Zahl (hier im Beispiel 42) teilbar ist:
 +<code python>
 +if (i+j)%42==0:
 +  # Tu was
 +else:
 +  # Tu was anderes
 +
 +</code>
 +</hidden>
 +
 +===== Cosinus/Sinus =====
 +
 +Testen und Verstehen Sie folgendes Programm:
 +
 +<code python>
 +from graphics import *
 +from math import cos,sin,pi
 +
 +win = GraphWin("Hello", 600, 600)
 +win.setCoords(-2,-2,2,2)  # Koordinatensystem setzen
 +
 +
 +for i in range(5):
 +    grad = 360/5*i
 +    bogenmass = grad/180*pi
 +    x = cos(bogenmass)
 +    y = sin(bogenmass)
 +    c = Circle(Point(x,y),0.05)
 +    c.setFill("red")
 +    c.draw(win)
 +
 +
 +Circle(Point(0,0),1).draw(win)   # Einheitskreis
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +
 +<WRAP todo>
 +Ändern Sie das Programm so ab, dass 10 Punkte auf dem Einheitskreis eingezeichnet werden.
 +</WRAP>
 +
 +==== Funktion für $P_\alpha$ ====
 +Damit wir Punkte auf dem Einheitskreis mit Linien verbinden können, ist es praktisch Punkte auf dem Einheitskreis einfach berechnen zu können. Dazu definieren wir eine Funktion ''palpha'', die einen **Winkel in Grad** als Argument entgegennimmt und den Punkt $P_\alpha$ als ''Point''-Objekt zurückgibt:
 +
 +<code python>
 +def palpha(grad):
 +    bogenmass = grad/180*pi
 +    x = cos(bogenmass)
 +    y = sin(bogenmass)
 +    return Point(x,y)  # Resultat zurückgeben
 +</code>
 +
 +<WRAP todo>
 +Bauen Sie die Funktion ''palpha'' im Code ein und verwenden Sie diese direkt im ''Circle''-Befehl (ersetzen Sie damit ''Point(x,y)''). Testen Sie Ihr Programm.
 +<hidden Lösungsvorschlag>
 +<code python>
 +from graphics import *
 +from math import cos,sin,pi
 +
 +win = GraphWin("Hello", 600, 600)
 +win.setCoords(-2,-2,2,2)  # Koordinatensystem setzen
 +
 +def palpha(grad):
 +    bogenmass = grad/180*pi
 +    x = cos(bogenmass)
 +    y = sin(bogenmass)
 +    return Point(x,y)  # Resultat zurückgeben
 +
 +
 +for i in range(5):
 +    c = Circle(palpha(360/5*i),0.05)
 +    c.setFill("red")
 +    c.draw(win)
 +
 +
 +Circle(Point(0,0),1).draw(win)   # Einheitskreis
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +</hidden>
 +</WRAP>
 +
 +==== Linien ====
 +Testen und verstehen Sie folgendes Programm:
 +<code python>
 +from graphics import *
 +from math import cos,sin,pi
 +
 +win = GraphWin("Hello", 600, 600)
 +win.setCoords(-2,-2,2,2)  # Koordinatensystem setzen
 +
 +def palpha(grad):
 +    bogenmass = grad/180*pi
 +    x = cos(bogenmass)
 +    y = sin(bogenmass)
 +    return Point(x,y)  # Resultat zurückgeben
 +
 +Line(palpha(0), palpha(120)).draw(win)
 +Line(palpha(120), palpha(240)).draw(win)
 +Line(palpha(240), palpha(360)).draw(win)
 +
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +
 +<WRAP todo>
 +Ändern Sie das Programm so, dass der Befehl ''Line'' nur noch einmal vorkommt. Verwenden Sie dazu eine Wiederholung.
 +<hidden Lösungsvorschlag>
 +Hier sind nur die geänderten Zeilen, der Rest vom Programm bleibt sich gleich.
 +<code python>
 +for i in range(0,360,120):
 +    Line(palpha(i), palpha(i+120)).draw(win)
 +</code>
 +</hidden>
 +</WRAP>
 +
 +<WRAP todo>
 +Zeichnen Sie ein Fünfeck.
 +</WRAP>
 +
 +<WRAP todo>
 +Definieren Sie am Anfang des Programms eine Variable ''n'', die angibt, wie viele Ecken die Form haben soll.
 +Testen Sie Ihr Programm, indem Sie für ''n'' die Werte 3,4 und 7 testen.
 +<hidden Lösungsvorschlag>
 +Nur die relevanten Zeilen sind hier aufgeführt:
 +<code python>
 +n = 7
 +schritt = 360/n
 +for i in range(n):
 +    Line(palpha(i*schritt), palpha((i+1)*schritt)).draw(win)
 +
 +</code>
 +</hidden>
 +</WRAP>
 +
 +<WRAP todo>
 +Zeichnen Sie einen 5-Zack Stern: {{:python:pasted:20221117-100128.png}}.
 +</WRAP>
 +
 +<WRAP todo>
 +Verallgemeinern Sie Ihr Programm so, dass zwei Variablen ''n'' (Anzahl Zacken) und ''m'' (Wie viele Punkte eine Linie überspringt) definiert werden können. Hier das Beispiel für $n=11$ und $m=4$: {{:python:pasted:20221117-100359.png}}
 +<hidden Lösungsvorschlag>
 +<code python>
 +from graphics import *
 +from math import cos,sin,pi
 +
 +win = GraphWin("Hello", 600, 600)
 +win.setCoords(-2,-2,2,2)  # Koordinatensystem setzen
 +
 +def palpha(grad):
 +    bogenmass = grad/180*pi
 +    x = cos(bogenmass)
 +    y = sin(bogenmass)
 +    return Point(x,y)  # Resultat zurückgeben
 +
 +n = 11
 +m = 4
 +schritt = 360/n
 +for i in range(n):
 +    Line(palpha(i*schritt), palpha((i+m)*schritt)).draw(win)
 +
 +
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>
 +</hidden>
 +</WRAP>
 +
 +===== Weitere Aufgaben =====
 +Programmieren Sie ein Programm, das folgende Bilder erzeugt:
 +{{:python:pasted:20221117-102114.png}}
 +{{:python:pasted:20221117-102152.png}}
 +
 +<hidden Lösungsvorschlag>
 +<code python>
 +from graphics import *
 +from math import cos,sin,pi
 +
 +win = GraphWin("Hello", 600, 600)
 +
 +
 +def huellkurve():
 +    win.setCoords(-0.1,-0.1,1.1,1.1)  # Koordinatensystem setzen
 +    n=50
 +    for i in range(n+1):
 +        x = i/n
 +        Line(Point(x,0), Point(0,1-x)).draw(win)
 +
 +def spirale():
 +    win.setCoords(-1.1,-1.1,1.1,1.1)  # Koordinatensystem setzen
 +    umdrehungen = 5
 +    schritte = 400;
 +    for i in range(schritte):
 +        winkel = i/schritte*umdrehungen*2*pi
 +        winkel2 = (i+1)/schritte*umdrehungen*2*pi
 +        radius = i/schritte;
 +        Line(Point(radius*cos(winkel), radius*sin(winkel)), Point(radius*cos(winkel2), radius*sin(winkel2))).draw(win)
 +
 +
 +
 +def clickAndWait(titel="Hello"):
 +    global win    # Damit kann die Variable win auch verändert werden
 +    win.getMouse() # Pause to view result
 +    win.close()
 +    win = GraphWin(titel, 600, 600)
 +
 +
 +huellkurve()
 +clickAndWait("Spirale")
 +spirale()
 +
 +win.getMouse() # Pause to view result
 +
 +win.close()    # Close window when done
 +</code>
 +</hidden>
 +====== Setup ======
 +Es gibt einen Screencast: [[https://fginfo.ksbg.ch/~ivo/videos/informatik/22-23/06-setup-graphics-library-und-erstes-programm.mp4|direkter link]], oder [[https://bldsg-my.sharepoint.com/:v:/r/personal/ivo_bloechliger_ksbg_ch/Documents/06-setup-graphics-library-und-erstes-programm.mp4?csf=1&web=1&e=C6GjrS|Stream auf BLDSG Sharepoint]]
 +
 +===== Windows =====
 +
 +Auf der Kommandozeile (git-bash) egal in welchem Ordner:
 +<code bash>
 +pip install graphics.py
 +</code>
 +===== Linux/Mac =====
 +<code bash>
 +sudo pip3 install tk graphics.py
 +</code>
 +
 +===== Alle Systeme =====
 +
 +
 +Gehen Sie in einen geeigneten Ordner (wo Ihre eigenen Dateien fürs Programmieren liegen) und öffnen Sie dort den Ordner mit VisualCode:
 +<code bash>
 +code .
 +</code>
 +wobei der Punkt für das aktuelle Verzeichnis steht. Alternativ kann natürlich Code auch über das Startmenu gestartet werden und via File->Open Folder der Ordner geöffnet werden.
 +
 +Wird ein ganzer Ordner geöffnet, können mehrere Dateien bearbeitet werden und die Programme komfortabel gestartet werden. 
 +
 +Beispiel-Programm zum Testen:
 +<code python>
 +from graphics import *
 +
 +win = GraphWin("Hello", 600, 600)
 +text = Text(Point(100,300), "It works")
 +text.setSize(36)
 +text.draw(win)
 +win.getMouse() # Pause to view result
 +win.close()    # Close window when done
 +</code>