computeranimation

15. COMPUTERANIMATION

 

 

DU LERNST HIER...

 

wie du animierte Computergrafiken erstellst. Eine Animation besteht aus Einzelbildern, die sich nur wenig ändern und Schritt um Schritt zeitlich nacheinander dargestellt werden. Da das menschliche Auge nur rund 25 Bilder pro Sekunde erfassen kann, ergibt sich wie beim Film eine fliessende, ruckelfreie Bewegung, wenn die Bildfolge genügend schnell gezeigt wird. Die Bilder kannst du mit der Turtle zeichnen oder als Bilddateien laden.

 

 

MUSTERBEISPIEL

 

In deinem Beispiel programmierst du einen rotierenden Propeller. Da die animierte Figur mehrmals verwendet wird, ist es vorteilhaft, das Programm modular aufzubauen, d.h. die Figuren mit Hilfe von Funktionen darzustellen. Das macht dein Programm übersichtlicher. Mit Hilfe der Funktionen bogen(), blatt() und propeller() zeichnest du einen 3-blättrigen Propeller.

Den Animationsablauf kannst du so beschreiben:

Wiederhole:
     Figur zeichnen
     Kurze Zeit warten
     Figur löschen
     Die Turtle-Richtung ein wenig ändern

Einfache Figuren können gelöscht werden, indem man sie mit der Hintergrundfarbe übermalt. In der Regel ist es aber einfacher mit clear() das ganz Fenster zu löschen.

  


from gturtle import *

def bogen():
    repeat 45:
        forward(3)
        right(2)
        
def blatt():
    startPath()
    bogen()
    right(90)
    bogen()
    left(150)
    fillPath()
    
def propeller():
    repeat 3:
        blatt()
        right(120)    
        
makeTurtle()
hideTurtle()
#enableRepaint(False)

repeat:
    propeller()
    #repaint()
    delay(40)
    right(4)
    clear("gray")
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

Für eine ruckfreie Computeranimation kann man das Programm optimieren, indem das Zeichnen in einem Bildspeicher (Bildbuffer) erfolgt und das Bild erst nachher als Ganzes auf dem Bildschirm dargestellt ("gerendert") wird. Diese Art des Zeichnens nennt man auch Doppelbufferung.
Mit enableRepaint() stellst du das Grafiksystem auf Doppelbufferung um. Von dann an werden die Zeichnungsoperation nur noch im Bildbuffer ausgeführt und  sind erst dann auf dem Bildschirm ersichtlich, wenn du repaint() aufrufst. Aktiviere die beiden auskommentierten Zeile, um es zu testen. Insbesondere bei Komplexeren Figuren ist der Unterschied gut sichtbar.

 

 

MERKE DIR...
  Bei einer Animation wird in einer Wiederholschleife eine Figur jeweils eine kurze Zeit angezeigt, dann gelöscht und an einer leicht veränderten Position erneut angezeicht. Um eine ruckfreie Animation zu erhalten, verwendet man Doppelbufferig.

 

 

ZUM SELBST LÖSEN

 
1.

Zeichne einen einfachen Vehikel und lasse ihn in deinem Animationsprogramm von links nach rechts über das Turtlefenster "fahren" , in dem du nach jeder gezeichnen Figur die Turtle um eine kleine Distanz nach rechts verschiebst.

Verbessern kannst du dein Programm noch wie folgt: wenn der Car am rechten Rand ankommt (getX() > 300), wird er wieder an die Ausgangsposition am linken Rand des Fensters versetzt.

  

2.

Eine Billardkugel bewegt sich im Turtlefensters so, dass sie an den Rändern jeweils unter der Berücksichtigung der Regel Einfallswinkel = Ausfallswinkel reflektiert wird.

Anleitung: Mit heading() kannst du die aktuelle Turtlerichtung zurückzuholen und sie mit setHeading(winkel) neu setzen.

 

  

3a.

Zeichne einen rotierenden Propeller, der aus vier rhombusförmigen Blättern besteht. Definieren zuerst eine Funktion blatt(), die einen grün gefüllten Rhombus zeichnet. Danach definierst du eine Funktion propeller(), die aus 4 Blättern besteht. In der Animationsschleife lässt du den Propeler um die eigene Achse rotieren.

 

  


 
3b.

