Math + Code = Art

Eh ben 😀 Me voilà en vacances! Et pratiquement une semaine de retard pour cet article… Bref!

Cette semaine, j’avais envie d’y aller avec quelque chose de plus léger. Comme vous le savez, le code, c’est de l’art et je pense comme plusieurs autres que les maths sont aussi de l’art. Alors… peut-on faire de l’art avec du code et maths?

Pour voir le résultat final, cliquer ici!

Objectif

Démontrer ce qu’est une fonction sinusoïdale et pourquoi on y retrouve PI, alors que c’est une fonction de trigonométrie (triangle, souvenez-vous SOHCAHTOA 😂).

Technos

Pour démontrer le lien entre la fonction sin et un cercle, j’utiliserai une librairie que j’ai déjà présentée par le passé. P5.js permet de coder facilement des animations avec JavaScript. Cette librairie est basée sur Processing en Java.

Structure du projet

Pour obtenir P5.js, vous avez quelques options. Étant dev, je propose d’utiliser npm en exécutant dans un dossier vite :

Puis, créer un fichier index.html et ajouter le code suivant :

Ensuite, dans un dossier script, créer un fichier sketch.js. Simplement copier/coller le code suivant :

Le chemin du point

Bon, c’est ici le que le fun commence! Commençons simple en créant un canevas, un cercle au centre avec un point qui tourne en suivant la circonférence du cercle.

Variables globales

Ici, on a plusieurs variables qui vont nous servir pour créer le premier cercle au centre qui fera office de chemin sur lequel un point va tourner. La variable circleDiameter sera initialisée à la moitié de la taille du canevas. La variable angles contiendra, en radiant, la liste des angles de départ des points qui tournent autour du cercle. On commence avec un, mais l’objectif est d’avoir plusieurs points. La variable dotsDiameter quant à elle sert à définir le diamètre en pixels du point qui tourne autour du cercle. Pour finir, nbDotsGroup et speed servent respectivement à définir le nombre de points qui tournent autour du cercle et la vitesse de rotation.

Setup

À l’initialisation du script, on crée le canevas qui va nous servir à dessiner, puis on crée la liste des angles de départ pour les points qui tournent autour du cercle.

Ici, la fonction createCanevas() est fournie par P5.js. Puis, on définit le diamètre du cercle chemin sur lequel les points tournent.

La boucle peut sembler complexe, mais elle est simple. La fonction map() de P5.js permet de prendre un chiffre, ici la valeur de i, puis de normaliser sa valeur selon deux plages de valeurs. La première plage, de zero à nbDotsGroup, représente la plage couverte par l’itérateur de la boucle for. La deuxième plage, de -PI à PI, définit le retour de la fonction map(). Donc en gros, angle va prendre une valeur comprise entre -PI et PI qui va correspondre à l’emplacement de i entre zero et nbDotsGroup. Si i = 0, alors angle = -PI. Si i = nbDotsGroup, alors angle = PI. Ceci nous permet donc de séparer le cercle en angles égaux.

On dessine les cercles

Dans la fonction draw(), nous allons tracer le cercle au centre en blanc, puis nous allons tracer un plus petit cercle sur sa circonférence à l’angle de départ définie dans la fonction setup().

L’appel à background(0) permet de mettre le fond noir. C’est un shorthand de background(0, 0, 0) qui prend en paramètre une couleur RGB.

Puis, on appelle la fonction drawCirclePath() (voir plus bas) qui trace le cercle au centre. Ensuite, pour chaque angle créé dans la fonction setup(), on trace un point, puis on augmente l’angle d’une certaine quantité basée sur la variable speed qui définit la vitesse de rotation. Lorsque le point a parcouru la totalité du cercle ( 2 * PI), on la réinitialise à la position de départ ( -2 * PI).

La fonction push() ici permet de mettre les styles courants sur une pile. Ceci permet de revenir aux styles initiaux en appelant pop(), puisque les fonctions de style comme stroke() (changer la couleur du trait) et noFill() (ne pas remplir la forme) sont appliquées à l’appel jusqu’à ce qu’on les rappelle.

Donc, rien de bien compliqué, on trace un cercle blanc au centre. La fonction translate() déplace le point de départ du dessin vers le centre, ce qui nous permet de tracer un cercle au point 0, 0  afin de le mettre au centre. Par défaut, le point de départ est en haut à gauche du canevas.

Pour tracer le point qui tourne, on fait une rotation de l’angle courant, puis on fait une translation vers le bord du cercle et on trace un point mauve.

Résultat :

Et la fonction sin la dedans?

La fonction sin en maths, ça représente pour plusieurs une relation entre les angles d’un triangle rectangle et la taille de ses côtés. Mais étrangement, c’est aussi autre chose.

Si vous regardez le point qui tourne ci-dessus et que vous ne gardez que la valeur de sa position x, vous allez obtenir une valeur qui va de -r (rayon) à r. En supposant que le rayon du cercle soit 1, vous allez obtenir la valeur de la fonction sinusoïdale. Pour se le représenter, ajoutons une fonction pour tracer un point qui oscille entre les deux bords verticaux de l’écran qui correspond à la valeur normalisée de la position du point qui tourne :

Résultat :

Et si on crinque la machine?

Vous vous souvenez la fonction setup() ? Nous remplissons une liste d’angles pour représenter le point mauve qui tourne autour du cercle au centre. On peut arriver à un résultat assez surprenant…

Avant de changer la valeur de nbDotsGroup, qui représente le nombre de paires de points mauves et verts, nous allons faire un ajustement pour appliquer une rotation à l’axe du point vert selon l’angle initial du point mauve correspondant. Dans la fonction drawDots(), on ajoute un paramètre dotIdx ou dot index ou indice du point. Puis, on normalize sa valeur entre -PI et PI, ce qui devrait nous redonner l’angle qu’on a calculer initialement dans la fonction setup(). Ne reste qu’à appliquer la rotation :

Maintenant, augmentons la valeur de nbDotsGroup à… 50!

Résultat :

Le voyez-vous le cercle 😅? Vous pouvez aussi, par exemple, modifier la plage de rotation de l’axe du point vers pour mettre zero à PI :

Je vous laisse expérimenter. Si vous faites quelques chose de cool, faites-moi un lien en commentaire!

Conclusion

Aujourd’hui, on a vu une façon créative de faire un mouvement circulaire avec des fonctions sinusoïdales. Je trouve ce genre d’exercice très bénéfique parce qu’il pousse à utiliser des fonctions mathématiques simples et de faire des expérimentations pour voir notamment l’impact d’une modification sur les performances du script en général si on augmente le nombre de points à 200 par exemple.  Bref, si vous avez apprécié, n’hésitez pas à partager sur vos réseaux sociaux en utilisant les boutons sous l’article. Vous y trouverez aussi des suggestions d’articles qui pourraient vous intéresser.

Sur ce, cheers!