TU APPRENDS ICI...

qu’une animation informatique est composée d’images individuelles qui ne changent que très peu et qui sont affichées successivement dans le temps, étape par étape. Comme l’œil humain ne peut percevoir qu’environ 25 images par seconde, une impression de mouvement fluide apparaît lorsque la succession d’images est affichée suffisamment rapidement.

EXEMPLES

Pour animer une figure unique, les étapes suivantes sont répétées :

• Effacer tout l’écran
• Dessiner la figure à une position déterminée
• Attendre un court instant
• Déterminer une nouvelle position qui ne diffère que légèrement de la précédente

Pour qu’une animation informatique soit fluide et sans saccades, il est important que l’écran vide ne soit pas visible. On y parvient en dessinant dans une mémoire d’image (tampon d’image / buffer) puis en affichant (« rendre ») l’image entière à l’écran. Dans les animations, le rendu automatique des différentes commandes graphiques est donc désactivé avec enableRepaint(False) et le tampon d’image est affiché au moment approprié avec repaint().

Beispiel 1: Bille de billard en mouvement réfléchie sur les bords
La bille de billard est représentée par un cercle rouge, la table de billard par un carré. Après avoir calculé les nouvelles coordonnées, il faut vérifier à chaque fois si la bille se trouve sur un bord.

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: Animer plusieurs images simultanément

Sur un fond bleu clair, 30 ballons sont créés à des positions aléatoires et se déplacent vers le bas. Dès qu’un ballon atteint le bord inférieur de la fenêtre, il est replacé en haut. Dans le programme, une liste sky est utilisée pour mémoriser la position de tous les objets. Les nouvelles positions sont d’abord enregistrées dans une liste temporaire skyTemp, puis l’ancienne liste est remplacée par la nouvelle avec sky = skyTemp.

Programm: [► WebTigerPython]    [► 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: Simuler une oscillation harmonique d’un ressort

À la place du ressort, un élastique est dessiné ici pour simplifier. La bille se déplace selon la loi de Newton F = ma, avec la force du ressort -k*x et une force de frottement -r*v proportionnelle à la vitesse. La fonction sleep du module time permet un affichage de l’animation en temps réel.

Programm: [► WebTigerPython]    [► 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) ►Copy to clipboard

À RETENIR...

Une animation informatique est obtenue par l’affichage répété de figures à de nouvelles positions qui ne diffèrent que légèrement des précédentes. Avant l’affichage de la nouvelle image, toute la fenêtre graphique est généralement effacée.

Pour réduire le scintillement, on désactive avec enableRepaint(False) le rendu automatique des différents éléments graphiques et on affiche l’ensemble du tampon d’image au moment approprié avec repaint().

À FAIRE PAR TOI-MÊME