Les Tutos de Gabriel

Le colimaçon de Pythagore

Comment faire une spirale et lui donner du mouvement.

Le colimaçon de PythagoreColimaçon de Pythagore

Essai de représentation d'un colimaçon.

On pose comme principe de base que les segments feront $s=1px;

Pour la position de A1, on a :
x=1,
y=0,
Angle α = 0°

Pour la position de A2 on a :
x=1,
y=-1,
h = OA2=√(x²+y²),
Angle α1 = 45°

Particularité :

Il faut se rappeler qu'en Html, les dimensions sont données à partir du point supérieur gauche, que x est alors positif dans le sens normal gauche-->droite, mais que y est inversé et est positif dans le sens haut-->bas, ce qui est contraire à la trigonométrie.
En conséquence, nous écrivons y=-1 pour la position A2 !

Position point suivant A2 :

$i = 1
$x = 1
$y = -1
$s = 1 (constant)
$a = 45° = round(deg2rad(45),4) = 0,7854 radians
Petit rappel du théorème de Pythagore :
"Dans un triangle rectangle, le carré de l'hypothénuse est égal à la somme des carés des deux côtés de l'angle droit."
Hypothénuse OA2
$h = √(x²+y²) = √2 = 1.414

Position point suivant A3 :

Nous connaissons la valeur de OA2 qui est égale à $h.
Le côté A2A3 = $s = 1.
On déduit donc OA3 par le théorème de Pythagore : $h = √($h²+$s²)
Connaissant les valeurs des 3 côtés du triangle rectangle A2OA3, on peut déduire la valeur de l'angle $b au centre, qui sera : $b = asin($s/$h) = asin(1/1.732) = 0.61550045153411 radian arrondi à 0.6155
On en déduit la valeur de l'angle A1OA3 $a = $b + $a = 1.4009
Partant du point A3, on trace une perpendiculaire à l'axe x.
On déduit les coorconnées du point A3, soit
$x = $h*cos($a) = 0.29 et $y = $h*sin($a) = -1.3938

Réalisation

 

1 - Voici les formules pour le php et html5 :
<figure class="colimacon">
<ul>
<?php
$x= 1;
$y= 0;
$h= 1;
$a= 45°;
for ($i=0;$i<375;$i++)
{
$c=$h;
$h = round(sqrt(pow($s,2)+pow($c,2)),4);
$b = round(asin($s/$h),4);
$a = $a + $b;
if ($a > 2*M_PI) {$a = $a%(2*M_PI);}
$x = round($h*cos($a),4);
$y = -round($h*sin($a),4);
echo '<li class="colim" style="left:'.(100-(5*$x)).'px; top:'.(100-(5*$y)).'px;"></li>';
}
?>
</ul>
</figure>

2 - Et les formules correspondantes pour le CSS3 :
.colimacon
{
display: block;
border: blue solid 2px;
width:200px;
height:200px;
position: relative;
padding:0;
}
.colim
{
display: block-inline;
background-color:red;
width:5px;
height:5px;
list-style-type: none;
position: absolute;
padding:0;
margin:0;
}

Commentaires :

Bien sûr, le plus simple est de recopier le code, mais à quoi cela vous servirait-il ? Le mieux est bien d'essayer de le recréer par vous même, ligne après ligne, en suivant la logique mathématique.
Petite précision, les angles doivent être indiqués en radians.
Rappel mathématique : Dans un cercle, on a 360% = 2Pi ---> 180° = Pi = 3.1416

Et on refait le même avec rotation automatique :

Ce n'est pas beaucoup plus compliqué, il faut juste ajouter un axe Z autour duquel on fait tourner le plan XY.
La spirale est dans la figure ayant pour classe "colimaçon".
Pour ne pas faire tourner le cadre bleu, ce qui ne serait pas beau, l'astuce consiste à intercaler un autre container que j'ai appelé "contenant spirale"

 

3 - Modification du html5 et php :
<figure class="colimacon">
<?php
<div class="contenant spirale">
....... contenu du code php....
?>
</div>
</figure>

4 - Formules pour le CSS3 :

.contenant
{
display: block;
width: 200px; height:200px;
margin:0;
padding: 0;
border:1px transparent solid;
}
.spirale
{
/* 1 */ /*animation: spirale 0.5s infinite linear;*/
/* 2 */ animation: spirale 0.5s linear; animation-iteration-count: 5;
}
@keyframes spirale
{
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}

Commentaires :

Chaque fois que vous tapez sur la touche "F5" pour rafraîchir votre page, votre colimaçon fait alors 5 révolutions autour de l'axe Z, donc dans le plan XY.

Dans la classe ".contenantspirale", nous avons défini une boîte qui a les mêmes dimensions que la boîte &lt;figure> qui la contient.
Elle n'a pas de marge externe, ni interne.
Elle a une bordure de 1px transparente.
Pour les deux exemples animés, la boîte ".contenant" sera identique.
Ensuite nous y ajouterons les classes ".spirale_z" pour la première, et ".spirale_y" pour la 2ème, avec à chacune son propre "@keyframes ...".
Elle a une animation que nous nommons "spirale", qui dure 0,5 seconde, et qui a un fonctionnement linéaire, c'est à dire que pendant sa durée de 0,5 secondes, sa vitesse sera constante.
L'option n°1 est "infinite", ce qui signifie que la spirale tournera indéfiniment pendant l'affichage de la page.
L'option n°2 fait faire seulement 5 tours à la spirale.

C'est la commande suivante "@keyframes" qui indique à la spirale ce qu'elle doit faire.
Ici, nous lui avons indiqué de faire une rotation complète autour de l'axe Z.
Nous aurions très bien pu lui indiquer de faire une rotation autour de l'axe X, ou de l'axe Y, ou de 2 ou 3 à la fois

Dans ce dernier exemple, la rotation se fait autour de l'axe Y.