Transformation

Matrice

La matrice permet d'effectuer n'importe quelle transformation en appliquant sur les coordonnées de la forme d'origine 2 équations.

$$x^{\prime }=a\times x+c\times y+e$$

$$y^{\prime }=b\times x+d\times y+f$$

la fonction matrice possède 6 paramètres matrix(a b c d e f)

$$Transformation=\left[\begin{array}{ccc}a& c& e\\ b& d& f\end{array}\right]$$

Translation

<rect transform="translate(30, 40)" />
<rect transform="matrix(1, 0, 0, 1, 30, 40)" />

$$Translation=\left[\begin{array}{ccc}1& 0& 30\\ 0& 1& 40\end{array}\right]$$

$$x^{\prime }=x+30$$

$$y^{\prime }=y+40$$

Rotation

<rect transform="rotate(45)" />
<rect transform="matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)" />

$$Rotation=\left[\begin{array}{ccc}cos(\alpha )& -sin(\alpha )& 0\\ sin(\alpha )& cos(\alpha )& 0\end{array}\right]$$

$$x^{\prime }=x\times cos(\alpha )-y\times sin(\alpha )$$

$$y^{\prime }=x\times sin(\alpha )+y\times cos(\alpha )$$

Échelle

<rect transform="scale(0.5)" />
<rec transform="matrix(0.5, 0, 0, 0.5, 0, 0)" />

$$Échelle=\left[\begin{array}{ccc}0.5& 0& 0\\ 0& 0.5& 0\end{array}\right]$$

$$x^{\prime }=x\times 0.5$$

$$y^{\prime }=y\times 0.5$$

Inclinaison ou cisaillement

<rect transform="skewX(-15)" />

$$Inclinaison=\left[\begin{array}{ccc}1& tan(\alpha )& 0\\ 0& 1& 0\end{array}\right]$$

$$x^{\prime }=x+y\times tan(\alpha )$$

$$y^{\prime }=y$$

Y

$$Inclinaison=\left[\begin{array}{ccc}1& 0& 0\\ tan(\alpha )& 1& 0\end{array}\right]$$

$$x^{\prime }=x+y\times tan(\alpha )$$

$$y^{\prime }=y$$

Multiples transformations

Les transformations peuvent être combinés en les ajoutant les unes à la suite des autres.

Attention toutefois le système de coordonnées tout entier est transformé lui aussi

<rect transform="rotate(30) translate(0, 40) " />

Le déplacement en x de 40px s'effectue suivant le nouvel axe x qui a subit lui aussi une rotation de 30°

Multiplication de matrice

La multiplication de matrice s'effectue en

$$Resultant=\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\end{array}\right]\times \left[\begin{array}{ccc}{a}^{\prime }& c^{\prime }& e^{\prime }\\ b^{\prime }& d^{\prime }& f^{\prime }\\ 0& 0& 1\end{array}\right]=\left[\begin{array}{ccc}a\times a^{\prime }+c\times b^{\prime }& a\times c^{\prime }+c\times d^{\prime }& a\times e^{\prime }+c\times f^{\prime }+e\\ b\times a^{\prime }+d\times b^{\prime }& b\times c^{\prime }+d\times d^{\prime }& b\times e^{\prime }+d\times f^{\prime }+f\\ 0& 0& 1\end{array}\right]$$

$$Transformation=\left[\begin{array}{ccc}cos(30)& -sin(30)& 0\\ sin(30)& cos(30)& 0\\ 0& 0& 1\end{array}\right]\times \left[\begin{array}{ccc}1& 0& 40\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]=\left[\begin{array}{ccc}cos(30)& -sin(30)& cos(30)\times 40\\ sin(30)& cos(30)& sin(30)\times 40\\ 0& 0& 1\end{array}\right]$$

Origine de la transformation

la propriété transform-origin permet de sélectionner l'origine de la transformation. C'est très utile dans le cas des rotations.

<rect x="50" y="25"  width="100" height="100"
transform="rotate(45)"  transform-origin="100 75"/>

L'origine de la transformation est située au milieu du carré.

Projection isométrique