Programmer des animations

Denis Dréano
PROG3-01

Programmer des animations

Objectifs cantonaux : O1.5, O1.6. Semaine dédoublée (×2, groupes A/B séparés).

Cours complet sur la plateforme Runestone de Cédric Donner : Programmer des animations.

On peut réutiliser la conception modulaire (fonctions, paramètres) pour programmer des animations, un peu à la manière des premiers dessins animés : on dessine une image, on l’efface un court instant plus tard, puis on la remplace par une image très légèrement différente. Répété assez vite, cela donne l’illusion que les figures se mettent en mouvement.

▷ Définition — Animation

Une animation est une suite d’images (les frames) affichées rapidement les unes après les autres. Chaque frame ne diffère que très peu de la précédente (couleur, position, taille…). L’œil humain perçoit cette succession comme un mouvement continu.

Nouvelles commandes du module gturtle

◈ Syntaxe — Commandes utiles pour animer 

clear()          # efface tout ce qui a été dessiné à l'écran
hideTurtle()      # cache la tortue → dessin beaucoup plus rapide
showTurtle()      # réaffiche la tortue (utile pour déboguer un dessin)
delay(ms)         # met le programme en pause pendant ms millisecondes

delay(ms) est indispensable : sans lui, les images s’enchaîneraient bien trop vite pour que l’œil perçoive quoi que ce soit. 1000 millisecondes = 1 seconde, donc delay(40) met le programme en pause environ 1/25 de seconde — de quoi obtenir une animation fluide (~25 images par seconde).

Exemple 1 — un feu clignotant

→ Exemple 1 — clignoter 
from gturtle import *

def blink_light(diameter, color):
    ms = 500

    setPenColor(color)
    for _ in range(5):
        # allumer le feu
        dot(diameter)

        # laisser le feu allumé quelques ms
        delay(ms)

        # effacer l'écran
        clear()

        # laisser le feu éteint quelques ms
        delay(ms)


hideTurtle()
blink_light(50, "red")

Le principe : dessiner → attendre → effacer → attendre → recommencer. C’est cette répétition rapide de dessiner/effacer qui crée l’effet de clignotement.

Exemple 2 — déplacer une forme

Pour donner l’impression qu’une forme se déplace, on répète le principe précédent en redessinant la forme à une position légèrement différente à chaque frame, plutôt qu’au même endroit.

→ Exemple 2 — un triangle qui glisse 
from gturtle import *

def draw_triangle(size, color):
    # dessine un triangle équilatéral plein
    setPenColor(color)
    setFillColor(color)

    startPath()
    for _ in range(3):
        forward(size)
        right(120)
    fillPath()


def move_right(nb_pixels):
    # déplace la tortue vers la droite de nb_pixels pixels, sans dessiner
    penUp()
    right(90)
    forward(nb_pixels)
    left(90)
    penDown()


def animation(n):
    # dessine l'animation (n images)
    ms = 10

    for _ in range(n):
        clear()
        draw_triangle(50, "red")
        delay(ms)
        move_right(3)


hideTurtle()
animation(60)

! penUp() / penDown()

Dans move_right, penUp() avant le déplacement puis penDown() après empêchent la tortue de laisser une trace pendant qu’elle se repositionne — on ne veut voir que le triangle, pas le trajet entre chaque frame.

hideTurtle() : pourquoi c’est indispensable

! Cacher la tortue accélère le dessin

Habituellement on aime bien voir la tortue dessiner pas à pas. Mais pour une animation, chaque frame doit se dessiner le plus vite possible : c’est le delay(ms) qui contrôle le rythme, pas la vitesse de dessin. hideTurtle() supprime l’affichage du déplacement de la tortue et accélère donc considérablement chaque frame — sans lui, l’animation serait beaucoup trop lente et saccadée.

Les mains à la pâte

Modifiez le programme de l’exemple 1 pour que :

  • le feu clignote 5 fois par seconde ;
  • la couleur du feu soit orange ;
  • au lieu d’un rond dessiné avec dot, le feu soit un carré plein de 60 pixels de côté (utilisez setFillColor, startPath() et fillPath(), déjà rencontrés précédemment).

Modifiez ensuite le programme de l’exemple 2 pour que :

  • le triangle ait une bordure rouge, mais soit rempli de vert ;
  • le triangle se déplace de droite à gauche plutôt que de gauche à droite ;
  • l’animation affiche environ 60 images par seconde.