🢔 Back to
devart.space
Elliptic flower :
douce rotation de cercles
[TOC] # Galerie <div class="galerie-400">    </div> # Outils - [p5.js](https://p5js.org/), une sorte de surcouche aux canvas html qui me fourni un ensemble de fonctions permettant de jouer avec des fonctions mathématiques, des images, des formes géométriques, du son, et d'interagir avec via la souris, le clavier, le micro ou encore la webcam. - [p5.createloop.js](https://www.npmjs.com/package/p5.createloop), une librairie pour p5.js qui permet de faciliter la génération de boucles ([avec](https://codepen.io/peteyhayman/pen/ZZZKzv) ou [sans](https://codepen.io/peteyhayman/pen/KYYmbB) bruit), l'enregistrement et l'exportation sous format vidéo ou gif. # Explications ## Etape 1: répartition des centres de gravité La première fonction que j'utilise me permet de distribuer, sur un cercle, des points de manière équilibré. Par exemple si j'ai trois points, cela formera un triangle équilatéral. Avec 4, un carré... ## Etape 2: les rotations La seconde fonction que j'utilise permet de dessiner les cercles selon une orbite elliptique autour des centres de gravité. <center></center> ## Etape 3: la taille Ensuite, on fait varier la taille des cercles en fonction d'une variable elle-même liée au temps. La moitié du temps, le cercle va grossir, et l'autre moitié, le cercle va diminuer. En général, [pour représenter le temps](/labo/fonctiotheque#Time%20simulation), j'utilise une variable *t* qui boucle de 0 à 1 par pas de 0.01 ou 0.001. Elle est initialisée à 0, et à chaque boucle de mon programme j'incrémente et si la valeur dépasse 1, je la remets à 0. Mais la librairie [createloop](/labo/fonctiotheque#p5.createloop.js) me fourni une variable qui fait la même chose. <center></center> ## Etape 4: smooth and easy Il reste ensuite à rendre ca plus fluide. Pour cela, j'utilise une fonction [ease](/labo/fonctiotheque#Ease) que j'ai trouvé sur le site d'[Etienne Jacob](https://necessarydisorder.wordpress.com/). En gros, ca permet d'accélérer le mouvement au début (t=0) et de le ralentir à la fin (t=1). ``` function ease(t, g) { if (t < 0.5) return 0.5 * pow(2*t, g); else return 1 - 0.5 * pow(2*(1 - t), g); } ``` <center></center> ## Etape 5: Final Pour rendre ca plus jolie et plus fluide, à chaque itération du programme, plutôt que d'afficher un fond noir opaque qui remplace l'image précédente, je mets un fond noir légèrement transparent afin de garder les précédents mouvements à l'image. J'augmente aussi l'épaisseur du trait sinon on aperçoit le fond noir entre les cercles de chaque image ce qui "raye" la couleur de noir plutôt que d'être lisse. <center></center> # Version touchdesigner <div class="galerie-400">    </div> <center><a id="explore-btn" href="./app">Explore</a></center>
