Jython HomeDruckenJava-Online

Computeranimation


Die Computergrafik kann ähnlich wie in einem Film zur Darstellung von zeitlich veränderlichen Inhalten verwendet werden. Man nennt ein so eingesetztes Programm eine Computeranimation. Um den zeitlichen Ablauf sichtbar zu machen, wird in einer Animationsschleife immer nach einem gleich grossen Zeitschritt ein neues Bild gezeichnet, das sich nur wenig vom vorhergehenden unterscheidet. Werden mehr als 25 Bilder pro Sekunde erzeugt, so ergibt sich für das Auge eine fliessende Bewegung.

Das Prinzip der Animation kann man an einer sich scheinbar bewegenden Figur zeigen. Dabei wird die Figur in kurzen Zeitschritten an leicht verschobenen Positionen gezeichnet. Die vorangehende Figur muss du immer wieder gelöscht werden

Im ersten Beispiel läss man einen Propeller rotieren. Für die Wiederholung verwendet man eine endlose while-Schleife. In dieser Animationsschleife zeichnet man zuerst den Propeller. Danach wartet man 50 ms. Diese Wartezeit bestimmt, wie häufig der Propeller pro Sekunde neu gezeichnet wird. Dann löschst man den Bildschirm mit clear() und drehst die Turtle um 10 Grad, damit der nächste Propeller in leicht gedrehter Lage gezeichnet wird.

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.

 

 

Ausführen mit Webstart

# Tu15a.py

from gturtle import *

def propeller():
    repeat 3:
        fillToPoint()    
        rightArc(100, 90)
        right(90)
        rightArc(100, 90)
        left(30)       
    
makeTurtle()
hideTurtle()
enableRepaint(False)

while True:         
    propeller() 
    repaint()  
    delay(40)
    clear()     
    right(10)  
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

 

Erklärungen zum Programmcode:

def propeler(): zeichnet den Propeller
enableRepaint(False): das automatische Render der Bildschirmspeichers auf den Bildschirm wird deaktiviert, um das Flattern zu vermeinden
repaint(): Inhalt des Bildschirmspeichers wird auf dem Bildschirm angezeigt (gerendert)
delay(40): 40 Millisekunden warten
clear: Bildschirm löschen

 

Beispiel 2: PingPong
In einem Ping-Pong-Spiel will man den roten Ball zwischen den grünen Balken hin und her bewegen.

# Tu15b.py

from gturtle import *

def wall():
    setPenColor("green")
    setLineWidth(10)
    setPos(-200, -50)
    forward(100)
    setPos(200, -50)
    forward(100)    

makeTurtle()
hideTurtle()
enableRepaint(False)

x = -170
dx = 10

while True:
    clear()
    wall()
    setPos(x, 0)
    setPenColor("red")
    dot(60)
    repaint()
    x = x + dx
    if x > 165 or x < -165:
        dx = -dx      
    delay(40) 
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)
 

 

Erklärungen zum Programmcode:

if x > 165 or x < -165: Der Ball ist an linken oder rechten Balken angekommen

dx = .-dx: Wenn dx das Vorzeichen wechselt, bewegt sich der Ball in der umgekehrten Richtung

Beispiel 3: Flügelbewegungen eines Vogels
Der Vogel. Dieser besteht der Einfachheit halber aus einem runden Körper und zwei Kreisbögen, die links und rechts vom Körper gezeichnet werden. Um die Lage der Flügel einzustellen,  dreht man die Turtle vor dem Zeichnen des Flügels in die passende Richtung. Die Funktion bird(angle) hat daher einen Parameter angle, der die Turtle-Richtung vor dem Zeichnen der Flügel angibt. Dieser Winkel steigt bei der Abwärtsbewegung von 5° bis 55° und fällt bei der Aufwärtsbewegung von 55° bis 5°.

# Tu15c.py

from gturtle import *

def bird(angle):
    dot(20)
    right(angle)
    rightArc(100, 90)
    home()
    left(angle)
    leftArc(100, 90)
    home()
    
def move(start, end, step):
    for a in range(start, end, step):
        clear("lightSkyBlue")   
        bird(a)
        repaint()
        delay(40) 
    
makeTurtle()
hideTurtle()
setLineWidth(5)
setPenColor("black")
enableRepaint(False)

while True:
    move(55, 5, -2)
    move(5, 55, 2)    
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)
 

 

Erklärungen zum Programmcode:

def move(start, end, step): Da sich die Flügel einmal von oben nach unten und dann von unten nach obe nbewegen, wird eine Funktion move() definiert, die zweimal mit verschiedenen Parametern aufgerugen wird.

 

