Translation ou traduction

Quand vous créez un programme, ici, en utilisant ProcessingJS, l'affichage se fait dans une zone de dessin qui agit comme un morceau de papier quadrillé. Pour dessiner une forme, vous spécifiez ses coordonnées sur ce quadrillage.

Par exemple, voici un simple rectangle dessiné avec le code rect(20, 20, 40, 40). Le système de coordonnées (un terme plus chic pour désigner le "papier quadrillé") est affiché en gris. Pour que notre exemple ne soit pas trop grand, le système de coordonnées utilisé est de 200 pixels sur 200 pixels (au lieu des 400 x 400 normaux).

Si vous voulez déplacer le rectangle de 60 unités vers la droite et de 80 unités vers le bas, il suffit juste de modifier les coordonnées du point de départ, x et y : rect(20 + 60, 20 + 80, 40, 40) et le rectangle va apparaître à cet autre endroit. (Nous avons placé une flèche ici pour faire un petit effet.)

Mais il existe un meilleur procédé pour faire cela : déplacer le papier quadrillé à la place. Si vous déplacez le papier quadrillé de 60 unités vers la droite et de 80 unités vers le bas, vous obtiendrez exactement le même résultat visuel. Un déplacement du système de coordonnées est appelé une translation.

La chose la plus importante à constater dans le schéma précédent est que, pour autant que le rectangle est concerné, il n'a pas bougé. Son coin supérieur gauche est toujours à (20, 20). Quand vous utilisez des transformations, ce que vous dessinez ne changent pas d'emplacement. C'est le système de coordonnées qui bouge !

Voici un programme qui dessine le rectangle d'origine, puis, qui le dessine en rouge, au nouvel emplacement après avoir modifié ses coordonnées, et enfin, qui le dessine en bleu, au nouvel emplacement en déplaçant la grille (en la translate()ant ). Les couleurs de remplissage sont translucides, afin que vous puissiez voir le bleu et le rouge coïncider pour former un carré violet, qui est virtuellement à la même place. Seule la méthode utilisée pour faire le déplacement est différente. Jouez avec les nombres ci-dessous pour constater par vous-même :

Examinons plus en détail le code de la translation. pushMatrix() est une fonction intégrée qui enregistre la position actuelle du système de coordonnées. translate(60, 80) déplace le système de coordonnées de 60 unités vers la droite et de 80 unités vers le bas. rect(20, 20, 40, 40) dessine un rectangle toujours au même emplacement. Rappelez-vous, ce que vous dessinez ne bouge pas (c'est le système de coordonnées qui le fait). Enfin, popMatrix() restaure le système de coordonnées, comme il était avant de faire la translation.

Pourquoi utiliser pushMatrix() et popMatrix() ? On pourrait faire un translate(-60, -80) pour ramener le système de coordonnées à sa position initiale. Cependant, quand on commence à effectuer des opérations plus complexes avec le système de coordonnées, il est plus simple d'utiliser pushMatrix() et popMatrix(), pour enregistrer et restaurer l'état du système, plutôt que d'avoir à défaire toutes les opérations. Vous découvrirez un peu plus tard dans ce cours pourquoi ces deux fonctions portent ces étranges noms.

Vous pourriez penser que décrocher le système de coordonnées pour le déplacer est plus problématique que juste ajouter des valeurs aux coordonnées. Pour un exemple simple, comme avec le rectangle, vous avez raison. Mais prenons un exemple où l'utilisation de translate() va nous simplifier la vie.

Voici un programme qui dessine une rangée de maisons. Il utilise une boucle, qui appelle une fonction nommée drawHouse() (dessinerMaison), prenant les coordonnées x et y du coin supérieur gauche d'une maison en paramètres. Remarquez que la fonction drawHouse doit faire de nombreux calculs sur les paramètres pour dessiner la maison au bon endroit.

Et si nous utilisions la fonction translate() au lieu de faire tout les calculs sur les coordonnées ? Dans ce cas, le code de la fonction dessine la maison au même endroit à chaque fois, avec un coin supérieur gauche situé aux coordonnées (0, 0), et laisse la translation faire le reste du travail.

Cela ne signifie pas que vous devez toujours préférer translate() au calcul des nouvelles coordonnées. Comme pour une grande partie de ce qui est enseigné ici, translate() est un outil supplémentaire dans votre boîte à outils, et ce sera à vous de déterminer quand et si il sera pertinent de l'utiliser.

Cet article est une adaptation des Transformations 2D par J David Eisenberg, utilisé sous licence Creative Commons Attribution-NonCommercial-ShareAlike.