Récupération du cours SVG
This commit is contained in:
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