Beispiel 4: Weihnachtssterne
50 Sterne in zufällig gewählten Farben werden an zufällig gewählten Positionen gezeichnet. Die Sterne bewegen sich langsam nach unten und im oberen Teil des Fensters werden wieder neue Sterne erzeugt.

Die 50 Sterne werden in einer repeat-Schleife erzeugt und ihre zufällige Position und zufällige Farbei in einer Liste sky gespeichert. Um die Sterne nach unten zu bewegen, wird eine zweite Liste skyTemp erstellt. In der Animationsschleife werden zuerst alle Sterne der Liste sky gezeichnet. Danach wird für jeden Stern aus der Liste sky die y-Koordinate um 1 verkleinert und x, y, und c in der Liste skyTemp gespeichert. Danach wird die Liste sky mit skyTemp ersetzt.

Falls die y-Koordinate kleiner als -340 (der Stern ist im Fenster nicht mehr sichtbar), wird die y-Koordinate auf 320 gesetzt (der Stern erscheint wieder oben.

 



# Tu15d.py

from gturtle import *
from random import randint

def star():
    startPath()
    repeat 5:
        forward(40)
        right(144)  
    fillPath()
    
def drawSky():
    clear("darkblue")
    for (x, y, c) in sky:
        setPenColor(c)
        setFillColor(c)
        setPos(x, y)
        star()  
                                
makeTurtle()        
hideTurtle()
sky = []
enableRepaint(False)

repeat(50):
    x = randint (-270, 270)
    y = randint (-320, 320) 
    c = makeColor(randint(0, 255), randint(0, 255), randint(0, 255))
    sky.append((x, y, c))
    
while True:
    drawSky()
    repaint()
    skyTemp = []
    for (x, y, c) in sky:
        if y < -340:
            y = 320
        else:    
            y -= 1
        skyTemp.append((x, y, c))
    sky = skyTemp    
    delay(20)
    
Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

 

Erklärungen zum Programmcode:

sky.append((x, y, c)) :die Koordinaten x und y, sowie die zufällige Farbe werden in der Liste sky gespeichert

enableRepaint(False) :verhindert das automatische Zeichnen jedes Sternes

drawSky()
repaint()
alle Sterne der Liste sky werden auf einmal gezeichnet, wobei das ganze Fenster vorher mit der dunkelblauen Farbe übermalt wird


Beispiel 5: Animierte Bilder
Eine Turtle kann als Leitfigur sogar mehrere verschiedene Spritebilder herumbewegen. Dieses Verfahren kommt dann zum Tragen, wenn man das Spritebild animieren will. Typisch ist eine laufende Person, die aus mehreren Bewegungsformen besteht. In der Animationsschleife bewegt sich einerseits die Turtle vorwärts und ändert laufend das Spritebild. Es stehen 5 Spritebilder person_0, person_1, person_2, person_3 und person_4 zur Verfügung.

Damit die Turtleposition ausserhalb des Fensters automatisch wieder auf der anderen Seite ins Fenster zurückgesetzt wird, verwendest du den Befehl wrap().

# Tu15e.py

from gturtle import *

makeTurtle()
hideTurtle()
penUp()
wrap()
enableRepaint(False)

img = [0] * 5
for i in range(5):
    img[i] = "sprites/person_" + str(i) + ".png"    

right(90)
i = 0
while True:
    clear("lightblue")
    drawImage(img[i])
    repaint()
    forward(10)
    i += 1
    if i == 5:
        i = 0
    delay(70)    
   

Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)
 

 

 

 

Erklärungen zum Programmcode:

img[i] = "sprites/person_" + str(i) + ".png": Eine elegantere Schreibweise, um die Bilder mit ihren Indizes zu bezeichnen
drawImage(img[i]): Stellt das Bild mit dem Index i an der aktuellen Position dar
if i == 5: i = 0: Nach dem 5. Bild kommt wieder das erste

 

 


Aufgaben Serie 15

1)

Zeichne ein Rad und lasse ihn um den Punkt (0, 0) rotieren. Verwende enableRepaint(False) und repaint(), um das Flackern zu beseitigen.

       
2)

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

 

 

 

 
       
3)

Zeichne eine Fahne und schwenke sie um den untersten Punkt der Fahnenstange hinauf und hinunter.

 
       
4)

Das reizende Pony soll immer wieder von rechts nach links über das Turtlefenster laufen. Verwende dazu die 8 Spritbilder pony_0.gif,...,pony_7.gif aus der TigerJython-Distribution.

Erstelle ähnliche lustige Animationn mit eigenen Bildern.