Mit wenig Aufwand kannst du drei solche Propeler in verscheidenen Farben und grössen zeichnen.

  • Ergänze die Funktionen mit zwei Parametern: blatt(color, size) und propeler(color, size).
  • Passe dein Programm entsprechend an (forward(size), setPenColor(color) usw.
  • In der Animationsschleife rufst du die Funktion propeler() dreimal an verschiedenen Positionen, mit den Farben "green", "red", "blue" und Grössen 70, 50 un 30 auf.

 

 

ANIMATION MIT SPRITES
 
Mit der Turtlegrafik kannst du auch Bilder aus Bilddateien (Sprites) animiert darstellen. Die Funktion drawImage(datei) zeichnet das Bild aus der Bilddatei an der aktuellen Lage und mit der aktuellen Blickrichtung der Turtle. Bewegst du nun in der Animationsschleife  die Turtle und änderst zudem das Bild, so hast du schon mit wenigen Zeilen Programmcode eine lustige Animation erschaffen. 





from gturtle import *

makeTurtle()
hideTurtle()
setPos(200, 0)
left(90)
wrap()
enableRepaint(False)

i = 0
while True:
    clear()
    drawImage("sprites/pony_" + str(i) + ".gif")
    repaint()
    delay(60)
    forward(5)
    i += 1
    if i == 7:
        i = 0
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

 

 

MERKE DIR...
 

Die Dateinamen der sieben Spritebilder heissen "sprites/pony_0.gif", "sprites/pony_1.gif", usw. Du kannst sie elegant mit einer String-Konkatenation "sprites/pony_" + str(i) + ".gif" erzeugen, wo i von 0 bis 6 läuft. Mit wrap() sorgst du dafür, dass das Pony wieder am rechten Fensterrand erscheint.

Die Lage des Bildes, das du mit drawImage("bilddatei") zeichnest,  ist mit der Turtle verknüpft: es erscheint an der aktuellen Position der Turtle und seine Drehrichtung entspricht der Blickrichtung der Turtle. Manchmal musst du es noch spiegeln. Dazu verwendest du zwei in drawImage() zwei zusätzliche Parameter:

drawImage("bilddatei", True, False) horizontale Spiegelung
drawImage("bilddatei", False, True) vertikale Spiegelung
drawImage("bilddatei", True, True) horizontale und vertikale Spiegelung

 

 

ZUM SELBST LÖSEN
 
4.

Ergänze die Ponyanimation mit einem Hintergrundbild. Dieses kannst du mit
drawBkImage() hinzufügen, z.B. das Bild "sprites/catbg.png" aus der Bildbibliothek.

Du kannst auch ein eigenes Hintergrundbild, z.B. blumen.png, verwenden, wenn du es in das gleiche Verzeichnis kopierst, in dem sich dein Python-Programm befindet, und dann mit drawBkImage("blumen.png") hinein holst. Verwendest du eigene Spritebilder, so musst du darauf achten, dass sie einen transparenten Hintergrund haben.

 
5.

Erstelle weitere Animationen mit selbsterstellten Spritebildern, die du im gleichen Verzeichnis, in dem sich dein Programm befindet, speicherst.

Du kannst auch Sprites aus der TigerJython-Bilderbibliothek verwenden.

 

 

   

 

15-1
Didaktische Hinweise:

In diesem Kapitel können verschiedene Interessen und Begabungen vereint werden, einerseits beim Design und der Erstellung von Sprite- und Hintergrundbildern künstlerische und beim Programmieren mathematisch-logische.

Im Umgang mit Bildeditoren und der Beschaffung von Bildern aus dem Internet sind auch Kenntnisse aus der ICT- und Medienbildung von Vorteil und es kann auch über Urheberrechte diskutiert werden.

15-2
Fachliche Hinweise:

Eigentlich ist die Doppelbufferung ständig aktiv, aber der Bildbuffer wird nach jeder Zeichnungsoperation automatisch auf dem Bildschirm gerendert. Das Flackern ist eine Folge davon, dass beim Aufruf von clear() auch der leere Bildbuffer kurz sichtbar wird. Nach enableRepaint(False) wird das Rendern des leeren Bildbuffers unterbunden. 

15-3
Didaktische Hinweise:

Dies ist eine der vielen Erweiterungen der klassischen Turtlegrafik mit dem Vorteil, dass sich andere wichtige Grafikanwendungen programmieren lassen, ohne dass ein neues Grafiksystem eingeführt werden muss.