Récupération du cours SVG
This commit is contained in:
285
transformation/index.md
Executable file
285
transformation/index.md
Executable file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
layout: layouts/math.njk
|
||||
title: Transformation
|
||||
date: Last Modified
|
||||
|
||||
type: post
|
||||
eleventyComputed:
|
||||
meta:
|
||||
author:
|
||||
name: "{{ metadata.author.name }}"
|
||||
published: "{{ date | iso8601 }}"
|
||||
modified: "{% 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)`
|
||||
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="50" y="25" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<rect x="50" y="25" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="matrix(0.5 0.866 -0.5 0.7 30 10)" transform-origin="100 75"/>
|
||||
</svg>
|
||||
|
||||
$$
|
||||
Transformation =
|
||||
\begin{bmatrix}
|
||||
a & c & e \\\
|
||||
b & d & f
|
||||
\end{bmatrix}
|
||||
$$
|
||||
|
||||
## Translation
|
||||
|
||||
<svg width="0" height="0">
|
||||
<defs>
|
||||
<pattern id="tenthGrid" width="25" height="25" patternUnits="userSpaceOnUse">
|
||||
<path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<pattern id="fiftygrid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||||
<rect width="50" height="50" fill="url(#tenthGrid)"/>
|
||||
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="gray" stroke-width="1"/>
|
||||
</pattern>
|
||||
<symbol id="grid">
|
||||
<rect width="100%" height="100%" fill="url(#fiftygrid)"/>
|
||||
<path d="M 500 0 L 500 250 0 250" fill="none" stroke="gray" stroke-width="1"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<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
|
||||
$$
|
||||
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="translate(50,25)"/>
|
||||
</svg>
|
||||
|
||||
## Rotation
|
||||
|
||||
```svg
|
||||
<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)
|
||||
$$
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<circle r="177" fill="none" stroke="yellow"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="rotate(45)"/>
|
||||
</svg>
|
||||
|
||||
## Échelle
|
||||
|
||||
```svg
|
||||
<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
|
||||
$$
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="75" y="70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<rect x="75" y="70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="scale(0.5)"/>
|
||||
</svg>
|
||||
|
||||
## Inclinaison ou cisaillement
|
||||
|
||||
```svg
|
||||
<rect transform="skewX(-15)" />
|
||||
```
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="50" y="10" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<rect x="50" y="10" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="skewX(-15)"/>
|
||||
</svg>
|
||||
|
||||
$$
|
||||
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
|
||||
|
||||
```svg
|
||||
<rect transform="rotate(30) translate(0, 40) " />
|
||||
```
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="rotate(30)" opacity= "0.5"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="rotate(30) translate(40,0)"/>
|
||||
</svg>
|
||||
|
||||
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}
|
||||
$$
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="rotate(30)" opacity= "0.5"/>
|
||||
<rect x="75" y="-70" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="matrix(0.866 0.5 -0.5 0.866 34.64 20)"/>
|
||||
</svg>
|
||||
|
||||
## 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.
|
||||
|
||||
```svg
|
||||
<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é.
|
||||
|
||||
<svg width="500" height="150">
|
||||
<use href="#grid"/>
|
||||
<rect x="50" y="25" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" opacity= "0.5"/>
|
||||
<rect x="50" y="25" width="100" height="100" stroke="red" stroke-width="2" fill="#3ed124" transform="rotate(45)" transform-origin="100 75"/>
|
||||
</svg>
|
||||
|
||||
[Projection isométrique](isometric)
|
||||
233
transformation/isometric/index.md
Executable file
233
transformation/isometric/index.md
Executable file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Projection isométrique
|
||||
date: Last Modified
|
||||
---
|
||||
|
||||
La perspective isométrique est une méthode de représentation en perspective (3D) dans laquelle les trois directions de l'espace sont représentées avec la même importance, d'où le terme. Les lignes parallèles le restent il n'y a pas de point de fuite comme dans la perspective cavalière.
|
||||
|
||||
### Méthode 1
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" />
|
||||
<rect x="200" y="50" width="50" height="50" fill="green" />
|
||||
<circle cx="200" cy="100" r="3"/>
|
||||
</svg>
|
||||
|
||||
1ère étape : **Rotation de 45°**
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="rotate(45)" transform-origin="200 100">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" />
|
||||
<rect x="200" y="50" width="50" height="50" fill="green" />
|
||||
</g>
|
||||
<circle cx="200" cy="100" r="3"/>
|
||||
<circle cx="200" cy="64.6447" r="3"/>
|
||||
<circle cx="164.6447" cy="100" r="3"/>
|
||||
<circle cx="235.3553" cy="100" r="3"/>
|
||||
</svg>
|
||||
|
||||
2e étape : **Déformation**
|
||||
|
||||
Pièce|X %|Y %
|
||||
---|--:|--:
|
||||
Rouge|100|57.73
|
||||
Bleu|57.73|100
|
||||
Vert|57.73|100
|
||||
|
||||
Il faut prendre soin d'appliquer la transformation depuis le centre des pièces. Sachant qu'après la rotation de 45°, ce sont les diagonales qui sont suivant les axes de X et Y.\
|
||||
Le centre est situé à côté * √2 / 2
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="scale(1 0.5773)" transform-origin="200 64.6447">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
<g transform="scale(0.5773 1)" transform-origin="164.6447 100">
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
<g transform="scale(0.5773 1)" transform-origin="235.3553 0">
|
||||
<rect x="200" y="50" width="50" height="50" fill="green" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
<circle cx="235.3553" cy="64.6447" r="3"/>
|
||||
<circle cx="164.6447" cy="64.6447" r="3"/>
|
||||
</svg>
|
||||
|
||||
3e étape : **Rotation**
|
||||
|
||||
Pièce|Angle
|
||||
---|--:
|
||||
Rouge|0 °
|
||||
Bleu|-30 °
|
||||
Vert|30 °
|
||||
|
||||
La encore il faut choisir avec soin l'origine de la transformation. il faut sélectionner les points en commun avec 2 côtés.
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="scale(1 0.5773)" transform-origin="0 64.6447">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
<g transform="rotate(-30)" transform-origin="164.6447 64.6447">
|
||||
<g transform="scale(0.5773 1)" transform-origin="164.6447 0">
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
</g>
|
||||
<g transform="rotate(30)" transform-origin="235.3553 64.6447">
|
||||
<g transform="scale(0.5773 1)" transform-origin="235.3553 0">
|
||||
<rect x="200" y="50" width="50" height="50" fill="green" transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
|
||||
<g transform="scale(1 0.5773)" transform-origin="0 64.6447">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red"
|
||||
transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
|
||||
<g transform="rotate(-30)" transform-origin="164.6447 64.6447">
|
||||
<g transform="scale(0.5773 1)" transform-origin="164.6447 0">
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue"
|
||||
transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(30)" transform-origin="235.3553 64.6447">
|
||||
<g transform="scale(0.5773 1)" transform-origin="235.3553 0">
|
||||
<rect x="200" y="50" width="50" height="50" fill="green"
|
||||
transform="rotate(45)" transform-origin="200 100" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
```
|
||||
|
||||
http://www.enjoythisbeautifulday.com/how-to/isometric/
|
||||
|
||||
### Méthode 2
|
||||
|
||||
Cette méthode est un peu plus simple car il n'y a qu'une seule origine pour toute les transformations.
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" />
|
||||
<rect x="200" y="100" width="50" height="50" fill="green" />
|
||||
<circle cx="200" cy="100" r="3"/>
|
||||
</svg>
|
||||
|
||||
1ère étape : **Déformation** de 86.603% (cos(30°)) en hauteur
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="scale(1 0.86603)">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" />
|
||||
<rect x="200" y="100" width="50" height="50" fill="green" />
|
||||
</g>
|
||||
<circle cx="200" cy="86.603" r="3"/>
|
||||
</svg>
|
||||
|
||||
2e étape : **cisaillement** de 30°
|
||||
|
||||
Pièce|Angle
|
||||
---|--:
|
||||
Rouge|-30 °
|
||||
Bleu|30 °
|
||||
Vert|-30 °
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="skewX(-30)" transform-origin="0 86.603">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
<g transform="skewX(30)" transform-origin="0 86.603" >
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" transform="scale(1 0.86603) " />
|
||||
</g>
|
||||
<g transform="skewX(-30)" transform-origin="0 86.603">
|
||||
<rect x="200" y="100" width="50" height="50" fill="green" transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
<circle cx="200" cy="86.603" r="3"/>
|
||||
</svg>
|
||||
|
||||
3e étape : **rotation**
|
||||
|
||||
Pièce|Angle
|
||||
---|--:
|
||||
Rouge|30 °
|
||||
Bleu|30 °
|
||||
Vert|-30 °
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<g transform="rotate(30) skewX(-30)" transform-origin="200 86.603">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red" transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
<g transform="rotate(30) skewX(30)" transform-origin="200 86.603" >
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue" transform="scale(1 0.86603) " />
|
||||
</g>
|
||||
<g transform="rotate(-30) skewX(-30)" transform-origin="200 86.603">
|
||||
<rect x="200" y="100" width="50" height="50" fill="green" transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
|
||||
<circle cx="200" cy="86.603" r="3"/>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
|
||||
<g transform="rotate(30) skewX(-30)" transform-origin="200 86.603">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red"
|
||||
transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
|
||||
<g transform="rotate(30) skewX(30)" transform-origin="200 86.603" >
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue"
|
||||
transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
|
||||
<g transform="rotate(-30) skewX(-30)" transform-origin="200 86.603">
|
||||
<rect x="200" y="100" width="50" height="50" fill="green"
|
||||
transform="scale(1 0.86603)" />
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
```
|
||||
|
||||
https://nicoguaro.github.io/posts/isometric_inkscape2/
|
||||
|
||||
|
||||
|
||||
### Méthode 3
|
||||
|
||||
En combinant les transformations successives dans une matrice résultantes
|
||||
|
||||
matrix(1 0.5 -1 0.5 0 -50)\
|
||||
matrix(1 0.5 0 1 -100 -100)\
|
||||
matrix(1 -0.5 0 1 -100 100)
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red"
|
||||
transform="matrix(1 0.5 -1 0.5 0 -50)" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue"
|
||||
transform="matrix(1 0.5 0 1 -100 -100)" />
|
||||
<rect x="200" y="100" width="50" height="50" fill="green"
|
||||
transform="matrix(1 -0.5 0 1 -100 100)" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 400 200">
|
||||
<rect x="150" y="50" width="50" height="50" fill="red"
|
||||
transform="matrix(1 0.5 -1 0.5 0 -50)" />
|
||||
<rect x="150" y="100" width="50" height="50" fill="blue"
|
||||
transform="matrix(1 0.5 0 1 -100 -100)" />
|
||||
<rect x="200" y="100" width="50" height="50" fill="green"
|
||||
transform="matrix(1 -0.5 0 1 -100 100)" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
https://bl.ocks.org/helderdarocha/8b28505082bf1c81977d7dec797686c7
|
||||
|
||||
https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058
|
||||
|
||||
|
||||
https://design.tutsplus.com/fr/tutorials/quick-tip-how-to-create-an-isometric-grid-in-less-than-2-minutes--vector-3831
|
||||
Reference in New Issue
Block a user