Les matrices de transformation affine du plan (Matrix en Actionscript)

Dans ce tutoriel nous allons voir comment utiliser les matrices pour effectuer des transformations géométriques sur des objets en 2 dimensions, en infographie: déplacements, changement d'échelle, rotation, symétrie, inclinaisons.

Nous allons voir les bases mathématiques nécessaires pour comprendre les matrices, puis leur utilisation en Actionscript 3. Les programmeurs en Actionscript 2 pourront également suivre toutes les explications. La classe Matrix est à peu de chose près la même dans les deux versions du langage. Les programmeurs dans d'autres langages pourront profiter de toute la partie théorique.

Le problème qui peut se poser avec les matrices est qu'il faut avoir fait des maths assez longtemps (après le baccalauréat en France) pour en avoir entendu parler dans ses études. Ce n'est pas que ce soit un sujet spécialement difficile, mais voilà, si on ne connaît pas la théorie il est un peu difficile de s'en sortir seul.

Pour pouvoir suivre ce tutoriel il vous faut savoir faire des additions, des multiplications, et savoir comment on repère les points du plan avec un système de coordonnées (x,y). Si vous connaissez tout cela, je crois que vous ne devriez pas rencontrer de difficulté. Si vous êtes encore peu sûrs de vous avec ces notions de points dans le plan et de coordonnées, vous devriez commencer par là, et revenir ici plus tard, si besoin.

On pourrait sûrement faire un tutoriel plus court sur l'utilisation des matrices en Actionscript, et passer sur la théorie pour aller directement à la pratique. J'ai choisi d'expliquer la théorie. Du coup le tutoriel est plus long, mais je pense que l'avantage est qu'il donne les moyens de maîtriser complètement ce qu'on peut faire avec les matrices.

En Actionscript 3, il est possible très simplement d'agir sur l'affichage des objets en jouant sur leurs coordonnées (propriétés x et y), leur échelle horizontale et verticale (scaleX et scaleY), et leur angle de rotation (propriété rotation). Les propriétés équivalentes en Actionscript 2 sont _x, _y, _xscale, _yscale et _rotation. Avec ceci il est possible de réaliser les transformations géométriques les plus communes. Pourquoi alors s'embêter avec les matrices ? Parce-que dans certains cas elles vont énormément simplifier les choses, et que dans d'autres cas on ne pourra simplement pas les éviter. Alors pour vous allécher voici quelques exemples commentés d'utilisation des matrices, avant d'attaquer pour de bon.

Exemples

Incliner une image

Le premier avantage des matrices en Actionscript, c'est qu'elles permettent de jouer sur l'inclinaison des objets. Il n'est pas possible de faire sans pour réaliser le résultat suivant (passez la souris sur l'image pour l'incliner):

Rotation autour d'un autre point que le point d'alignement

Pour faire pivoter un objet, il faut connaître l'angle de rotation qu'on veut lui donner, et également le point autour duquel il va pivoter. en Actionscript, la propriété rotation permet de modifier très simplement l'angle que fait l'objet avec l'horizontale. Par contre, sans les matrices, il est assez difficile de modifier le point de pivot, même s'il est mathématiquement possible d'agir sur les coordonnées x et y de l'objet pour y arriver, avec des notions de trigonométrie. Avec les matrices, pas besoin de savants calculs.

Déplacez la souris sur l'image de départ (l'image grisée) pour définir le point autour duquel elle doit pivoter. Le résultat est immédiatement appliqué sur l'image en rotation.

Application inspirée de cette discussion du forum.

Nous réaliserons ceci au paragraphe 7

Sources de l'application (Flash CS3 et Flex)

Zoomer sur un point d'une image

Un autre problème que l'on peut rencontrer est la question de “zoomer” sur un point précis d'une image. Si les propriétés scaleX et scaleY d'Actionscript permettent de facilement changer l'échelle de l'image, il est parfois plus délicat de calculer les coordonnées x et y à donner à l'image pour que le zoom se fasse sur le point voulu. Là encore, les matrices offrent un moyen simple de s'en sortir.

Cliquez sur la loupe que vous voulez utiliser, puis cliquez sur l'image avec la loupe:

(Icônes des loupes crées par FatCow Web Hosting, licence Creative Commons (Attribution 3.0 United States))

Avec les matrices le calcul prend trois lignes de code. Sans elles il en faut beaucoup plus. Nous réaliserons cette application au paragraphe 7

Sources de l'application (Flash CS3)

Utiliser avec les BitmapData

Pour finir, notons qu'il est difficile d'éviter les matrices quand on travaille avec la méthode draw des BitmapDatas d'Actionscript. Cette méthode permet de dessiner sur une image avec une autre image. Voici une petite réalisation qui le fait. Il ne s'agit pas là d'un même objet qui a été affiché de multiples fois, en laissant le soin à Flash de générer l'image résultante de leurs superpositions, mais bien d'une seule image sur laquelle un “pinceau” a été appliqué plusieurs fois. Cliquer sur le bouton pour voir le dessin se refaire.

L'avantage de cette façon de procéder, c'est qu'une fois l'image crée, Flash n'a plus à recalculer le résultat. C'est une optimisation souvent indispensable.

Sources de l'application (Flash CS3 et Flex)

C'est parti!

Après ce petit aperçu, que l'on pourrait enrichir à l'envie, si vous estimez que les matrices peuvent être l'outil qu'il vous faut, et bien… c'est parti!