doc-svg/transformation/index.md

layout, title, date, type, eleventyComputed

layout	title	date	type	eleventyComputed
layouts/math.njk	Transformation	Last Modified	post	meta author published modified name {{ metadata.author.name }} {{ date | iso8601 }} {% if updateDate %}{{ updateDate | iso8601 }}{% endif %}

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