Méthode pour implémenter le dessin et l’animation de formes avec Python et Canvas

Python est l’un des langages de programmation les plus faciles à apprendre tout en offrant des fonctionnalités puissantes. En particulier, en utilisant la bibliothèque Canvas, vous pouvez facilement implémenter le dessin de formes et des animations. Cet article explique comment utiliser Python et Canvas pour implémenter des dessins de formes de base jusqu’à des animations complexes. Il s’adresse aux programmeurs de tous niveaux, des débutants aux intermédiaires.

Installation des outils et bibliothèques nécessaires

Pour utiliser Python et la bibliothèque Canvas, il est d’abord nécessaire d’installer les outils et bibliothèques requis. Voici les étapes à suivre.

Installation de Python

Si Python n’est pas encore installé, téléchargez et installez la version la plus récente depuis le site officiel de Python. Les étapes d’installation varient en fonction du système d’exploitation, suivez les instructions du guide officiel.

Installation des bibliothèques nécessaires

Installez les bibliothèques nécessaires pour implémenter le dessin de formes et l’animation. Nous utiliserons principalement les bibliothèques suivantes :

• Tkinter : bibliothèque standard de Python, utilisée pour la programmation d’interfaces graphiques.
• Pillow : bibliothèque de traitement d’images, utilisée pour afficher des images sur le Canvas.

Ces bibliothèques peuvent être installées avec la commande suivante :

pip install pillow

Tkinter fait partie de la bibliothèque standard, donc une installation supplémentaire n’est généralement pas nécessaire. Toutefois, sur un système Linux, il peut être nécessaire d’utiliser la commande suivante pour l’installer :

sudo apt-get install python3-tk

Configuration de base du Canvas

Cette section explique comment configurer le Canvas pour dessiner des formes. Le Canvas est créé à l’aide de la bibliothèque Tkinter.

Création d’un Canvas

Tout d’abord, créez un Canvas de base à l’aide de la bibliothèque Tkinter. Le code suivant montre les paramètres de base pour afficher un Canvas simple.

import tkinter as tk

# Créer la fenêtre principale
root = tk.Tk()
root.title("Configuration de base du Canvas")

# Créer le Canvas
canvas = tk.Canvas(root, width=800, height=600, bg="white")
canvas.pack()

# Démarrer la boucle principale
root.mainloop()

En exécutant ce code, un Canvas blanc de 800×600 pixels sera affiché.

Opérations de base sur le Canvas

Voici les opérations de base pour dessiner des formes sur le Canvas. Nous allons expliquer comment dessiner des lignes, des rectangles et des cercles.

# Dessiner une ligne
canvas.create_line(50, 50, 200, 200, fill="black", width=2)

# Dessiner un rectangle
canvas.create_rectangle(300, 300, 500, 500, outline="red", width=2)

# Dessiner un cercle (ovale)
canvas.create_oval(600, 50, 750, 200, outline="blue", width=2)

En ajoutant ces lignes de code, vous pourrez dessiner une ligne, un rectangle et un cercle sur le Canvas. Chaque forme sera dessinée aux coordonnées, avec les couleurs et les largeurs spécifiées.

Dessin de formes de base

Cette section décrit en détail les méthodes pour dessiner des formes de base comme des rectangles, des cercles et des lignes.

Dessin de rectangles

Les rectangles sont dessinés à l’aide de la méthode create_rectangle. Vous devez spécifier les coordonnées, la couleur de contour et la largeur.

# Dessiner un rectangle
canvas.create_rectangle(100, 100, 200, 200, outline="black", width=2)

Ce code dessine un rectangle avec les coordonnées (100, 100) et (200, 200).

Dessin de cercles

Les cercles ou ellipses sont dessinés à l’aide de la méthode create_oval. Spécifiez les coordonnées du rectangle englobant de l’ellipse.

# Dessiner un cercle
canvas.create_oval(300, 100, 400, 200, outline="green", width=2)

Ce code dessine un cercle avec les coordonnées (300, 100) et (400, 200).

Dessin de lignes

Les lignes sont dessinées à l’aide de la méthode create_line. Spécifiez les coordonnées de départ et d’arrivée.

# Dessiner une ligne
canvas.create_line(50, 50, 150, 150, fill="blue", width=2)

Ce code dessine une ligne bleue entre les coordonnées (50, 50) et (150, 150).

