pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Formes

Browse Source
Golfier
frperalde 4 years ago
parent 31dc915899
commit 793d4aad2c
4 changed files with 1195 additions and 213 deletions
Show Stats Download Patch File Download Diff File

216
SwichGIT/Doc/Etudes formes/index.html
Unescape View File

@ -4,10 +4,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title> <title>SwishGame</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head> </head>
<body> <body>
<!-- Forme : rond--> <!-- Forme : rond-->
<div class="containform"> <div class="containform">
<div class="anneau"> <div class="anneau">
@ -97,6 +100,7 @@
<br> <br>
<div class="containform"> <div class="containform">
<div class="trianglerinterieur"></div> <div class="trianglerinterieur"></div>
<div class="triangle"></div> <div class="triangle"></div>
@ -107,7 +111,7 @@
</div> </div>
<div class="containform2"> <div class="containform2">
<div class="trianglerinterieur"></div> <div class="trianglerinterieur2"></div>
</div> </div>
<div class="containform"> <div class="containform">
@ -129,37 +133,221 @@
<div class="containform2"> <div class="containform2">
<div class="triangle"> <div class="triangle">
<div class="ptriangle"></ <div class="ptriangle"></div>
</div>
</div>
<br>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div> </div>
</div> </div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
<div class="containform2">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<br>
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
<div class="containform2">
<div class="losangehaut"></div>
<div class="losangebas"></div>
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<br>
<div class="containform">
<div class="trapezeinte"></div>
<div class="trapeze"></div>
</div>
<div class="containform">
<div class="trapezeinte2"></div>
</div>
<!-- <div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform">
<div class="trapeze"></div>
</div>
<div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform"> <div class="containform">
<div class="triangletrapezeinte"></div>
<div class="trapezeinte"></div> <div class="trapezeinte"></div>
<div class="triangletrapeze"></div>
<div class="trapeze"></div> <div class="trapeze"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="triangletrapezep"></div> <div class="trapezeinte2"></div>
<div class="trapezep"></div>
</div> </div>
<div class="containform2">
<div class="containform">
<div class="trapezeinte2"></div>
<div class="trapeze"></div>
</div>
</div>
<br>
<div class="containform"> <div class="containform">
<div class="losangephaut"></div> <div class="octogoninte"></div>
<div class="losangepbas"></div> <div class="octogon"></div>
<div class="losangephauti"></div> </div>
<div class="losangepbasi"></div>
<div class="containform">
<div class="octogoninte2"></div>
</div> </div>
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform">
<div class="octogon"></div>
</div>
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform"> <div class="containform">
<div class="losangephautc"></div> <div class="octogoninte"></div>
<div class="losangepbasc"></div> <div class="octogon"></div>
--> </div>
<div class="containform">
<div class="octogoninte2"></div>
</div>
<div class="containform2">
<div class="octogoninte2"></div>
<div class="octogon"></div>
</div>
<br>
<button onclick="add()">+</button>
<div id="value">0</div>
</body> </body>
</html> </html>

23
SwichGIT/Doc/Etudes formes/script.js
Unescape View File

@ -0,0 +1,23 @@
var y = getComputedStyle(document.documentElement).getPropertyValue('--y');
var z = getComputedStyle(document.documentElement).getPropertyValue('--z');
t = z[1];
t = parseInt(t);
u = y[1];
u = parseInt(u);
function add(){
txt = document.getElementById("value");
p = t - 0.1;
//alert(p);
txt.textContent = p;
document.documentElement.style.setProperty('--z', p + "vw");
t = p;
}

309
SwichGIT/Doc/Etudes formes/style.css
Unescape View File

