Deutsch   English   

11. Computer animation

 

 

YOU LEARN HERE...

 

that a computer animation consists of individual images that change only slightly and are shown step by step one after the other. As the human eye can only register around 25 images per second, the result is a flowing movement if the sequence of images is shown quickly enough.

 

 

EXAMPLES

 

To animate a single figure, the following steps are repeated:

  • clear the complete window
  • draw the figure at a specific position
  • wait a short time
  • Determine a new position that differs only slightly from the previous one

For a computer animation without jerking, it is important that the blank screen is not made visible. This is achieved by drawing in an image memory (image buffer) and displaying (“rendering”) the new image as a whole on the screen. For animations, the automatic rendering of the individual graphic commands is therefore deactivated with enableRepaint(False) and the image buffer is rendered at the appropriate time with repaint().

Example 1: Moving billiard ball that is reflected at the edges
The billiard ball is displayed with a red circle, the billiard table with a square. After determining the new coordinates, it must be checked in each case whether the ball is at the edge.

Program:     

#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       
► Copy to clipboard
 


 

Example 2: Animating several images at the same time

On a light blue background, 30 balloons are created at random positions, which move downwards. As soon as a balloon reaches the bottom of the window, it is moved up again.

A sky list is used in the program to save the position of all objects. The new positions are first saved in a temporary list skyTemp and then the old list is replaced with the new one sky = skyTemp.

 

Program: 

#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)
► Copy to clipboard

To minimize fluttering, deactivate the automatic rendering of the individual graphic elements with enableRepaint(False) and display the entire image buffer on the screen at the correct time with repaint().


Example 3
: Simulating a harmonic spring oscillation
Instead of the spring, a rubber band is drawn here for the sake of simplicity. The ball moves according to Newton's law F = ma with the spring force -k*x and a frictional force -r*v proportional to the speed. The sleep function from the time module enables the animation to be displayed in real time.

Program: 

#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) 
► Copy to clipboard
 



 

REMEMBER YOU...

 

A computer animation is created by repeatedly displaying image figures at new positions that differ only slightly from the old ones. Before the new image is displayed, the entire graphics window is usually deleted.


To minimize fluttering, deactivate the automatic rendering of the individual graphic elements with enableRepaint(False) and display the entire image buffer on the screen at the correct time with repaint().

 

 

TO SOLVE BY YOURSELF

 

1)


A billiard ball should move horizontally from left to right and back.

 



 

2)


A red ball randomly changes its position on a scraper board every 500 milliseconds.