Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par lilive (Olivier Tarasse), le 04 mars 2010

Navigation:
Introduction
Présentation des matrices et de la multiplication
Les matrices c'est super, mais à quoi ça sert?
Utilisation des matrices en Actionscript
[ Anticiper le résultat de la transformation géométrique par une matrice ]
Matrices et translations
Transformations successives par matrices
Exemples d'applications avec les matrices
Matrix, x, y, scaleX, scaleY, et rotation
Conclusion

Anticiper le résultat de la transformation géométrique par une matrice

Pour l'instant, il est plutôt difficile de comprendre quelles valeurs a, b, c et d donner à la matrice pour obtenir tel ou tel type de transformation géométrique. Nous allons éclaircir ici le rapport entre les valeurs de la matrice et l'effet obtenu. Cela va devenir un tout petit peu plus dur pour les neurones des non matheux, mais j'ai essayé de bien détailler. Courage à eux, les autres vont se régaler :). La récompense pourra être d'enfin lever le voile sur cet obscur sujet, en comprenant comment ça marche.

Transformation de deux point particuliers

I et J

Nous allons nous intéresser à 2 points bien particuliers, qui sont le point I

et le point J


Regardons ce que nous donne la transformation de ces 2 points par une matrice M quelconque


Pour le point I

Soit:


Pour le point J

Soit:


I, J et la matrice

Nous voyons que quelque soit la matrice M, le point I transformé par la matrice M est un point dont les coordonnées sont a et b.
Et le point J transformé par la matrice M est un point dont les coordonnées sont c et d.

Voici une petite application qui:
- Affiche le point I et le point J en vert. Les dimensions sont grossies 200 fois sinon on ne verrait pas grand chose.
- Affiche en rose les deux points résultants de la transformation de I et J par la matrice affiché en bleu.
- Vous pouvez modifier les valeurs de la matrice avec les curseurs. Vous voyez que les coordonnées des points roses prennent bien pour coordonnées (a, b) et (c, d)
- Vous pouvez faire glisser à la souris les points roses, et la matrice s'ajuste en fonction.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour l'instant l'intérêt semble limité. Mais en fait nous sommes en train de découvrir à quoi correspondent graphiquement les valeurs de a, b, c, et d. Allons plus loin:


Transformation du "carré unitaire"

Je vais appeler “carré unitaire” le carré dont les sommets sont le points (0,0), le point I, le point J et le point (1,1). Voici représenté ce carré, grossi 200 fois:

Pour visualiser la transformation définie par le placement des 2 points roses, nous allons regarder ce que devient le carré unitaire quand il est transformé par la matrice dont les valeurs sont les coordonnées des points roses. La transformation du carré unitaire apparaît en rose, et vous pouvez comme tout à l'heure manipuler les curseurs ou faire glisser les points roses avec la souris:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ha ha, on commence à y voir plus clair, non?


Transformation d'une image

On commence à avoir une meilleure idée de la relation entre les valeurs a, b, c et d et la transformation géométrique associée. Pour confirmer notre impression, transformons maintenant une image avec la même matrice:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Nous voyons clairement (j'espère ;)) la relation entre les valeurs de la matrice et la transformation qui en résulte. Il devient possible de comprendre quelles valeurs donner à la matrice pour obtenir telle ou telle transformation géométrique.

Pour réaliser la transformation voulue, il suffit d'imaginer la forme que doit prendre le carré unitaire, et de donner à la matrice les valeurs des coordonnées des points I et J.

Nous voyons de quelle façon modifier a, b, c et d pour obtenir des changements d'échelle, des inclinaisons, des effets de miroir et des rotations, comme l'indique la documentation de la classe flash.geom.Matrix. Les rotations restent le cas où il est le plus difficile de choisir a, b, c et d. Pour être sûr de choisir “à la main” les bonnes valeurs, il faut utiliser la trigonométrie, mais je n'entrerais pas dans ce détail ici. Les rotations d'un quart ou d'un demi-tour restent plus facile à retrouver.

A titre d'exercice vous pouvez essayer de reproduire les transformations suivantes:

Nous verrons plus tard que les méthodes de la classe Actionscript Matrix vont encore nous simplifier la vie pour choisir a, b, c et d. Tellement nous la simplifier que nous pourrons même éviter d'y toucher, et demander à des méthodes de calculer ces valeurs pour nous, en fonction de l'effet que nous désirons.

Mais en attendant ce grand moment, nous allons nous pencher sur un point que j'avais laissé de côté pour simplifier mes explications, mais que je ne peux décemment passer plus longtemps sous silence, j'ai nommé: les translations.

Page suivante >>