lehrkraefte:snr:mathematik:klasse-2:2022-23:python-koordinatengrafik [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~~

====== Koordinatengrafik mit Python ======

===== Aufgaben 1 und 2: Grafik-Bibliothek "kantigrafik" herunterladen und wesentliche Befehle kennenlernen =====

<WRAP center round todo>
Speichere die folgende Grafik-Bibliothek unter dem Namen ''kantigrafik.py'' in deinem Python-Verzeichnis ab (Anklicken mit rechter Maustaste).

Neue Version vom 15.12.2022:

{{ :lehrkraefte:snr:mathematik:klasse-2:2022-23:kantigrafik.py |}}
</WRAP>

<WRAP center round box>
Wir verwenden diese Bibliothek im Folgenden als black box, so wie wir etwa die Turtle-Bibliothek als black box verwendet haben.

Ich habe diese (im wesentlichen auf ''pygame'' basierende) Bibliothek geschrieben, da ich im Internet bisher keine "einfache, schulgeeignete" Grafik-Bibliothek gefunden habe. 
</WRAP>


<WRAP center round todo>
Versuche anhand des folgenden Programms die wesentlichen Funktionen der Bibliothek ''kantigrafik'' zu verstehen. Du musst dieses Programm **im selben Verzeichnis** abspeichern wie die Datei ''kantigrafik''.

{{ :lehrkraefte:snr:mathematik:klasse-2:2022-23:demo-kantigrafik.py |}}

<hidden Bemerkung/Lösung>
Am Ende dieser Seite befindet sich eine Dokumentation der Bibliothek ''kantigrafik''.
</hidden>

<hidden Mögliche Hilfen, falls das Programm nicht läuft:> 
  * pygame installieren! In der Kommandozeile (cmd): ''pip install pygame'' + Enter
  * Manchmal sind mehrere Versionen von Python installiert. In VS-Code kann man per "Ctrl+Shift+p", "Python: Select Interpreter" die gewünschte Version auswählen (Empfehlung: Version mit "global").
  * ??? 
  * beim Nachbarn mitprogrammieren
</hidden>
</WRAP>

===== Aufgabe 3: Rechtwinkliges Dreieck mit Umkreis zeichnen =====

<WRAP center round todo>
<code python rechtwinkliges-dreieck-mit-umkreis.py>
from kantigrafik import *
zeichenfenster(-4, -4, 8, 6, 100, "Rechtwinkliges Dreieck mit Umkreis")
a = 4
b = 3

# Hier deinen Code ergänzen!

zeige()
warte_auf_klick()
</code>

Ergänze das obige Python-Programm so, dass ein rechtwinkliges Dreieck gezeichnet wird, dessen Katheten parallel zu den Koordinatenachsen sind und Länge ''a'' und ''b'' haben. Ändert man die Werte der Variablen ''a'' und ''b'', so muss sich die Zeichnung entsprechend ändern.

Eine Skizze mag helfen.

<hidden Hinweis:>
Nimm als Eckpunkte des Dreiecks den Ursprung $(0,0)$ und den Punkt $(a,0)$ und als dritten Punkt ... (bitte selbst überlegen, etwa per Skizze). </hidden>

----

Bonusaufgabe: Zeichne zusätzlich den Umkreis dieses rechtwinkligen Dreiecks.

<hidden Hinweis>
Denke an einen griechischen Mathematiker, dessen Namen mit dem Buchstaben "T" beginnt.

Die Koordinaten des Mittelpunkts des Umkreises sind dann relativ einfach zu berechnen. 
<hidden Hinweis zum Radius des Umkreises>
Pythagoras!</hidden>
</hidden>
</WRAP>

<WRAP center round box>
Je nach Zeichnung mag Koordinatengrafik oder Turtlegrafik besser geeignet sein. 

Die obige Zeichnung (rechtwinkliges Dreieck mit Umkreis) ist meinem Geschmack nach deutlich leichter mit Koordinatengrafik als mit Turtle-Grafik zu zeichnen - wer eine kleine Herausforderung benötigt, zeichne Dreieck samt Umkreis mit der Turtle!

<hidden Hinweis>
Für das Dreieck: ''home()'' oder etwas Trigonometrie (Tangens = Gegenkathete durch Ankathete) samt Pythagoras.

Für den Umkreis: Finde den richtigen Startwinkel! (Der Radius ist hoffentlich mittlerweile klar.)
</hidden>
</WRAP>

===== Aufgabe 4: Konzentrische n-Ecke zeichnen =====

<WRAP center round todo>
Zeichne mit Koordinatengrafik die folgende Figur (fünf konzentrische Fünfecke) bzw. allgemeiner einige konzentrische $n$-Ecke.

Hinweis: Zeichne zuerst ein Fünfeck, dessen Umkreis den Radius eins hat.

(Lösung vermutlich gemeinsam. Benötigt Trigonometrie und die ''math''-Bibliothek. Achtung: Grad- vs. Bogenmass.)

{{:lehrkraefte:snr:mathematik:klasse-2:2022-23:konzentrische-fuenfecke.png?400|}}

----

<hidden Mögliche Lösung>
<code python konzentrische-n-ecke.py>
from kantigrafik import *
from math import *

n = 5

zeichenfenster(-6, -5, 6, 5, 80, "Zeichenfenster")

farbe(GRAU)
raster()
farbe(WEISS)
x_achse()
y_achse()

farbe(ROT)
alpha = 360 / n
alpha_im_bogenmass = alpha / 180 * pi
for radius in range(2, 6):
    for i in range(n):
        gefuellter_kreis(radius * cos(i * alpha_im_bogenmass), radius * sin(i * alpha_im_bogenmass), 0.1)
        linie(radius * cos(i * alpha_im_bogenmass), radius * sin(i * alpha_im_bogenmass),
            radius * cos((i+1) * alpha_im_bogenmass), radius * sin((i+1) * alpha_im_bogenmass))
zeige()
speichere("bildchen.jpeg")
warte_auf_klick()
</code>
</hidden>
</WRAP>

<WRAP center round box>
Bekanntlich kann man leicht ein einzelnes $n$-Eck mit Turtle-Grafik zeichnen (aber schon die Berechnung des Umkreisradius ist nicht ganz offensichtlich. 
Wer noch nicht von den Vorteilen von Koordinatengrafik überzeugt ist, zeichne einmal einige konzentrische $n$-Ecke mit Turtlegrafik.
</WRAP>

===== Aufgabe 5: Funktionsgraphen zeichnen (etwa Sinus, Cosinus, Tangens) =====

(mit 2rG gemacht, mit 2aLIM noch nicht)

<WRAP center round todo>
Zeichne die Graphen von Sinus, Cosinus und Tangens in unterschiedlichen Farben mit Koordinatengrafik. 
Du darfst natürlich auch den Graphen einer beliebigen anderen Funktion deiner Wahl zeichnen.

<hidden Hier ist ein mögliches Programm-Gerüst>
<code python graphen-zeichnen.py>
from kantigrafik import *
# Lädt unter anderem die trigonometrischen Funktionen
# sin(...), cos(...), tan(...), aber auch die Kreiszahl pi. 
from math import *

# minimale x-Koordinate
MINX = -10      
# maximale x-Koordinate
MAXX = 10

# minimale y-Koordinate
MINY = -6
# maximale y-Koordinate
MAXY = 6

# Länge einer Einheit im Koordinatensystem in Pixeln
PIXEL_PRO_EINHEIT = 80

zeichenfenster(MINX, MINY, MAXX, MAXY, PIXEL_PRO_EINHEIT, "Graphen der trigonometrischen Funktionen Cosinus (grün), Sinus (rot), Tangens (gelb)")

# ... und hier darfst du deinen Code ergänzen.

zeige()
speichere("graphen.jpeg")  
warte_auf_klick()
</code>
</hidden>

----

{{:lehrkraefte:snr:mathematik:klasse-2:2022-23:sin-cos-tan.jpeg?600|}}

Optional: Gib neben der üblichen Bogenmass-Skala wie im Bild auch die Grad-Skala an.
</WRAP>





===== Die Befehle der Bibliothek ''kantigrafik'' =====

<WRAP center round info>
Die wichtigsten Befehle der Bibliothek ''kantigrafik'' an Beispielen erläutert:
  * ''zeichenfenster(-3, -2, 8, 5, 100)'': Öffnet ein Zeichenfenster mit einem (unsichtbaren Koordinatensystem), dessen $x$-Koordinaten von -3 bis 8 gehen und dessen $y$-Koordinaten von -2 bis 5 gehen. Der Punkt $(-3,-2)$ ist also der Punkt ganz links unten und der Punkt $(8,5)$ ist der Punkt ganz rechts oben. Die Zahl 100 legt fest, dass eine Einheit des Koordinatensystems auf dem Bildschirm 100 Pixel lang sein soll.
  * ''linie(3, 7, 1, -2)'': Zeichnet eine Linie vom Punkt $(3,7)$ zum Punkt $(1, -2)$.
  * ''breite_linie(3, 7, 1, -2, 0.2)'': Zeichnet eine Linie der Breite 0.2 vom Punkt $(3,7)$ zum Punkt $(1, -2)$.
  * ''kreis(5, 2, 7)'': Zeichnet einen Kreis mit Mittelpunkt $(5,2)$ und Radius $7$.
  * ''gefuellter_kreis(5, 2, 0.1)'': Zeichnet einen ausgefüllten Kreis mit Mittelpunkt $(5,2)$ und Radius $0.1$, also einen dicken Punkt.
  * ''punkt(3, -2)'': Zeichnet einen Punkt an der Stelle $(3, -2)$.
  * ''raster()'': Zeichnet das "Koordinatenraster" ein.
  * ''x_achse()'': Zeichnet die $x$-Achse ein.
  * ''y_achse()'': Zeichnet die $y$-Achse ein.
  * ''schreibe(3, -2, "Kantigrafik-Demo", 0.5)'': Schreibt den angegebenen Text in der Grösse 0.5 (in Einheiten) mit "linker unterer Ecke" am Punkt (3, -2).
  * ''farbe(ROT)'': Setzt die Farbe auf rot. Andere vordefinierte Farben sind ''GRUEN'', ''BLAU'', ''GELB'', ''MAGENTA'', ''CYAN'', ''WEISS'', ''SCHWARZ'', ''GRAU''. Weitere Farben bekommt man mit Funktionsaufrufen wie ''farbe(224, 114, 213)'' unter Verwendung des RGB-Farbmodells (RGB steht für Red-Green-Blue; verwende etwa den RGB Color Calculator auf https://www.w3schools.com/colors/colors_rgb.asp).
  * ''zeige()'': Mit diesem Befehl wird alles bisher Gezeichnete sichtbar. (Die vorigen Zeichenbefehle zeichnen in Wirklichkeit "im Hintergrund". Erst mit dem Funktionsaufruf ''zeige()'' wird alles angezeigt.) 
<WRAP center round important>
Zum Anzeigen des bereits Gezeichneten muss man den Befehl ''zeige()'' verwenden.
</WRAP>
  * ''pause(1.5)'': Pausiert 1.5 Sekunden.
  * ''speichere("zeichnung.jpeg")'': Speichert den Inhalt des Zeichenfensters in der Datei "zeichnung.jpeg".
  * ''warte_auf_klick()'': Lässt das Zeichenfenster so lange offen, bis der Benutzer hineinklickt oder Escape drückt oder es schliesst oder die Taste "q" drückt. Dieser Befehl steht üblicherweise ganz am Ende des Programms (und nirgendwo sonst).
</WRAP>


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

Link zur 
  * [[lehrkraefte:snr:mathematik:klasse-2:2022-23|Zur Mathe-Kursseite]]
  * [[lehrkraefte:snr:informatik:glf22|Zur Informatik-Kursseite]]