Du code au réel — Week 2 : Force et début de production

Lundi, début de la semaine. Je poste l’article de la semaine 1, et je me fais le planning de la semaine 2. J’étais fou à l’idée de me dire que j’allais enfin commencer à produire. C’est pour ça que j’ai… continué d’étudier les forces. (avant de produire quelques petites choses.)

— Friction

La première force étudiée cette semaine est la force de friction. Grossièrement : comment se passe l’interaction entre un objet (notre ellipse p5js par exemple) et une surface (la bordure de notre canvas pour autre exemple) ? Et bien en physique, on retrouvera plusieurs formules selon le type de frottement, mais dans le cas de p5js, on utilisera celle-ci :

-1 * µ * N * ^v (encore merci Daniel Shiffman)

Si on décompose cette formule, on a :

• -1 ⇒ change la direction de la vélocité par son opposé
• µ ⇒ coefficient de friction (selon la matière de la surface, cela représente la puissance de la friction)
• N ⇒ force normal (force perpendiculaire à la surface entre l’objet auquel on applique la friction et la surface de contact, dépendant aussi de la gravité en temps normal)
• ^v ⇒ vecteur unitaire de la vélocité (^v étant ma notation pour le vecteur unitaire)

Pour l’appliquer dans p5js, on va tout d’abord faire une copie de notre vélocité. Puis, on va normaliser cette copie (le vecteur unitaire de la vélocité ^v) puis le multiplier par -1 (pour pointer dans la direction opposée). La norme de cette force (ce vecteur) sera pour finir une multiplication entre µ et N, lequel sera ajouté à notre accélération au moment de toucher une surface.

— Force de traînée

Pour la deuxième et dernière force vue cette semaine, c’est la force de traînée. Elle s’exerce quand un objet rentre en contact avec un fluide, exerçant une résistance et agissant un peu comme une force de frottement.

La version simplifiée de Daniel Shiffman s’écrit donc ainsi :

-1/2 * ⍴ * ||v||² * A * Cd * ^v ou -1 * Cd * ||v||² * ^v (en condensant ⍴, A et Cd en Cd

Cassons cette formule partie par partie :

• -1/2 ⇒ constante
• ⍴ ⇒ constante de densité, représente la densité du fluide
• ||v||² ⇒ représente la vitesse (norme) de notre vecteur de vélocité au carré (vel.magSq() dans p5.js)
• A ⇒ la surface de l’objet qui va traverser le fluide, est-ce que le point sera pointu et la surface très petite, ou un rectangle avec une surface très grande. (dans p5, inexact mais on peut la représenter en tant que constante)
• Cd ⇒ le coefficient de trainée (dans p5, inexact mais on peut le représenter en tant que constante)
• ^v ⇒ vecteur unitaire de la vélocité

Avec la version simplifiée, on se retrouve avec une application plutôt similaire à celle de la force de friction (la traînée étant une sorte de friction). ^v et -1 vont permettre de donner la direction, et Cd * ||v||² la norme de vecteur.

— Time for some production

Durant cette semaine, j’ai produit 2 “Œuvres” génératives.

La première est un générateur de tableau de Mondrian. Je pense que, quand on évoque Mondrian, on voit évidemment ces tableaux composés de forme géométrique, avec des lignes noires et des rectangles soit blancs, soit bleus, soit jaunes, soit rouges. C’est ce que j’ai essayé de reproduire avec cette production. Au début, je me suis inspiré d’un autre “sketch” p5js, mais chaque rectangle qui composait une ligne était de la même hauteur, ce qui rendait le tout trop linéaire.

Pour ajouter un peu d’aléatoire là-dedans, je suis passé par un algorithme de “Squarified Treemaps” (très bon pdf expliquant ça ici). Après des heures à essayer de faire moi-même l’algorithme (et le milieu de la nuit arrivant à grands pas), j’ai décidé d’utiliser une librairie, qui allait gérer tous les calculs avec les jeux de données que je lui fournissais. Il ne me restait plus qu’à crée ces jeux de données et voilà le résultat :

Pour la deuxième production, après avoir un créer un champ de vecteurs pointant vers ma souris la première semaine, j’ai décidé de passer un step : créer un champ fluide de vecteurs, réagissant de manière aléatoire à l’aide d’un noise et changeant de couleur selon leur position dans le canvas. Je suis encore une fois parti d’un “sketch” p5js pour comprendre le fonctionnement des “Flow field” avant de créer le mien. On part de particules, qui vont avancer en fonction d’un angle (créer à partir d’un noise pour le caractère aléatoire, et dont on récupère le cosinus et le sinus), qui va servir de direction à notre vecteur de vélocité. Pour la magnitude, on va utiliser une vitesse aléatoire pour chaque particule, défini à la création de celle-ci.

Niveau des couleurs, deux choix. Soit faire un calcul qui va prendre en compte tout le canvas plus un peu d’aléatoire, soit découpé le canvas en petit cube de 125 par 125, ce qui rend ce résultat :

Plutôt cool non ? 😎

— Plan pour la Week 3

Le plan pour la troisième semaine sera de continuer à produire encore plus, notamment rester sur le thème de la gestion des couleurs dans le canvas et l’utiliser pour produire des Œuvres génératives.

À la semaine prochaine !

Cliquer ici pour passer au prochain article.