Dessin de texte

Pour dessiner du texte sur le Canvas, utilisez la méthode create_text. Spécifiez la position, le contenu, la police et la couleur du texte.

# Dessiner du texte
canvas.create_text(250, 250, text="Hello, Canvas!", font=("Helvetica", 20), fill="purple")

Ce code affiche le texte « Hello, Canvas! » à la position (250, 250).

Dessin de formes complexes

Cette section explique comment dessiner des formes plus complexes comme des polygones et des formes personnalisées.

Dessin de polygones

Les polygones sont dessinés avec la méthode create_polygon. Spécifiez les coordonnées des sommets dans l’ordre.

# Dessiner un triangle
canvas.create_polygon(150, 250, 200, 300, 100, 300, outline="orange", fill="yellow", width=2)

Ce code dessine un triangle avec les coordonnées (150, 250), (200, 300) et (100, 300).

Dessin de formes personnalisées

Pour dessiner des formes personnalisées, combinez les méthodes de dessin de base du Canvas. Voici un exemple de dessin d’une étoile.

# Dessiner une étoile
canvas.create_polygon(250, 300, 275, 350, 225, 350, 250, 300, 300, 325, 200, 325, outline="blue", fill="lightblue", width=2)

Ce code dessine une étoile.

Dessin de courbes de Bézier

Les courbes de Bézier sont dessinées avec la méthode create_line en spécifiant les points de contrôle, et l’option smooth=True.

# Dessiner une courbe de Bézier
canvas.create_line(100, 400, 150, 450, 200, 350, 250, 400, smooth=True, fill="green", width=2)

Ce code dessine une courbe de Bézier lisse à l’aide de quatre points de contrôle.

Affichage d’images

Pour afficher des images sur le Canvas, utilisez la bibliothèque Pillow pour charger l’image et la placer sur le Canvas.

from PIL import Image, ImageTk

# Charger l'image
image = Image.open("example.png")
photo = ImageTk.PhotoImage(image)

# Afficher l'image
canvas.create_image(400, 400, image=photo, anchor=tk.CENTER)

Ce code affiche l’image à la position (400, 400) sur le Canvas.

Bases de l’animation

Cette section introduit les bases pour animer des formes, en utilisant Python et Tkinter pour créer des animations simples.

Implémentation d’une animation de base

Pour animer une forme sur le Canvas, mettez à jour sa position au fil du temps. L’exemple suivant déplace un cercle de gauche à droite.

import tkinter as tk

# Créer la fenêtre principale
root = tk.Tk()
root.title("Animation de base")

# Créer le Canvas
canvas = tk.Canvas(root, width=800, height=600, bg="white")
canvas.pack()

# Dessiner le cercle
ball = canvas.create_oval(50, 50, 100, 100, fill="blue")

# Fonction de mise à jour de l'animation
def move_ball():
    canvas.move(ball, 5, 0)  # Déplacer le cercle vers la droite
    canvas.after(50, move_ball)  # Appeler à nouveau cette fonction après 50 millisecondes

# Démarrer l'animation
move_ball()

# Démarrer la boucle principale
root.mainloop()

Dans ce code, la méthode canvas.move est utilisée pour déplacer le cercle de 5 pixels vers la droite, et la méthode after permet de répéter le mouvement toutes les 50 millisecondes.

Animer plusieurs formes

Il est possible d’animer plusieurs formes en même temps. L’exemple suivant montre comment déplacer un cercle et un carré à des vitesses différentes.

# Dessiner un carré
square = canvas.create_rectangle(200, 50, 250, 100, fill="red")

# Fonction de mise à jour de l'animation
def move_shapes():
    canvas.move(ball, 5, 0)  # Déplacer le cercle vers la droite
    canvas.move(square, -3, 0)  # Déplacer le carré vers la gauche
    canvas.after(50, move_shapes)  # Appeler à nouveau cette fonction après 50 millisecondes

# Démarrer l'animation
move_shapes()

Dans ce code, le cercle est déplacé de 5 pixels vers la droite, tandis que le carré est déplacé de 3 pixels vers la gauche.

Applications avancées de l’animation

Cette section explique comment créer des effets d’animation plus complexes, tels qu’une balle rebondissante ou des formes rotatives.

Balle rebondissante

Nous allons implémenter une animation où une balle rebondit lorsqu’elle atteint les bords du Canvas.

