Animations avec variables

Denis Dréano
PROG3-03

Animations avec variables

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

Cours complet sur la plateforme Runestone de Cédric Donner : Animations avec variables.

La semaine dernière, on déplaçait une forme en appelant une fonction (move_right) qui bougeait la tortue de quelques pixels à chaque frame, sans jamais savoir où elle se trouvait exactement. Cette technique fonctionne, mais elle devient vite limitée dès qu’on veut faire des choses plus précises (accélérer, changer de direction, animer plusieurs objets en même temps).

! La limite de la méthode précédente

Sans variable pour retenir la position, le programme ne « sait » jamais où se trouve la forme : il sait juste comment la déplacer d’une frame à l’autre. Dès qu’on veut deux objets qui bougent selon des trajectoires différentes, cette méthode devient très difficile à maîtriser.

Utiliser une variable de position

▷ Idée

On crée des variables x et y qui contiennent la position de l’objet à animer. À chaque frame : on efface l’écran, on dessine l’objet à la position (x, y) avec setPos(x, y), puis on modifie x et/ou y avant de passer à la frame suivante.

→ Exemple 1 — mouvement rectiligne à vitesse constante
from gturtle import *

def draw_triangle(x, y, size, color):
    setPos(x, y)
    setPenColor(color)
    setFillColor(color)

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


def animation(n, fps=60):
    ms = 1000 / fps

    # position de départ du triangle
    x = -300
    y = 0

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

        # on avance la position pour la prochaine frame
        x += 3


hideTurtle()
animation(60)

Remarquez que move_right a disparu : c’est maintenant la variable x qui retient la position et qui est modifiée directement dans la boucle d’animation.

Accélérer un mouvement

Avec une variable, on peut aussi faire varier la vitesse elle-même d’une frame à l’autre — par exemple pour simuler une chute sous l’effet de la gravité.

→ Exemple 2 — une balle qui tombe (accélération)
from gturtle import *

def ball(x, y, diameter, color):
    setPos(x, y)
    setPenColor(color)
    dot(diameter)


def animation(n, fps=60):
    ms = 1000 / fps

    x = 0
    y = 200
    vitesse = 0

    for _ in range(n):
        clear()
        ball(x, y, 30, "red")
        delay(ms)

        # on fait descendre la balle
        y -= vitesse

        # la vitesse augmente à chaque étape → accélération
        vitesse += 0.5


hideTurtle()
animation(45)

Ici, vitesse est elle-même une variable qui change au fil de l’animation : c’est ce qui donne l’impression d’accélération, contrairement à l’exemple 1 où le déplacement (+= 3) restait toujours le même.

! Erreur fréquente

Si on oublie de modifier x, y ou vitesse à l’intérieur de la boucle for, l’objet reste immobile : le programme dessine toujours la même image, juste effacée et redessinée au même endroit. Une animation exige que la position change à chaque passage dans la boucle.

Les mains à la pâte

  • Reprenez l’exemple 1 et faites en sorte que le triangle se déplace du bas vers le haut plutôt que de gauche à droite.
  • Reprenez l’exemple 2 et faites en sorte que la balle commence par monter vite, puis retombe (indice : donnez à vitesse une valeur négative de départ).
  • Pour aller plus loin : essayez d’animer deux balles en même temps, avec des variables x1, y1 et x2, y2 séparées, en les dessinant toutes les deux à chaque frame avant l’appel à delay(ms).