Transformations 2D

Lorsque nous dessinons sur nos écrans, nous travaillons sur une grille, une matrice. Dans le cas d’une réalisation de maquette pour un site web, nous travaillons, par exemple, sur des .psd de 1280*1024 soit une grille de pixels de 1280*1024, c’est notre matrice. Nous plaçons ensuite nos éléments sur cette grille. Il en est de même avec processing où notre grille commence au point d’origine 0, 0 pour finir au point width, height.
Nous allons voir comment manipuler cette matrice.

matrice-01-01

Déplacements de matrice

Par défaut le point d’origine (0, 0) de notre matrice se trouve au coin supérieur gauche de notre programme mais il peut être facilement déplaçable.

Déplacer une matrice signifie que l’on décale son point d’origine à un autre endroit. Cela nous donne un autre point de vue et change notre système de géométrie.
Il peut être pratique de déplacer son point d’origine au centre du programme, notamment lorsque nous souhaitons réaliser un programme en symétrie. Ainsi dans le cas d’un rectangle de position 10, 10 dans une symétrie axiale, dont le point d’origine sera le centre de notre programme, le second rectangle aura une position de -10, 10 soit l’inverse de la position x du premier rectangle.

matrice-02-02

Afin d’effectuer un déplacement de matrice dans processing, nous utilisons la méthode suivante :

Cela aura pour effet de déplacer la matrice de x pixels en latéral et y pixels en vertical. Le point d’origine 0,0 sera alors en x, y.
Il est important de savoir que cette méthode est cumulative, c’est à dire que si nous effectuons, tout au long de notre code, les méthodes suivante :

Cela aura pour effet de déplacer une première fois notre matrice en 10,10 puis en 20, 20 puis en 30, 30. Nous devrons donc effectuer un déplacement inverse si nous souhaitons repositionner la matrice à son premier point d’origine.

matrice-03-03

Sauvegarde du point d’origine avant transformation

Afin d’éviter de nombreuses transformations retour durant notre code, il est possible d’isoler notre déplacement de matrice à l’aide des méthodes suivante :

pushMatrix() permet à un instant T d’enregistrer les coordonnées du point d’origine afin de pouvoir les restituer à l’aide de la commande popMatrix()

À l’exécution de ce code, la matrice se déplacera en position x, y lors de la méthode translate(), puis reviendra à son point d’origine lors de la méthode popMatrix(). Cela nous permet donc de changer notre géométrie à un instant T et de dessiner l’ensemble de nos formes voulues dans ce nouveau système de géométrie encadrée par les méthodes pushMatrix(); popMatrix();

matrice-04-04

Rotations de matrice

La rotation d’un élément est un cas particulier. Pour bien comprendre son fonctionnement revenons au point de vue microscopique de notre espace de travail, le pixel.
Nous souhaitons dessiner un rectangle de position 10, 10 et de taille 10, 10.

puis nous souhaitons effectuer un rotation de 45° de ce même rectangle. Le pixel est un élément dessiné, 0 ou 1, plein ou vide, il ne peut être rempli de manière partielle.
Lorsque nous effectuons ce genre de manipulation dans photoshop, notre logiciel dessine notre diagonale sous forme de pixels pleins ou vides.

matrice-05-05

Cette transformation utilisée par photoshop n’est pas la plus simple à réaliser et processing utilise un autre méthode.
Au lieu de redessiner les pixels de notre rectangle, nous allons effectuer une rotation de notre espace de coordonnées à l’aide la méthode suivante :

Cette méthode permet donc faire faire une rotation à notre matrice et ce depuis son point d’origine.

matrice-06-06

Pour obtenir notre rectangle à une véritable position 10, 10 et ayant effectué une rotation à 45° nous devront donc déplacer la matrice un premier temps, puis effectuer la rotation.

matrice-07-07

Cela se traduira en code par :

Exemple

Dans l’exemple suivant, nous allons réaliser un grille de 20*20 pixels contenant des rectangles de 18 pixels. Nous souhaitons que ces rectangles effectuent des rotations lorsque la souris passera en roll over dessus.

Pour cela nous allons partir d’une classe de rectangle relativement simple possédant les variables suivante :

  • position x
  • position y
  • largeur
  • hauteur
  • couleur aléatoire
  • angle
  • vitesse de l’angle

Nous allons ajouter une méthode display() qui affichera nos rectangles et sera appelée par la méthode run().
C’est dans cette méthode que nous effectuerons nos transformations de matrice, c’est à dire untranslate() à la position du rectangle ainsi qu’un rotate() de la valeur de l’angle.

Puis nous réalisons une méthode updateAngle() dans laquelle nous effectuerons une rotation de l’angle et qui sera appelée si notre souris est en roll over sur notre rectangle

Nous pouvons maintenant revenir dans notre feuille principale afin de réaliser notre grille. Pour cela nous allons utiliser un ArrayList<>() pour stocker nos objets et une double boucle for pour réaliser notre grille.

Dans notre draw() nous réalisons ensuite une boucle for sur l’ensemble de notre tableau d’objets afin de les afficher. Puis nous comparons la position de notre souris avec chacun des rectangles. Si un rectangle se trouve sous la souris, celui-ci effectuera une rotation à l’aide de sa méthode updateAngle()

Nous obtenons alors le résultat escompté.