import tkinter as tk

# Créer la fenêtre principale
root = tk.Tk()
root.title("Balle rebondissante")

# Créer le Canvas
canvas = tk.Canvas(root, width=800, height=600, bg="white")
canvas.pack()

# Dessiner la balle
ball = canvas.create_oval(50, 50, 100, 100, fill="blue")

# Vitesse de la balle
dx = 5
dy = 3

# Fonction de mise à jour de l'animation
def move_ball():
    global dx, dy
    canvas.move(ball, dx, dy)
    pos = canvas.coords(ball)

    # Inverser la direction lorsque la balle touche les bords
    if pos[2] >= 800 or pos[0] <= 0:
        dx = -dx
    if pos[3] >= 600 or pos[1] <= 0:
        dy = -dy

    canvas.after(50, move_ball)

# Démarrer l'animation
move_ball()

# Démarrer la boucle principale
root.mainloop()

Dans ce code, la balle change de direction lorsqu’elle atteint les bords du Canvas, ce qui crée un effet de rebond.

Rotation de formes

Ensuite, nous allons implémenter une animation qui fait tourner une forme. Voici comment faire tourner un carré.

import math

# Dessiner un carré
square = canvas.create_polygon(400, 300, 450, 300, 450, 350, 400, 350, fill="red")

# Centre de rotation
cx, cy = 425, 325
angle = 0

# Fonction de mise à jour de l'animation
def rotate_square():
    global angle
    angle += 5
    angle_rad = math.radians(angle)

    # Calculer les nouvelles coordonnées
    new_coords = []
    for i in range(0, 8, 2):
        x = square_coords[i] - cx
        y = square_coords[i+1] - cy
        new_x = x * math.cos(angle_rad) - y * math.sin(angle_rad) + cx
        new_y = x * math.sin(angle_rad) + y * math.cos(angle_rad) + cy
        new_coords.extend([new_x, new_y])

    # Mettre à jour les coordonnées
    canvas.coords(square, *new_coords)
    canvas.after(50, rotate_square)

# Sauvegarder les coordonnées initiales du carré
square_coords = canvas.coords(square)

# Démarrer l'animation
rotate_square()

Ce code fait tourner le carré en utilisant une matrice de rotation pour calculer les nouvelles coordonnées de chaque sommet.

Interaction utilisateur

Cette section explique comment créer des interactions interactives avec des formes à l’aide des événements de la souris et du clavier.

Gestion des événements de la souris

Nous allons voir comment utiliser les événements de la souris pour interagir avec les formes. Voici un exemple de changement de couleur d’une forme au clic de la souris.

# Dessiner un cercle
circle = canvas.create_oval(200, 200, 300, 300, fill="green")

# Gestionnaire d'événement pour le clic de la souris
def change_color(event):
    canvas.itemconfig(circle, fill="purple")

# Associer l'événement clic au cercle
canvas.tag_bind(circle, "", change_color)

Ce code change la couleur du cercle de vert à violet lorsqu’il est cliqué.

Opérations de glisser-déposer

Voici comment déplacer une forme en utilisant le glisser-déposer.

# Dessiner un rectangle
rect = canvas.create_rectangle(400, 400, 500, 500, fill="orange")

# Enregistrer la position de départ du glisser
def start_drag(event):
    global drag_data
    drag_data = {"x": event.x, "y": event.y}

# Déplacer la forme
def on_drag(event):
    global drag_data
    dx = event.x - drag_data["x"]
    dy = event.y - drag_data["y"]
    canvas.move(rect, dx, dy)
    drag_data = {"x": event.x, "y": event.y}

# Associer les événements au rectangle
canvas.tag_bind(rect, "", start_drag)
canvas.tag_bind(rect, "", on_drag)

Ce code permet de déplacer le rectangle par glisser-déposer.

Gestion des événements clavier

Nous allons voir comment utiliser les événements du clavier pour interagir avec les formes. Voici un exemple de déplacement d’une forme avec les touches fléchées.

# Dessiner un cercle
circle = canvas.create_oval(100, 100, 150, 150, fill="blue")

# Gestionnaire d'événements pour les touches
def move_circle(event):
    if event.keysym == 'Up':
        canvas.move(circle, 0, -10)
    elif event.keysym == 'Down':
        canvas.move(circle, 0, 10)
    elif event.keysym == 'Left':
        canvas.move(circle, -10, 0)
    elif event.keysym == 'Right':
        canvas.move(circle, 10, 0)

