🢔 Back to
devart.space
Delailerp :
Explications et exploration de ces figures animées en 2D
**Sommaire** [TOC] # Galerie <center>            </center> Vous en voulez plus ? J'ai mis pleins d'autre contenu utilisant cette technique sur mon instagram [@devart.space](https://www.instagram.com/devart.space/) # 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. - [CCapture.js](https://github.com/spite/ccapture.js), une librairie JavaScript qui permet d'enregistrer image par image un canvas. # Explications Pour générer ces images, je me suis inspiré d'une technique d'un article d'[Etienne Jacob](https://necessarydisorder.wordpress.com/) qui explique comment utiliser la fonction lerp avec un delai pour créer comme un mouvement de corde attachée d'un bout et remuée de l'autre: <center></center> Pour ce faire, il faut partir de deux points en mouvement (ou non, mais c'est quand même plus joli). Ici je les fais tourner sur deux cercles. J'utilise une classe me permettant de garder en mémoire le centre de rotation du point et le rayon qui définit la taille du cercle. Cette classe possède deux fonctions me permettant de récupérer la position x et y en fonction du [temps qui s'écoule](http://devart.space/labo/fonctiotheque/#Time%20simulation) dans notre programme. ```javascript x(t) { return this.cx + this.r*cos(TWO_PI*t); } y(t) { return this.cy + this.r*sin(TWO_PI*t); } ``` J'instancie deux objets de cette classe que je nomme **a** et **b** correspondant à ces deux points: <center></center> Ensuite, il nous faut tracer une ligne entre ces deux points. Pour cela, nous utiliserons la fonction [lerp](https://p5js.org/reference/#/p5/lerp) qui correspond à une interpolation linéaire. Cette fonction calcule une valeur entre deux autres selon un pourcentage. Par exemple `lerp(0, 10, 50%) = 5`, `lerp(0, 10, 0%) = 0` et `lerp(0, 10, 100%) = 10`. Pour tracer cette ligne, on va calculer la position **x** et **y** de chaque point: ```javascript let lx, ly for(let i = 0; i < 1; i+=0.01) { // pour tous les points entre a et b lx = lerp(a.x(t), b.x(t), i) ly = lerp(a.y(t), b.y(t), i) point(lx, ly) } ``` <center></center> Pour finir, on ajoute un décalage temporel lors du calcul de la position de chaque point pour obtenir l'effet voulu: ```javascript d1 = 2; // facteur du décalage lié au premier cercle a d2 = 0; // facteur du décalage lié au second cercle b let lx, ly for(let i = 0; i < 1; i+=0.01) { // pour tous les points entre a et b lx = lerp(a.x(t - d1*i), b.x(t - d2*i) ,i); ly = lerp(a.y(t - d1*i), b.y(t - d2*i) ,i); point(lx, ly); } ``` TADAAAA !! <center></center> # Exploration Il est possible de modifier quelques variables pour obtenir des images encore plus belles. On peut par exemple jouer sur le rapport de vitesse de rotation des deux cercles. Ou sur la distance entre ces cercles. Si ceux-ci sont concentriques, cela donnera une image animée ronde comme celles vu plus haut. Et bien sûr, on peut explorer toutes les combinaisons de facteur de décalage sur les deux cercles. Je vous invite à explorer tout ca sur ma petite application. Vous pourrez jouer sur les différents paramètres et enregistrer toutes les images de la boucle dans une archive pour en faire une vidéo ou un gif. <center><a id="explore-btn" href="./app">Explore</a></center>
