Archives par mot-clé : rotation

Espace 3D et formes primitive – [initiation]

L’espace tridimensionnelle cartésien est un espace assez simple à aborder. Il possède l’ensemble des propriétés de l’espace cartésien bidimensionnel à cela prêt que l’ajout d’une dimension offre une nouvelle perspective : la profondeur.

Cet espace est habituellement représenté par les axe X, Y, Z suivant :

espace3D-01

Afin de comprendre cet espace il est important de connaitre le sens des différents axes.
Nous savons que par convention, l’espace bidimensionnel de notre programme est inversé, notre point d’origine 0,0 étant en haut à gauche, les x s’incrémentant de gauche à droite et les y s’incrémentant de haut en bas. De la cas de l’axe Z, celui-ci va en se décrémentant. Ainsi un objet loin de notre point de vue aura une position z inférieur de celle d’un objet proche de notre point de vu.
Nous obtenons alors le schéma suivant :

espace3D-02

Enfin il est important de noter que la position z de notre « oeil » ou point de vue sera de 0 par défaut. Celui-ci regardant dans le sens inverse nous observons alors que notre axe z visible sera un axe inférieur à 0 et se décrémentant. Il sera donc négatif.

L’espace tridimensionnel rajoute donc un concept de point de vu qu’il sera important de maîtriser afin de déplacer son point de vue dans son espace.

Transformations de matrice afin de déplacer son point de vue

Afin de maîtriser son point de vue et donc la position dans un espace nous allons utiliser une méthode vue précédemment pour changer un système de coordonnées, les transformations de matrice.
Nous savons qu’il nous est possible de déplacer notre point d’origine où l’on souhaite dans notre programme et ce sur un axe XY. Il en est de même pour un espace 3D. Dans l’exemple suivant nous allons dessiner un rectangle de taille 20, positionner en 0,0 puis nous verrons comment en changer son point de vue à l’aide des transformations de matrices.

Lorsque nous dessinons notre rectangle en position 0,0,0 nous obtenons l’image suivante.

Notre rectangle, de position 0,0,0 n’est visible que de moitié. Si nous souhaitons le placer au centre de notre programme tout en conservant sa position nous utiliserons une transformation de matrice. Il est est de même si nous souhaitons changer sa position sur l’axe Z. Ainsi nous pouvons obtenir les transformations suivante :

Dans notre cas nous allons positionner notre rectangle en z -100 et au centre de notre programme.

Rotations de matrice

Nous savons, dans un espace bidimensionnel, qu’il nous est possible d’effectuer un rotation de notre objet par le biais d’une rotation de matrice. Cette transformation nous est toujours possible dans un espace 3D en devenant plus précise puisque nous pouvons désormais effectuer des rotations sur un axe choisi.

espace3D-03

Pour ce faire nous allons utiliser les méthodes suivantes

Si nous reprenons notre exemple ci-dessus et que nous appliquons à chacun des axes X,Y,Z un angle s’incrémentant respectivement de 0.01, 0.02, 0.03 radians, nous obtenons alors de notre objet rectangle, une rotation différente sur chacun de ses axes.

Formes primitives

Comme pour l’espace 2D, processing possède des formes primitives en 3D, celle-ci nous permettent d’obtenir rapidement une forme 3D sans avoir à dessiner l’ensemble de ses sommets.
Les deux principales formes primitives sont la box et la sphère.

Nous remarquons qu’aucune de ses formes primitives ne possèdent de position x,y,z, ces dernières devant être définies par des transformations de matrice.
Certaines formes primitives 2D sont elle aussi disponible dans un espace 3D par le simple ajout d’une position z.

Enfin, comme nous l’avons vu précédemment, il nous est toujours possible d’utiliser des formes primitives 2D (rect, quad, triangle…) dans un espace 3D lorsque nous utilisons des transformations de matrice.

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é.