# Associer l'événement des touches à la fenêtre
root.bind("", move_circle)

Ce code permet de déplacer le cercle vers le haut, le bas, la gauche ou la droite à l’aide des touches fléchées.

Exercices et solutions

Pour réviser et approfondir les connaissances acquises, cette section propose des exercices et leurs solutions.

Exercice 1 : Animation de plusieurs formes

Créez une animation où plusieurs formes (par exemple, un cercle et un carré) se déplacent sur des trajectoires différentes. Par exemple, le cercle peut se déplacer horizontalement, tandis que le carré se déplace verticalement.

Solution

import tkinter as tk

# Créer la fenêtre principale
root = tk.Tk()
root.title("Animation de plusieurs formes")

# Créer le Canvas
canvas = tk.Canvas(root, width=800, height=600, bg="white")
canvas.pack()

# Dessiner les

 formes
circle = canvas.create_oval(50, 50, 100, 100, fill="blue")
square = canvas.create_rectangle(200, 50, 250, 100, fill="red")

# Vitesse des formes
dx_circle = 5
dy_square = 5

# Fonction de mise à jour de l'animation
def move_shapes():
    global dx_circle, dy_square
    canvas.move(circle, dx_circle, 0)  # Déplacer le cercle horizontalement
    canvas.move(square, 0, dy_square)  # Déplacer le carré verticalement

    # Inverser la direction du cercle lorsque celui-ci touche les bords
    pos_circle = canvas.coords(circle)
    if pos_circle[2] >= 800 or pos_circle[0] <= 0:
        dx_circle = -dx_circle

    # Inverser la direction du carré lorsque celui-ci touche les bords
    pos_square = canvas.coords(square)
    if pos_square[3] >= 600 or pos_square[1] <= 0:
        dy_square = -dy_square

    canvas.after(50, move_shapes)

# Démarrer l'animation
move_shapes()

# Démarrer la boucle principale
root.mainloop()

Exercice 2 : Création de formes interactives

Créez une forme interactive qui change de couleur lorsqu’on clique dessus et que l’on peut déplacer en utilisant le glisser-déposer.

Solution

# Créer la fenêtre principale
root = tk.Tk()
root.title("Forme interactive")

# Créer le Canvas
canvas = tk.Canvas(root, width=800, height=600, bg="white")
canvas.pack()

# Dessiner le rectangle
interactive_rect = canvas.create_rectangle(300, 300, 400, 400, fill="green")

# Gestionnaire d'événement pour le clic de la souris
def change_color(event):
    current_color = canvas.itemcget(interactive_rect, "fill")
    new_color = "blue" if current_color == "green" else "green"
    canvas.itemconfig(interactive_rect, fill=new_color)

# Enregistrer la position de départ du glisser
def start_drag(event):
    global drag_data
    drag_data = {"x": event.x, "y": event.y}

# Déplacer la forme
def on_drag(event):
    global drag_data
    dx = event.x - drag_data["x"]
    dy = event.y - drag_data["y"]
    canvas.move(interactive_rect, dx, dy)
    drag_data = {"x": event.x, "y": event.y}

# Associer les événements au rectangle
canvas.tag_bind(interactive_rect, "", change_color)
canvas.tag_bind(interactive_rect, "", start_drag)
canvas.tag_bind(interactive_rect, "", on_drag)

# Démarrer la boucle principale
root.mainloop()

Conclusion

Dans cet article, nous avons expliqué en détail comment implémenter le dessin de formes et l’animation en utilisant Python et la bibliothèque Canvas. Nous avons commencé par l’installation des outils et des bibliothèques nécessaires, puis nous avons appris à dessiner des formes de base, des formes complexes, ainsi qu’à implémenter des animations simples et avancées. Nous avons également abordé l’interaction avec les utilisateurs à l’aide de la souris et du clavier. Enfin, des exercices pratiques ont été proposés pour vérifier les compétences acquises.

En utilisant ces connaissances, vous pouvez créer des animations plus complexes et interactives. La programmation avec Canvas est un excellent moyen d’apprendre en s’amusant grâce au retour visuel immédiat. Continuez à développer vos compétences en vous lançant dans des projets plus ambitieux d’animations ou d’applications interactives.