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' = a\times x + c\times y + e $$

$$ y' = b\times x + d\times y + f $$

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

$$ Transformation = \begin{bmatrix} a & c & e \\ b & d & f \end{bmatrix} $$

Translation

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

$$ Translation = \begin{bmatrix} 1 & 0 & 30 \\ 0 & 1 & 40 \end{bmatrix} $$

$$ x' = x + 30 $$

$$ y' = y + 40 $$

Rotation

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

$$ Rotation = \begin{bmatrix} cos(\alpha) & -sin(\alpha) & 0 \\ sin(\alpha) & cos(\alpha) & 0 \end{bmatrix} $$

$$ x' = x\times cos(\alpha) - y\times sin(\alpha) $$

$$ y' = 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 = \begin{bmatrix} 0.5 & 0 & 0 \\ 0 & 0.5 & 0 \end{bmatrix} $$

$$ x' = x\times0.5 $$

$$ y' = y\times0.5 $$

Inclinaison ou cisaillement

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

$$ Inclinaison = \begin{bmatrix} 1 & tan(\alpha) & 0 \\ 0 & 1 & 0 \end{bmatrix} $$

$$ x' = x + y\times tan(\alpha) $$

$$ y' = y $$

Y

$$ Inclinaison = \begin{bmatrix} 1 & 0 & 0 \\ tan(\alpha) & 1 & 0 \end{bmatrix} $$

$$ x' = x + y\times tan(\alpha) $$

$$ y' = 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 = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} a' & c' & e' \\ b' & d' & f' \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} a\times a' + c \times b' & a \times c' + c \times d' & a \times e' + c \times f' + e \\ b\times a' + d \times b' & b \times c' + d \times d' & b \times e' + d \times f' + f \\ 0 & 0 & 1 \end{bmatrix} $$

$$ Transformation = \begin{bmatrix} cos(30) & -sin(30) & 0 \\
sin(30) & cos(30) & 0 \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 40 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} cos(30) & -sin(30) & cos(30) \times 40 \\ sin(30) & cos(30) & sin(30) \times 40 \\ 0 & 0 & 1\end{bmatrix} $$

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