Déplacer une forme avec une matrice
Une transformation 2D déplace, tourne ou agrandit tous les points d’une forme avec une seule opération : le produit par une matrice. C’est ainsi qu’un jeu fait tourner un personnage ou qu’une application zoome sur une carte.
Une matrice est un petit tableau de nombres. Vous allez voir qu’il suffit de la lire ligne par ligne.
À la fin de cette leçon
Remarque
Je peux déplacer, tourner et agrandir un point avec une matrice 3 sur 3.
Mots clés
| Mot | Ce que ça veut dire |
|---|---|
| Matrice | un tableau de nombres, en lignes et en colonnes |
| Translation | un déplacement, sans tourner ni agrandir |
| Rotation | un tour autour de l’origine |
| Homothétie | un agrandissement ou une réduction |
| Coordonnées homogènes | un point (x, y) écrit (x, y, 1) |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Pourquoi un point a-t-il trois nombres ?
Une matrice 2 sur 2 sait tourner et agrandir, mais pas déplacer. Pour que la translation entre dans la même opération, on ajoute un 1 au bout du point : (x, y) devient (x, y, 1).
La matrice a alors trois lignes et trois colonnes. Ce 1 s’appelle la coordonnée homogène.
Chaque ligne de la matrice donne un nombre
Pour appliquer une matrice à un point, on prend chaque ligne. On multiplie ses trois nombres par x, y et 1, puis on additionne.
La première ligne donne le nouveau x, la deuxième le nouveau y. La troisième ligne reste (0, 0, 1) et redonne le 1 de la fin.
Exemple travaillé : trois matrices, un point
| Transformation | Matrice (ligne par ligne) | Nouveau x | Nouveau y |
|---|---|---|---|
| Translation de (5, 2) | [1, 0, 5], [0, 1, 2], [0, 0, 1] | 3 + 5 = 8 | 4 + 2 = 6 |
| Agrandir deux fois | [2, 0, 0], [0, 2, 0], [0, 0, 1] | 2 × 3 = 6 | 2 × 4 = 8 |
| Quart de tour | [0, -1, 0], [1, 0, 0], [0, 0, 1] | −4 | 3 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Appliquer une translation à la main
# Appliquer une matrice 3 x 3 à un point (x, y), écrit (x, y, 1).
matrice = [[1, 0, 5], [0, 1, 2], [0, 0, 1]]
point = [3, 4, 1]
resultat = []
for ligne in matrice:
resultat.append(ligne[0] * point[0] + ligne[1] * point[1] + ligne[2] * point[2])
print(resultat)
# Remplacez les 5 et 2 de la matrice par 10 et 0 : où va le point ?
Translater et tourner un point avec NumPy
docker exec jupyter python3 -c "import numpy as np; t=np.array([[1,0,5],[0,1,2],[0,0,1]]); r=np.array([[0,-1,0],[1,0,0],[0,0,1]]); p=np.array([3,4,1]); print(t@p, r@p)"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
L’ordre des transformations compte
La commande affiche [8 6 1] [-4 3 1] : la translation envoie (3, 4) sur (8, 6), le quart de tour sur (−4, 3). Le symbole @ est le produit de matrices en NumPy.
Combiner deux transformations se fait en les multipliant, et la première appliquée est celle de droite. Tourner puis translater n’est pas la même chose que translater puis tourner.
Tourner puis translater, ou l’inverse
docker exec jupyter python3 -c "import numpy as np; t=np.array([[1,0,5],[0,1,2],[0,0,1]]); r=np.array([[0,-1,0],[1,0,0],[0,0,1]]); p=np.array([3,4,1]); print(t@(r@p), r@(t@p))"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Une erreur fréquente
Attention
Beaucoup pensent que l’ordre des transformations n’a pas d’importance. Ce n’est pas juste : la commande affiche [1 5 1] pour tourner puis translater, et [-6 8 1] pour translater puis tourner. Le résultat change dès que l’ordre change.
Une rotation utilise le cosinus et le sinus
Pour un angle quelconque, la matrice de rotation contient le cosinus et le sinus de l’angle. Pour 30 degrés, le cosinus vaut environ 0,866 et le sinus 0,5.
Dans une image, l’axe des y descend : une rotation positive tourne alors dans le sens des aiguilles d’une montre à l’écran. Un quart de tour a un cosinus de 0 et un sinus de 1, donc des nombres entiers.