TigerJython4Kids
HomeTurtlegrafikRobotikDatenbanken
computeranimation

15. COMPUTERANIMATION

 

 

DU LERNST HIER...

 

wie du animierte Computergrafiken ähnlich  wie in einem Animationsfilm erstellst. Die Bilder kannst du mit der Turtlezeichnen oder als Bilddateien laden.

 

 

MUSTERBEISPIEL

 

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.

Als Beispiel zeichnest du mit der Funktion propeller(a) einen 3-blättrigen Propeller. wobei a der Richtungswinkel zum ersten Propellerblatt ist. Für ein ruckelfreie Computeranimation ist es wichtig, dass 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.

Den Animationsablauf kannst du so beschreiben:

Propellerrichtung auf 0 Grad initialisieren
Wiederhole:
      Propeller im Bildbuffer zeichnen
      Propeller auf dem Bildschirm darstellen
      1 / 25 Sekunde warten
      Bild im Bildbuffer loeschen
      Propellerrichtung erhoehen

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.

Mit deinen Vorkenntnissen aus der Turtlegrafik verstehst du Programm ohne Probleme und kannst dich an der Animation erfreuen.

 

 


from gturtle import *

def propeller(a):
    setHeading(a)
    repeat 3:
        fillToPoint()    
        rightArc(100, 90)
        right(90)
        rightArc(100, 90)
        left(30)       
    
makeTurtle()
hideTurtle()
# kein automatisches Rendering
enableRepaint(False)

dt = 40  # Zeitinkrement (ms)
a = 0    # Winkelinitialisierung
da = 10  # Winkelinkrement (Grad)

# Animationsschleife
while True:
   propeller(a)
   repaint()     # Rendern
   delay(dt)     # Warten
   clear("gray") # Loeschen
   a += da       # Neue Lage
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

 

 

MERKE DIR...

  Zum besseren Verständnis des Programms ist es manchmal zweckmässig, an geeigneten Stellen Kommentare einzufügen. Falls die Animation ruckelt, ist der Computer zu wenig leistungsstark oder überlastet. Abhilfe schafft manchmal, wenn du TigerJython neu startest.

 

 

ZUM SELBST LÖSEN

 
1.
Ergänze die Propelleranimation mit dem Hintergrundbild eines Flugzeugs. Dazu definierst du am einfachsten eine Funktion flugzeug(x, y),  die das Bild aus der Bildbibliothek an der Stelle x, y zeichnet. Du rufst die Funktion periodisch nach der Zeile clear() in der Animationsschleife auf.
def flugzeug(x, y):
   heading(0)
   setPos(x, y)
   drawImage("sprites/airplane.png")

 
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.

 

 

 

 

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

 
1.

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.

 

2.

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.