Grafik und Animation. Jarka Arnold Aegidius Plüss. Grafik und Animation. Programm

Transkript

1 Grafik und Animation Jarka Arnold Aegidius Plüss Grafik und Animation Programm Programmierkonzepte mit Turtle- und Koordinatengrafik Ereignissteuerung Übungen dazu Pause Computeranimationen Übungen dazu Beispiele: ExamplesGrafik.zip

2 Turtle- und Koordinatengrafik Turtlegrafik: Richtungsgrafik, Turtle kennt die Bewegungsrichtung und bewegt sich vorwärts oder rückwärts um eine Anzahl Schritte und zeichnet eine Spur Koordinatengrafik: Grafikfenster mit benutzerdefinierbaren Float-Koordinaten Absolute Koordinaten: line(x1, y1, x2, y2) Relative Koordinaten: mit Grafikcursor: move(x1, y1), draw(x2, y2) Bezeichner Python Style Guide: Bezeichner mit Kleinschreibung und Underlines begin_fill() oder zusammengeschrieben pendown() Wir verwenden in unseren Bibliotheken die weit verbreitete Konvention der Klein-/ Grossschreibung (lower camel case): startpath(), pendown() Eigene Bezeichner nach eigenem Gutdünken. Turtlegrafik mit TigerJython Eine der besten Implementierungen: Erste Programme gleich einfach wie LOGO Globale Turtle from gturtle import * maketurtle() repeat 5: forward(160) left(144) Turtle-Objekt from gturtle import * t = Turtle() repeat 5: t.forward(160) t.left(144) Mehrere Turtle-Objekte im gleichen Fenster from gturtle import * t1 = Turtle() t2 = Turtle(t1) t2.setcolor("red") t1.forward(100) t2.back(100)

3 Turtlegrafik: Farbfunktionen Fortlaufendes Füllen der Figuren mit der Stiftfarbe Grafik1a.py filltopoint(0, 0) repeat 5: forward(100) right(72) Floodfill : füllt geschlossene Fläche mit Füllfarbe Grafik1b.py fill() fill(x, y) Gefüllte Pfade Grafik1c.py startpath() repeat 5: forward(160) left(144) fillpath() setcolor("red") Turtlefarbe setpencolor("red") Stiftfarbe setfillcolor("red") Füllfarbe Unterstützt X11Color Turtlegrafik mit TigerJython Turtlebewegungen sind animiert (Grafik1d.py) Eigene Turtlebilder Turtlefenster: default 800x600 Pixel forward(100) 100 Pixel vorwärts setpos(-200, 100) Koordinaten in Pixel Turtle kann Töne abspielen mit playtone() von Tobias Kohn (Grafik1e.py) Unterstützt Tastatur- und Mausevents Unterstützt animierte Bilder Programmierkonzepte mit Turtlegrafik (siehe

4 Koordinatengrafik Globales Grafikfenster Benutzerdefinierbares Koordinatensystem, mit Floats (0, 1) (1, 1) y ymax xmin (0, 0) x xmax (0, 0) (1, 0) ymin makegpanel() makegpanel(xmin, xmax, ymin, ymax) Programmcodes sind extrem einfach. Beispiel Moiré (Grafik2.py) Jedes Element wird sofort dargestellt. Koordinatengrafik im Vergleich zur Turtlegrafik (Grafik3.py, Grafik4.py) Die nebenstehende Figur kann sowohl mit Turtlegrafik als auch mit Koordinatengrafik erstellt werden size = 40-30

5 Turtlegrafik & Koordinatengrafik (Grafik3.py Grafik4.py) Turtlegrafik from gturtle import * def square(size): setpos(-size/2, -size/2) repeat 4: forward(size) right(90) maketurtle() hideturtle() size = 400 green = 255 repeat 20: setpencolor(makecolor(0, green, 0)) setfillcolor(makecolor(0, green, 0)) square(size) fill(0, 0) green -= 10 size -= 20 Koordinatengrafik from gpanel import * makegpanel(-30, 30, -30, 30) size = 40 green = 255 repeat 20: setcolor(makecolor(0,green,0)) fillrectangle(size,size) green -= 10 size -= 2 Spirolaterale a = 90, q = 7, s = 20, n = 4 a = 36, q = 12, s = 15, n = 5 a = 45, q = 7, s = 20, n = 20 Basisfigur forward(s) left(a) forward(2 * s) left(a) forward(3 * s) Definiert durch: Drehwinkel (a) Anzahl Segmente(q) Länge des ersten Segments (s) Anzahl Wiederholungen (n) Spirolaterale mit figure (90, 8, 20) oder figure(36, 10, 15) sind nicht geschlossen Wie muss a, q und n gewählt werden, damit das Spirolateral geschlossen ist? Spiro1. py, SpiroRegler.py

6 Koordinatengrafik für grafische Darstellungen im Mathematik- und Physikunterricht. Beispiel: Soundrecorder (Sound1.py, Sound2.py) Ereignissteuerung Wichtiges Programmierkonzept (Tastatur, Maus, Touch-Events) Typisch für GUI-Programmierung Programmiertechnik: Man definiert eine Funktion (Callbackfunktion), die vom Programm nie aufgerufen wird, sondern beim Eintreffen des Events automatisch vom System Damit das System sie aufrufen kann, teilt man ihm mit, wie sie heisst ("Registrieren des Callbacks") Events sind in Python extrem einfach, da Funktionen Erstklass- Objekte sind.

7 Mausevents mit GPanel Beispiel 1: Kreise zeichnen durch Drücken der Maustaste (mousepressed, Mausevent1.py) Beispiel 2: Röhre zeichnen durch Bewegen der Maus (mousemoved, Mausevent2.py) Beispiel 3: Röhre zeichnen durch Bewegen der Maus mit gedrückter Taste (mousedragged, Mausevent3.py) Beispiel 4: Dicker werdende Röhre zeichnen durch Bewegen der Maus mit gedrückter Taste (mousedragged, Mausevent4.py) Beispiel 5: Dicker werdende Röhre zeichnen durch Bewegen der Maus mit gedrückter Taste. Neu Anfang bei jedem Mausdrücken (mousepressed + mousedragged, Mausevent5.py) Beispiel 6: Zeichnen eines Polygons durch Verwendung der linken und rechten Maustaste (Mausevent6.py) Linksklick: Eckpunkte festlegen Rechtsklick: gefülltes Polygon zeichnen. def onmousepressed(x, y): if isleftmousebutton(): pt = [x, y] move(pt) fillcircle(0.3) corners.append(pt) if isrightmousebutton(): fillpolygon(corners) wenn linke Maustaste gedrückt wurde fügt den linksgeklickten Punt zur Liste wenn rechte Maustaste gedrückt wurde zeichnet gefülltes Polygon makegpanel(0, 100, 0, 100, mousepressed = onmousepressed) corners = [] Liste corners ist zu Beginn leer

8 Anhang 1: Koordinatensystem GPanel wie Option umgekehrte Reihenfolge: y-achse nach unten - Float-Koordinaten, aber mit Integers pixelgenau falls window() richtig gewählt eine leere Pixelreihe bis zu jedem Rand des Fensters (wegen Rückwärtskompatiblität) Anhang 2: Koordinatensystem GPanel, programmgesteuerte Grösse - Float-Koordinaten, aber mit Integers pixelgenau falls window() richtig gewählt eine leere Pixelreihe bis zu jedem Rand des Fensters (wegen Rückwärtskompatiblität)