====== Grafik ======

<WRAP round todo>
Schreibe ein Programm, das ein (beschriftetes) Koordinatensystem zeichnet und darin den Graph einer Funktion, etwa der Sinusfunktion oder der Fumktion $\sin(\frac 1{x})$ für positive $x$.

Dazu musst du zuerst etwas Grafik-Programmierung in Python lernen. Verwende mindestens eine der beiden folgenden Möglichkeiten ("Lernen an Beispielen" oder "Systematischeres Lernen"): 
</WRAP>


===== Lernen an Beispielen =====

Schau dir drei Beispiel von Programmen an, die Grafik verwenden - variiere sie, spiele mit ihnen herum, schreibe selbst ein kleines Grafikprogramm:
  * Aus der ersten Doppellektion [[lehrkraefte:snr:informatik:glf21:python:chaos-game|Chaos-Spiel − der springende Punkt]]
  * Das Programm unten auf dieser Seite: Steuerung eines Quadrats mit den Cursortasten samt Vergrössern mit "p" und Verkleinern mit "m".
  * Das Programm "Simulation einer Versickerung" unten auf der Seite [[lehrkraefte:snr:informatik:python:wichtiges-zur-projektarbeit|Wichtiges zur Projektarbeit]].


===== Systematischeres Lernen =====

Lerne aus [[https://www.tigerjython.ch/index.php?inhalt_links=navigation.inc.php&inhalt_mitte=grafik/grafik.inc.php]].

  * Wie öffnet man ein Grafikfenster?
  * Wie zeichnet man Punkte, Kreise, Ellipsen, Rechtecke?
  * Wie liegt das Koordinatensystem?
  * etc.


===== Beispiel-Programme =====


<WRAP round todo>
Lerne aus dem folgenden Code etwas Grafik und die Verarbeitung von Tastatureingabe (Cursor-Tasten, p und m zum Vergrössern bzw. Verkleinern) - etwa sinnvoll bei einem kleinen Spiel. Der folgende Code ist eine Variation des entsprechenden Programms auf
[[https://www.tigerjython.ch/index.php?inhalt_links=navigation.inc.php&inhalt_mitte=grafik/keyevents.inc.php]].

Bisher kann das Quadrat mit den Cursor-Tasten aus dem Fenster herausbewegt werden. Verändere das Programm so, dass dies nicht mehr möglich ist! Bestenfalls schreibst du das Programm so um, dass kein Teil des Quadrats das Fenster verlassen kann - auch nicht beim Vergrössern, das Quadrat aber genau an den Rand des Fensters anstossen darf.

<code python>
from gpanel import *

Taste_links = 37
Taste_rechts = 39
Taste_hoch = 38
Taste_runter = 40
Taste_p = 80
Taste_m = 77
Taste_esc = 27

def zeichne_quadrat():
    setColor("red")
    fillRectangle(x - laenge, y - laenge, x + laenge, y + laenge)
    setColor("black")
    rectangle(x - laenge, y - laenge, x + laenge, y + laenge)

makeGPanel(Size(1200, 400))
window(0, 60, 0, 20)
# Die beiden obigen Befehle machen das folgende:
# makeGPanel(Size(1200, 400)) erzeugt ein Fenster, dass 1200 Pixel (= Bildpunkte) breit und 400 Pixel hoch ist.
# window(0, 60, 0, 20) legt das Koordinatensystem in diesem Fenster fest: Die x-Koordinate geht von 0 bis 60, die y-Koordinate von 0 bis 20
#
# Es gibt auch den Befehl
# makeGPanel(0, 200, 0, 400)
# Ich finde ihn aber etwas seltsam: Er erzeugt stets ein quadratisches Fenster derselben Grösse und in meinem Beispiel geht darin die 
# x-Koordinate von 0 bis 200 und die
# y-Koordinate von 0 bis 400.

text("Bewege das Rechteck mit den Cursor-Tasten, vergrössere bzw. verkleinere es mit 'p' und 'm'.")
x = 30
y = 10
schrittweite = 0.2
laenge = 1

zeichne_quadrat()
aktiv = True
while aktiv:
    taste = getKeyCodeWait()
    if taste == Taste_links:
        x = x - schrittweite
        zeichne_quadrat()
    elif taste == Taste_rechts:
        x = x + schrittweite
        zeichne_quadrat()
    elif taste == Taste_hoch:
        y = y + schrittweite
        zeichne_quadrat()
    elif taste == Taste_runter:
        y = y - schrittweite
        zeichne_quadrat()
    elif taste == Taste_p:
        if laenge < 3:
            laenge = laenge + 0.2
        zeichne_quadrat()
    elif taste == Taste_m:
        if laenge > 0.4:
            laenge = laenge - 0.2
        zeichne_quadrat()
    elif taste == Taste_esc:
        aktiv = False
dispose()
</code>
</WRAP>

<WRAP round todo>
Und noch ein Programm zum Lernen:
<code python>
from gpanel import *
import time

mx = 0
my = 0

KEY_ESC = 27
KEY_SPACE = 32

def onMousePressed(x, y):
    move(x, y)
    if isRightMouseButton():
        print("rechts")
        setColor("green")
        fillCircle(3)
    if isLeftMouseButton():
        setColor("blue")
        fillCircle(3)

def onMouseMoved(x, y):
    global mx, my
    setColor("red")
    fillCircle(x, y, 2)
    setColor("black")
    circle(x,y,2)

    setColor("black")
    point(x, y + 10)

    circle(y,x,1)
    setColor("green")
    circle(-x,y,1)
    setColor("cyan")
    circle(-y,-x,1)
    mx = x
    my = y

def onMouseDragged(x, y):
    setColor("orange")
    move(x, y)
    fillEllipse(0.5, 3)


makeGPanel(Size(1200, 800), mousePressed = onMousePressed, 
    mouseMoved = onMouseMoved,
    mouseDragged = onMouseDragged)
window(-60, 60, -40, 40)

title("Key 'Esc': escape; Key 'Space': clear; any other key: mouse position")

key = 0


line(-60, 0, 60, 0)
line(0, -40, 0, 40)

while key != KEY_ESC: 
    startTime = time.clock()

    if kbhit():
        key = getKeyCode()
        if key == KEY_SPACE:
            clear()
        else:
            print(key)
            text(mx, my, "Hier bin ich, deine Maus!")
            print(mx, my)
    while (time.clock() - startTime)  < 0.020:
        delay(1)
dispose()
</code>
</WRAP>


to be written
  * normal graphics
  * turtle graphics
  * (beides?) mit Rekusion kombiniert (Sierpinski, L-Systeme, Cantor-Menge nun graphisch)
  * 
===== Link zur Kursseite =====

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