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: [► WebTigerPython]   [► WebTigerJython]

#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       

Beispiel 2: 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:  [► WebTigerJython]

#Gp11c.py

from gpanel import *
from random import randint

def drawSky():    
    for (x, y) in sky:
        setColor("red")
        move(x, y)
        fillCircle(18)    
                                
makeGPanel(0, 600, 0, 600) 
sky = []
for i in range(30):
    x = randint (10, 590)
    y = randint (-20, 620)  
    sky.append((x, y))
enableRepaint(False)
    
while True:
    clear()
    bgColor("skyblue")    
    drawSky()
    repaint()
    skyTemp = []
    for (x, y) in sky:
        if y < -40:
            y = 620
        else:    
            y -= 1
        skyTemp.append((x, y))
    sky = skyTemp    
    delay(25)

Beispiel 3: 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:  [► WebTigerJython]

#Gp11d.py from gpanel import * from time import sleep dt = 0.01 # Zeitschritt (s) m = 0.5 # Masse (kg) k = 4 # Federkonstante (N/kg) r = 0.1 # Reibungskoeffizient in N/m/s t = 0; y = 0.8; v = 0 # Anfangsbedingungen makeGPanel(-1, 1, -1, 1) repeat: clear() F = -k*y - r*v a = F/m v = v + a*dt y = y + v*dt setColor("black") line(0, 1, 0, y) setColor("lime") move(0, y - 0.1) fillCircle(0.1) t = t + dt sleep(dt) #Gp11d.py from gpanel import * from time import sleep dt = 0.01 # Zeitschritt (s) m = 0.5 # Masse (kg) k = 4 # Federkonstante (N/kg) r = 0.1 # Reibungskoeffizient in N/m/s t = 0; y = 0.8; v = 0 # Anfangsbedingungen makeGPanel(-1, 1, -1, 1) repeat: clear() F = -k*y - r*v a = F/m v = v + a*dt y = y + v*dt setColor("black") line(0, 1, 0, y) setColor("lime") move(0, y - 0.1) fillCircle(0.1) 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