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.

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.

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):

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

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

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.

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!

• Présentation des matrices et de la multiplication: Maths. Les matrices 2×2, et multiplier des points par des matrices
• Les matrices c'est super, mais à quoi ça sert? Que faire de cette multiplication. La transformation des images.
• Utilisation des matrices en Actionscript: Premières applications en Actionscript.
• Anticiper le résultat de la transformation géométrique par une matrice: Mieux comprendre l'effet de la transformation.
• Matrices et translations: L'arrivée des translation avec les matrices 3×3 et les coordonnées homogènes.
• Transformations successives par matrices: Enchaîner plusieurs transformations avec une même matrice.
• Exemples d'applications avec les matrices: Trois applications Actionscript.
• Matrix, x, y, scaleX, scaleY, et rotation: Eclaircissements pour intégrer l'utilisation des matrices et les autres méthodes de transformation.
• Conclusion

Page suivante >>