swish/SwichGIT/Doc/Forme.md

# Projet Swish
**Etudes des formes**
> Avec C.TOFFIN, Y.SEVRET, A.GOLFIER, T.SOUCHON et Monsieur LAFOURCADE EN 2A de DUT Info.

---
## SOMMAIRE
   - [Explications](#Explications)
   - [Etude du cercle](#Etude-du-cercle)
   - [Etude du carré](#Etude-du-carré)
   - [Etude du triangle](#Etude-du-triangle)
   - [Etude du losange](#Etude-du-losange)
   - [Etude du pentagone](#Etude-du-pentagone)


---
## Explications

Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de longueur X qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.

La division étant définie par :
```css
#containform {
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}

```

---
## Etude du cercle

Cette structure contient deux formes :
   - Un anneau (composé de 2 ronds) qui représente la partie extérieur
   - Un rond qui représente la partie intérieur manquante

En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
```HTML
<div class="rond"></div>
```
Et en CSS nous définissons
```CSS
.rond {
    /*centrer la division*/
    display: table;
    margin: 0 auto;
    /*définir la couleur*/
    background-color: #FFD100;
    /*définir la taille*/
    height: 3vw;
    width: 3vw;
    /*définir un arondie à notre div*/
    border-radius: 3vw;
}
```

### Version 1
Notre objectif étant de réaliser la figure suivante :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779749908038156333/unknown.png "Image rond")

En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
	<div class="anneau">
		<div class="rondinterieur"></div>
	</div>
</div>
<div class="containform">
  <div class="rond"></div>
</div>
```

Code forme anneau :
```css
:root{
  --couleur : black;
  --couleurfond : white;
	/*Valeur à changer en fonction*/
  --x : 6vw;
  --d : calc(var(--x_longueur)/2);
  --e : calc(var(--x_longueur)/4);
}
.anneau {
    background-color: var(--couleur);
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    /*Centrer les éléments intérieurs verticalement*/
    display: table-cell;
    vertical-align: middle;
}
.rondinterieur {
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Faire un arondie*/
    border-radius: var(--d);
}
.rond {
   /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Définir la couleur*/
    background-color: var(--couleur);
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}
```

Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.

### Version 2
Notre objectif étant de réaliser la figure suivante :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779768320752091146/unknown.png "Image rond")

Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
Code HTML :
```HTML
<div class="containform2">
	<div class="rond2"></div>
</div>
<div class="containform">
	<div class="rond"></div>
</div>
```
Code CSS :
```css
.containform2{
  height: var(--x);
  width: var(--x);
  display: table-cell;
  vertical-align: middle;
  background-color: var(--couleur);
}

.rond2 {
  display: table;
  margin: 0 auto;
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  border-radius: var(--d);
}
```

### Version 3
Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779768865382072340/unknown.png "Image rond")
Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.

```HTML
<div class="containform2">
	<div class="anneau2"></div>
</div>
<div class="containform">
	<div class="anneau3">
		<div class="rond3"></div>
	</div>
</div>
<div class="containform">
	<div class="rond4"></div>
</div>
```
Code CSS :
```css
:root{
	/*Valeur à changer en fonction*/
  --couleur : #FFD100;
	--couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --e : calc(var(--x)/4);
}

.anneau2 {
	position: relative;
  background-color: var(--couleurfond);
  border-radius: var(--d1);
  height: var(--d1);
  width: var(--d1);
  calc((var(--x) - var(--d1))/2);
  /*Centrer verticalement les div contenu dans cette div*/
  display: table-cell;
  vertical-align: middle;
}

.anneau3 {
	position: relative;
  background-color: var(--couleur);
  border-radius: var(--d2);
  height: var(--d2);
  width: var(--d2);
  /*Centrer horizontalement*/
  margin-left: auto;
  margin-right: auto;
}

.rond3 {
  position: relative;
  top : calc(var(--x) - var(--d2));
  left : calc(var(--x) - var(--d2));
  display: table-cell;
  vertical-align: middle;
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  border-radius: var(--d);
}

.rond4 {
  display: table;
  margin: 0 auto;
  background-color: var(--couleur);
  height: var(--d3);
  width: var(--d3);
  border-radius: var(--d3);
}
```

---

## Etude du carré

Cette structure contient deux formes :
   - Un carré (composé de 2 carré) qui représente la partie extérieur
   - Un carré qui représente la partie intérieur manquante

### Version 1

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780037455859941436/unknown.png "Image carré")

En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
	<div class="carre">
		<div class="carreinterieur"></div>
	</div>
</div>

<div class="containform">
	<div class="carre2"></div>
</div>
```

Code CSS pour le carré :
```css
:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
}

.carre{
  position: relative;
  background-color: var(--couleur);
  height: var(--basecarre);
  width: var(--basecarre);
  margin-left: auto;
  margin-right: auto;
}

.carreinterieur{
  position: relative;
 top : calc((var(--basecarre) - var(--b2))/2);
 left : calc((var(--basecarre) - var(--b2))/2);
 display: table-cell;
 vertical-align: middle;
 background-color: var(--couleurfond);
 height: var(--b2);
 width: var(--b2);
}

.carre2 {
    background-color: var(--couleur);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin: 0 auto;
}

```

### Version 2

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780036552255471646/unknown.png "Image carré")

En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform2">
	<div class="carreinterieur2"></div>
</div>
<div class="containform">
	<div class="carre2"></div>
</div>
```

Code CSS pour le carré :
```css
:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
}

.carreinterieur2 {
    background-color: var(--couleurfond);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin-left: auto;
    margin-right: auto;
}

```

### Version 3

![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780041515745411102/unknown.png "Image carré")

En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform2">
	<div class="carreinterieur3"></div>
</div>
<div class="containform">
	<div class="carrev2">
		<div class="carreinterieur4"></div>
	</div>
</div>
<div class="containform">
	<div class="carre3"></div>
</div>
```

Code CSS pour le carré :
```css
:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
  --b3 : calc(var(--x)/1.3);
  --b4 : calc(var(--x)/2.4);
}

.carreinterieur3 {
	position: relative;
    background-color: var(--couleurfond);
    height: var(--basecarre);
    width: var(--basecarre);
    left : calc((var(--x) - var(--basecarre))/2);
    display: table-cell;
    vertical-align: middle;
}

.carrev2 {
	position: relative;
    background-color: var(--couleur);
    height: var(--b3);
    width: var(--b3);
    margin-left: auto;
    margin-right: auto;
}

.carreinterieur4 {
	position : relative;
	top : calc((var(--x) - var(--basecarre)) / 1.3);
	left : calc((var(--x) - var(--basecarre)) / 1.3);
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  display: table-cell;
  vertical-align: middle;
}

.carre3 {
    background-color: var(--couleur);
    height: var(--b4);
    width: var(--b4);
    display: table;
    margin: 0 auto;
}
```
---
## Etude du triangle

### Version 1