Python Online
Home    

11. Computeranimation

 

 

DU LERNST HIER...

 

dass eine Computeranimation aus Einzelbildern besteht, die sich nur wenig ändern und Schritt um Schritt zeitlich nacheinander sichtbar werden. Da das menschliche Auge nur rund 25 Bilder pro Sekunde erfassen kann, ergibt sich eine fliessende Bewegung, wenn die Bildfolge genügend schnell gezeigt wird.

 

 

MUSTERBEISPIELE

 

Um eine einzelne Figur zu animieren, werden folgende Schritte wiederholt:

  • Löschen des ganzen Bildschirms
  • Zeichnen der Figur an einer bestimmten Position
  • Kurze Zeit warten
  • Neue Position bestimmen, die sich nur wenig von der vorhergehenden unterscheidet

Für eine Computeranimation ohne Ruckeln ist es wichtig, dass der leere Bildschirm nicht sichtbar gemacht wird. Dies erreicht man dadurch, dass das Zeichnen in einem Bildspeicher (Bildbuffer) erfolgt und das neue Bild als Ganzes auf dem Bildschirm dargestellt ("gerendert") wird. Bei Animationen wird daher das automatische Rendern der einzelnen Grafikbefehle mit enableRepaint(False) deaktiviert und der Bildbuffer im geeigneten Zeitpunkt mit repaint() gerendert.

Beispiel 1: Bewegte Billardkugel, die an den Rändern reflektiert wird
Die Billardkugel wird mit einem roten Kreis dargestellt, der Billardtisch mit einem Quadrat. Nach dem Bestimmen der neuen Koordinaten muss jeweils überprüft werden, ob sich die Kugel am Rand befindet.

Programm:

#Gp11a.py

from gpanel import *

def drawTable():
    setColor("darkgreen")
    lineWidth(5)
    pos(0, 0)
    rectangle(90, 90)

makeGPanel(-50, 50, -50, 50)
enableRepaint(False)
x = 10
y = 30
dx = 0.7
dy = 0.4

while True:
    clear()
    drawTable()
    pos(x, y)
    setColor("red")
    fillCircle(5)
    repaint()
    delay(30)
    x = x + dx
    y = y + dy
    if x > 40 or x < -40:
        dx = -dx
    if y > 40 or y < -40:
        dy = -dy       
► In Zwischenablage kopieren
 




Beispiel 2
: Verwendung von Bildern aus der Bildbibliothek

In einem Grafikfenster von GPanel können auch Bilder im gif, png oder img-Format eingefügt werden. In der Distribution von TigerJython ist eine Bildbibliothek mit mehr als 100 kleinen Bildern (Sprites) enthalten. Eine Übersicht findet man im TigerJython Editor unter Hilfe/Aplu Dokumentation.  

Eigene Bilder muss man im Verzeichnis, in den sich das Programm befindet, speichern (oder in einem Unterverzeichnis, das man beim Aufruf von getImage() angibt, beispielsweise die Datei rover.png im Unterverzeichnis myimages mit getImage("myimages/rover.png").

 

Programm:

#Gp11b.py
from gpanel import *

makeGPanel(0, 100, 0, 100)
y = 50
dx = 0.5
img1 = getImage("sprites/car0.gif") 
img2 = getImage("sprites/car1.gif") 
img3 = getImage("sprites/car3.gif")
images = [img1, img2, img3] 
enableRepaint(False)

while True:
    for img in images:
        x = 0
        while x < 100:
            clear()
            line(0, 50, 100, 50)
            image(img, x, y)
            repaint()
            x = x + dx
            delay(20)  
► In Zwischenablage kopieren

img1 = getImage("sprites/car0.gif) holt das Bild car0.gif aus der Bibliothek und speichert es als img1. image(img, x, y) stellt das Bild img an der Position (x, y) dar.


Beispiel 3
: Mehrere Bilder gleichzeitig animieren

Auf einem hellblauen Hintergrund werden an zufälligen Positionen 30 Ballone erzeugt, die sich nach unten bewegen. Sobald ein Ballon den unteren Rand des Fensters erreicht, wird er wieder nach oben gesetzt.

Im Programm wird eine Liste sky verwendet, um die Position aller Objekte zu speichern. Die neuen Positionen werden zuerst in einer temporären Liste skyTemp gespeicher und dann die alte Liste mit der neuen ersetzt sky = skyTemp.

 

Programm:

#Gp11c.py

from gpanel import *
from random import randint

def drawSky():    
    for (x, y) in sky:
        image(img, x, y)    
                                
makeGPanel(0, 600, 0, 600) 
bgColor("skyblue")
sky = []
for i in range(30):
    x = randint (10, 590)
    y = randint (-20, 620)  
    sky.append((x, y)) 
img = getImage("sprites/balloon.gif")  
enableRepaint(False)
    
while True:
    clear()    
    drawSky()
    repaint()
    skyTemp = []
    for (x, y) in sky:
        if y < -40:
            y = 620
        else:    
            y -= 1
        skyTemp.append((x, y))
    sky = skyTemp    
    delay(25)
► In Zwischenablage kopieren


Beispiel 4
: Eine harmonische Federschwingung simulieren
Anstelle der Feder wird hier der Einfachheit halber ein Gummiband gezeichnet. Die Kugel bewegt sich gemäss dem Newtonschen Gesetz F = ma mit der Federkraft -k*x und einer zur Geschwindigkeit proportionalen Reibungskraft  -r*v. Die Funktion sleep aus dem Modul time ermöglicht ine Echtzeit-Darstellung der Animation.

Programm:

#Gp11d.py
from gpanel import *
from time import sleep

dt = 0.01  # Zeitschritt 
m = 0.5    # Masse 
k = 4      # Federkonstante 
r = 0.1    # Reibungskoeffizient 
t = 0; y = 0.8; v = 0 

makeGPanel(-1, 1, -1, 1)
enableRepaint(False)
img = getImage("sprites/marble.png") 

repeat:
    clear()
    F = -k*y - r*v   
    a = F/m          
    v = v + a*dt     
    y = y + v*dt 
    line(0, 1, 0, y)
    image(img, - 0.115, y - 0.115)
    repaint()
    t = t + dt
    sleep(dt)    
► In Zwischenablage kopieren
 



 

MERKE DIR...

 

Eine Computeranimation entsteht durch wiederholte Darstellung von Bildfiguren jeweils an neuen Positionen, die sich nur wenig von den alten unterscheiden. Vor der Darstellung des neuen Bildes wird in der Regel das ganze Grafikfenster gelöscht.

Um das Flattern zu minimieren deaktiviert man mit enableRepaint(False) das automatische Rendern der einzelnen Grafikelemente und stellt den ganzen Bildbuffer mit repaint() im richtigen Zeitpunkt auf dem Bildschirm dar.

 

 

ZUM SELBST LÖSEN

 

1)


Eine Billardkugel soll sich waagrecht von links nach rechts und zurück bewegen.

 


 

2)


Durchsuche die TigerJython-Bilderbibliothek, die du unter "Hilfe" "APLU-Dokumentation"-"Bibliothek" "Übersicht" findest. Wähle sprite-Bilder von 4 verschiedenen Autos und lasse sie so wie im Beispiel 3 über das Grafikfenster fahren.

 


 

3)


Anstelle der Ballons wie im Beispiel 3, sollen sich Aliens von oben nach unten bewegen. Das Hintergrundbild kannst du einfügen mit:

bg = getImage("sprites/town.jpg")
image(bg, 0, 0)