Du code au réel — Week 1 : Vecteur et ce bon vieux Newton

Enfin ! Début de la première semaine. Pour repartir sur de bonnes bases et bien commencé la roadmap, j’ai décidé de revoir des principes de bases, notamment grâce au livre “The Nature of Code” par Daniel Shiffman et les vidéos de The Coding Train sur YouTube (l’auteur de “The Nature of Code”)

— Vecteur

La base de la base : le vecteur. Mais je me suis reposé cette question fondamentale : qu’est-ce qu’un vecteur ?

Un vecteur est un segment, qui part d’un point A à un point B fini, allant dans une direction particulière. Vu sur un repère orthonormé, le vecteur (3, 4) va partir d’une origine (pour simplifier sur notre repère, (0, 0)) et avancer de 3 en x, et 4 en y. La longueur (ou la norme, magnitude appelée là comme vous voulez) de ce vecteur sera définie par c² = a² + b² (Pythagore is that you ?!), qui représente la longueur de l’hypoténuse du triangle rectangle formé par a (x) et b (y). Dans le cas exposé précédemment :

• 3² + 4² = c²
• 9 + 16 = c²
• 25 = c²
• √25 = c
• 5 = c

Notre vecteur (3,4) à une norme de 5.

Dans p5.js, un vecteur va, le plus souvent, correspondre à des coordonnées de base, à laquelle on appliquera un vecteur de vélocité et/ou d’accélération.

(Nb : un vecteur peut aussi servir de stockage de données, par exemple pour stocker des valeurs RGB et gérer la couleur d’un élément)

— Vélocité et Accélération

À notre vecteur de base, on peut lui ajouter un vecteur de vélocité. Celui-ci va correspondre à une vitesse, dans une direction donnée. Il va être chargé du changement de position (constant si on ne lui applique pas une accélération) de notre vecteur d’origine.

Le vecteur d’accélération lui, va effectuer des changements sur notre vecteur de vélocité (ralentir la vitesse ou l’accélérer, selon son utilisation). L’utilisation la plus connue du vecteur d’accélération est à travers la deuxième loi de Newton : Force = Masse * Accélération. La révision des lois de Newton fait partie de “The Nature of Code”, pour pouvoir en appliquer les principes sur les éléments de notre canvas.

— Newton, enfin à peu près

Le but dans ces révisions était de comprendre les principes, et de tenter de les appliquer à notre canvas p5.js. Or, nous sommes : dans un canvas, 2D, avec des lignes de codes. Dans la relation : Force = Masse * Accélération, la composante de masse est totalement arbitraire.

On pourrait donc se dire qu’aucun élément du canvas n’a de masse, alors, l’application de chaque Force ne serait égale qu’à leur vecteur d’accélération. En suivant les vidéos de The Coding Train, l’exemple arrive avec une application de masse, choisi aléatoirement, pour reproduire un effet de gravité et de vent. Pour la gravité, plutôt simple, on n’applique pas la masse. (merci Galilée). Pour le vent, on y applique cette fois-ci la masse, comme la loi de Newton l’indiqué. Un élément sur le canvas ayant reçu une masse plus importante qu’un autre bougera donc plus lentement avec l’application d’une même force “vent” sur les deux éléments.

— Fini la physique, place au fonction avec p5.js

Le cours de physique est fini pour aujourd’hui… mais on commence les opérations de vecteurs avec p5.js. HOURRA !

Rapide résumé des différentes fonctions et opérations de p5.js vu cette semaine, avec une courte explication personnelle :

• createVector(x, y, …) → sert à définir un vecteur dans p5.js.
• p5.Vector.random2D → fonction statique, permettant de créer un vecteur en 2 dimensions avec un angle aléatoire et une norme de 1.
• v1.add(v2) → Additionne le vecteur 1 avec le vecteur 2. Cela va donc changer la valeur de v1 directement. (Nb : dans une addition de vecteur, l’ordre n’importe pas, le point d’arrivé sera le même.)
• p5.Vector.add(v1, v2) → Même principe que .add, mais en fonction statique. Va permettre d’additionner 2 vecteurs dans un nouveau vecteur, ce qui a pour résultat de ne pas impacter les deux valeurs de bases des vecteurs.
• v1.sub(v2) → Soustrais le vecteur 1 avec le vecteur 2. (Nb : comme add, la valeur de v1 va être changer. Attention: l’ordre importe dans cette opération)
• p5.Vector.sub(v1, v2) → Comme .sub, mais en fonction statique.
• v1.mult(n) → Multiplication d’un vecteur par une valeur scalaire (un nombre, par exemple: 50). Dans ce cas, on multiplie la norme de notre vecteur par le nombre, sans changé sa direction. (On peut aussi multiplier un vecteur par un autre vecteur.)
• p5.Vector.mult(v1, n) → Comme .mult, mais en fonction statique.
• v1.div(n) → Divise un vecteur par un nombre. La division d’un vecteur est utilisé pour normaliser un vecteur.
• v1.normalize() → Normalise un vecteur et le transforme en vecteur unitaire. Un vecteur unitaire est un vecteur qui peut aller dans n’importe qu’elle direction, avec une magnitude de 1. (Nb : v1.normalize() = v1.div(v1.mag())
• v1.limit(n) → Limite la norme d’un vecteur à un nombre. Si la norme est en dessous de la limite, elle n’est pas affecté.
• v1.setMag(n) → Change la magnitude (norme) du vecteur par la valeur saisie. (Nb : v1.setMag(n) = v1.normalize puis v1.mult(n) ou alors v1.div(v1.mag()) puis v.mult(n))
• v1.mag() → Renvoie la magnitude (norme) du vecteur.

— Plan pour la Week 2

Durant la week 2, l’objectif sera de continuer l’apprentissage des phénomènes réels pour les appliquer en code, mais aussi de commencer à produire des Œuvres génératives.

À la semaine prochaine !

Cliquer ici pour passer au prochain article.