@ -2,19 +2,10 @@
--couleur : black; --couleur : black;
--couleurfond : white; --couleurfond : white;
/*Dimensions*/ /*Dimensions*/
--x : 10vw; --x : 5vw;
--y : 8vw; /*taille anneau*/ --y : 4vw; /*taille anneau*/
--z : 5vw; /*taille rond*/ --z : 3vw; /*taille rond*/
--d : calc(var(--x)/2);
--l : calc(var(--x)/2);
/*triangle*/
--btriangle : var(--x);
--contour1 : calc(var(--btriangle) / 2);
--bptriange : calc(var(--btriangle) / 2);
--contour2 : calc(var(--bptriange) / 2);
} }
/*Rond*/ /*Rond*/
.containform { .containform {
@ -23,8 +14,16 @@
width: var(--x); width: var(--x);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: red;
} }
.containform2{
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
background-color: var(--couleur);
}
.anneau { .anneau {
position: relative; position: relative;
left: calc((var(--x) - var(--y)) / 2); left: calc((var(--x) - var(--y)) / 2);
@ -70,14 +69,6 @@
width: var(--z); width: var(--z);
border-radius: var(--z); border-radius: var(--z);
} }
.containform2{
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
background-color: var(--couleur);
}
.rond2 { .rond2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
@ -183,14 +174,25 @@
border-right: calc(var(--y) /2) solid transparent; border-right: calc(var(--y) /2) solid transparent;
border-bottom: var(--y) solid var(--couleur); border-bottom: var(--y) solid var(--couleur);
} }
.trianglerinterieur { .trianglerinterieur {
position: absolute; position: absolute;
top : calc((var(--x) - var(--z))/1.6); bottom: calc(((var(--x) - var(--y))/2) + ((var(--y) - var(--z))/3));
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--couleurfond);
}
.trianglerinterieur2 {
position: absolute;
bottom: calc((var(--x) - var(--z))/2);
left : calc((var(--x) - var(--z))/2); left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent; border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent; border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--couleurfond); border-bottom: var(--z) solid var(--couleurfond);
} }
.ptriangle { .ptriangle {
position: absolute; position: absolute;
top : calc((var(--x) - var(--z))/2); top : calc((var(--x) - var(--z))/2);
@ -199,6 +201,7 @@
border-right: calc(var(--z) /2) solid transparent; border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--couleur); border-bottom: var(--z) solid var(--couleur);
} }
.triangle2 { .triangle2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
@ -207,20 +210,272 @@
border-bottom: var(--y) solid var(--couleurfond); border-bottom: var(--y) solid var(--couleurfond);
} }
.croix{
position: absolute;
left: calc((var(--x) - var(--y)) / 2);
bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
}
.croixinté{
z-index: 2;
position: absolute;
left: calc((var(--x) - var(--z))/2);
bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) );
}
.croixgauche{
position: relative;
background-color: var(--couleur);
height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
}
.croixdroite{
position: relative;
background-color: var(--couleur);
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.croixgauche2{
position: relative;
background-color: var(--couleurfond);
height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
}
.croixdroite2{
position: relative;
background-color: var(--couleurfond);
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.croixgaucheinte{
position: relative;
background-color: var(--couleurfond);
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte{
position: relative;
background-color: var(--couleurfond);
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
}
.croixgaucheinte2{
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte2{
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
}
.losangehaut {
z-index: 2;
position: absolute;
left: calc((var(--x) - var(--y)) / 2.4);
bottom : calc(var(--x) / 2);
border-left: calc(var(--y) /1.9) solid transparent;
border-right: calc(var(--y) /1.9) solid transparent;
border-bottom: calc(var(--y) /1.9) solid var(--couleur);
}
.losangebas {
position: absolute;
z-index: 2;
left: calc((var(--x) - var(--y)) / 2.4);
top : calc(var(--x) / 2);
border-left: calc(var(--y) /1.9) solid transparent;
border-right: calc(var(--y) /1.9) solid transparent;
border-top: calc(var(--y) /1.9) solid var(--couleur);
}
.losangehaut2 {
position: absolute;
left: calc((var(--x) - var(--y)) / 2);
bottom : calc(var(--x) / 2);
border-left: calc(var(--y) /2) solid transparent;
border-right: calc(var(--y) /2) solid transparent;
border-bottom: calc(var(--y) /2) solid var(--couleurfond);
}
.losangebas2 {
position: absolute;
left: calc((var(--x) - var(--y)) / 2);
top : calc(var(--x) / 2);
border-left: calc(var(--y) /2) solid transparent;
border-right: calc(var(--y) /2) solid transparent;
border-top: calc(var(--y) /2) solid var(--couleurfond);
}
.losangehautinte {
z-index: 3;
position: absolute;
left: calc((var(--x) - var(--z))/2);
bottom : calc(var(--x) / 2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: calc(var(--z) /2) solid var(--couleurfond);
}
.losangebasinte {
z-index: 3;
position: absolute;
left: calc((var(--x) - var(--z))/2);
top : calc(var(--x) / 2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-top: calc(var(--z) /2) solid var(--couleurfond);
}
.losangehautinte2 {
z-index: 3;
position: absolute;
left: calc((var(--x) - var(--z))/2);
bottom : calc(var(--x) / 2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: calc(var(--z) /2) solid var(--couleur);
}
.losangebasinte2 {
z-index: 3;
position: absolute;
left: calc((var(--x) - var(--z))/2);
top : calc(var(--x) / 2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-top: calc(var(--z) /2) solid var(--couleur);
}
/*Figures simples :( */
.trapeze{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapeze2{
width: var(--y);
height: var(--y);
background: var(--couleurfond);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapezeinte{
width: var(--z);
height: var(--z);
background: var(--couleurfond);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2.1));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapezeinte2{
width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2.1));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.octogon{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogon2{
width: var(--y);
height: var(--y);
background: var(--couleurfond);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte{
width: var(--z);
height: var(--z);
background: var(--couleurfond);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2.1));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte2{
width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2.1));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.value {
border-bottom: 4px dashed #bdc3c7;
text-align: center;
font-weight: bold;
font-size: 10em;
width: 300px;
height: 100px;
line-height: 60px;
margin: 40px auto;
letter-spacing: -.07em;
text-shadow: white 2px 2px 2px;
}
input[type="range"] {
display: block;
-webkit-appearance: none;
background-color: #bdc3c7;
width: 300px;
height: 5px;
border-radius: 5px;
margin: 0 auto;
outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #e74c3c;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
transition: .3s ease-in-out;
}​
input[type="range"]::-webkit-slider-thumb:hover {
background-color: white;
border: 2px solid #e74c3c;
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.6);
}

860
SwichGIT/Doc/Forme.md
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save