Vous pouvez accéder au laboratoire ici: Laboratoire 3 code snippet

Les objets 2D sont définis dans un système cartésien de coordonnées 2D, par exemple, XOY, XOZ ou YOZ. Dans ce laboratoire, nous allons mettre en oeuvre différents types de transformations qui peuvent être appliqués à des objets définis dans le plan XOY: translation, rotation et mise à l'échelle. Ceux-ci sont définis dans un format de matrice, en coordonnées homogènes, comme vous l'avez déjà appris dans le cours. Les matrices de ces changements sont les suivants:

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t_x\\ 0 & 1 & t_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} cos(u) & -sin(u) & 0\\ sin(u) & cos(u) & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

La rotation relative à un certain point est résolu de cette façon:

1. translater les deux points: le point au qui on applique la rotation et le point autour duquel la rotation est faite de sorte que le dernier est positionné à l'origine du système de coordonnées.
2. La rotation normale (autour de l'origine)
3. translater les résultats de sorte que le point autour duquel la rotation a été fait atteindre sa position initiale

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} s_x & 0 & 0\\ 0 & s_y & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

Si $sx = sy$ alors nous avons mise à l'échelle uniforme, sinon l'échelle non-uniforme.

Le mise à l'échelle par rapport à un point arbitraire peut être résolu similaire à la rotation par rapport à un certain point.

Dans le laboratoire, on utilise, pour simplité, des matrices en forme colonne et une bibliothèque pour matrices implémentée avec exactement le même format que OpenGL. La forme colonne diffère de la forme ligne par l'ordre de stockage des éléments de la matrice dans la mémoire. La matrice de translation est représentée de la manière suivante dans la mémoire:

function Translate(tx, ty)
{
	return [
        	 1,  0, 0,     // colonne 1 en mémoire 
		 0,  1, 0,     // colonne 2 en mémoire
		tx, ty, 1];    // colonne 3 en mémoire
 
}

Pour cette raison, il est plus commode que la matrice être écrite manuellement dans cette forme:

function Translate(tx, ty)
{
	return TransposeMat3(
		         [ 1, 0, tx, 
			   0, 1, ty, 
			   0, 0, 1]
	); 
}

Pourquoi sont les matrices nécessaires? Pour représenter par une seule matrice de transformation une séquence de transformations élémentaires, au lieu d’appliquer une séquence de transformations élémentaires sur un objet.

Donc, si nous appliquons une rotation, une mise à l'échelle et une translation sur un objet, nous ne faisons pas la rotation de l'objet, l' échellage d’objet suivi par son translation, mais nous calculons une matrice qui représente la transformation composé (rotation, mise à l'échelle et la translation) et nous appliquons cette transformation composé sur l'objet qui doit être transformé.

Ainsi, si nous appliquons une rotation (la matrice de rotation $R$), suivie par un mise à l'échelle ($S$), suivie d'une translation ($T$) sur un point ($x$, $y$), le pointe tournée (${x}'$,${y}'$) est calculé comme suit:

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t_x\\ 0 & 1 & t_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} sx & 0 & 0\\ 0 & sy & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} cos(u) & -sin(u) & 0\\ sin(u) & cos(u) & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

Ainsi, la matrice de transformation composée $M$ est $M = T * S * R$.

   modelMaxtrix = m3.identity();
   modelMaxtrix = m3.multiply(modelMaxtrix,Translate(-1,-1));
   RenderMesh2D(redsquare,modelMaxtrix);

tx += deltaTimeSeconds * 1;
ty += deltaTimeSeconds * 1;
modelMaxtrix = m3.multiply(modelMaxtrix,Translate(tx,ty ));

1. Accessez le laboratoire, dupliquer (Fork) et exécutez le projet (Preview): Laboratoire 3 code snippet
2. Complétez la rotation et la mise à l'échelle à partir du /lab/lab3.js
3. Modifier les étapes de translation, de rotation et de mise à l'échelle des trois carrés pour créer une animation.
4. Dessinez une voiture qui se déplace (composée de la carrosserie et des roues) de manière synchrone. Le corps peut être un rectangle et les roues sont des cercles ou des carrés. Les roues doivent tourner en continu ou en mouvement. Utilisez le clavier pour déplacer la voiture