DIY 4 – C’est Noël !!!

On se met en mode « Noël » avec Ezoh oh oh… S’cusez-le!

Parce que notre travail est exigent sur plusieurs de facettes, il faut parfois savoir s’arrêter et s’amuser. C’est dans cette optique que je vous présente aujourd’hui le quatrième article de la série DIY (Do It Yourself) qui traite d’un mini moteur de physique sous le thème de Noël 🎅

Si vous avez manqué les autres articles de la série, c’est possible de les consulter via les tags blogue.

Objectif

Apprendre une nouvelle librairie d’animation HTML + JS et reproduire approximativement les forces de la nature.

Créer un projet P5.js
Apprendre à dessiner sur un canevas
Apprendre les vecteurs pour le positionnement d’éléments
Utiliser les vecteurs pour appliquer des forces (gravité, vent, etc.)

Prérequis

Mini connaissance de JavaScript

Sources : https://editor.p5js.org/Ezo/sketches/rJ6cahM1E

Étape 1 – Créer un projet P5.js

P5.js est une librairie JavaScript qui permet de créer facilement des animations sur le web et basée sur Processing (Java). Son principal but est d’être utilisée à titre éducatif pour les débutants. Elle a été créée par Lauren McCarthy de l’Université de Californie.

Pour créer ce projet, je vous propose quelque chose de beaucoup plus simple qu’à l’habitude. Rendez-vous sur l’éditeur en ligne!

L’éditeur en ligne est simple et permet d’expérimenter rapidement avec la librairie. Dans l’éditeur, vous devriez avoir 2 fonctions :

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

}

Ceci dessine simplement un canevas gris. Simple?

Étape 2 – Apprendre à dessiner sur un canevas

Le canevas, c’est comme une toile pour un peintre. Ce qu’il faut comprendre avec les deux fonctions de base de P5.js, c’est que la première est appelée une fois au début du script et sert d’initialisation pour votre croquis. La deuxième est appelée à chaque cycle de dessin du navigateur. Ceci permet à P5.js d’être relativement performant.

Pour l’instant, il n’y a qu’une seule fonction : background(220). Évidemment, elle peint un fond gris. Changeons notre croquis pour avoir un fond noir qui prend tout l’écran :

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
}

function setup() {

createCanvas(windowWidth, windowHeight);

}

function draw() {

background(0);

}

Ici, windowWidth est créée par P5.js pour nous faciliter la vie. Ajoutons un point blanc quelque part :

let dotX = null;
let dotY = null;

function setup() {
  createCanvas(windowWidth, windowHeight);

  dotX = random(width);
  dotY = random(height);
}

function draw() {
  background(0);

  fill(255);
  ellipse(dotX, dotY, 8, 8);
}

let dotX = null;

let dotY = null;

function setup() {

createCanvas(windowWidth, windowHeight);

dotX = random(width);

dotY = random(height);

}

function draw() {

background(0);

fill(255);

ellipse(dotX, dotY, 8, 8);

}

Comme vous pouvez voir, on se crée des variables x et y pour le positionnement d’un point à l’écran qu’on initialise avec la fonction random() de P5.js. Les variables width et height correspondent à la taille du canevas, donc x et y seront une coordonnée aléatoire sur le canvas.

Dans la section qui dessine à l’écran, vous pouvez voir deux nouvelles fonctions. La première permet de définir la couleur de remplissage de la prochaine forme à dessiner, puis la deuxième rend une ellipse aux coordonnées initialisées aléatoirement de taille 8 px * 8 px. Nous avons donc un point blanc positionné aléatoirement 😀

Étape 3 – Apprendre les vecteurs pour le positionnement d’éléments

Bon… avoir des variables x et y un peu partout dans le code, c’est pas très pratique! Et ce n’est surtout pas pratique pour la suite si on veut ajouter les forces de la nature dans notre exemple. Remplaçons donc la position du point par un vecteur.

let dotPosition = null;

function setup() {
  createCanvas(windowWidth, windowHeight);

  dotPosition = createVector(random(width), random(height));
}

function draw() {
  background(0);

  fill(255);
  ellipse(dotPosition.x, dotPosition.y, 8, 8);
}

let dotPosition = null;

function setup() {

createCanvas(windowWidth, windowHeight);

dotPosition = createVector(random(width), random(height));

}

function draw() {

background(0);

fill(255);

ellipse(dotPosition.x, dotPosition.y, 8, 8);

}

La fonction createVector() de P5.js crée un vecteur pour nous. Pour ceux qui ne savent pas ce qu’est un vecteur, je vais tenter de l’expliquer très brièvement.

Comme vous pouvez voir, un vecteur se représente par une flèche avec une direction et une longueur. La direction et la longueur sont établies via x et y, ce qui ressemble beaucoup à ce qu’on a besoin. Les plus rapides parmi vous remarquerons que ça donne aussi un triangle rectangle, ce qui signifie que la trigonométrie (SOHCAHTOA) s’applique bien aux vecteurs. Mais avant de pousser trop loin, faisons un test…

Étape 4 – Utiliser les vecteurs pour appliquer des forces

Présentement, notre sketch dessine un point blanc sur un fond noir… Essayons de faire en sorte que notre point soit affecté par la gravité.

Pour une force appliquée à un objet, on utilise aussi le vecteur. Plus il est « long », plus forte est la force. La valeur de x et y nous donne la « force » du vecteur verticalement et horizontalement. Afin que notre gravité soit appliquée, il nous faut modifier un peut notre code :

let dotPosition = null;
let dotVelocity = null;
let dotAcceleration = null;

function setup() {
  createCanvas(windowWidth, windowHeight);

  dotPosition = createVector(random(width), random(height));
  dotVelocity = createVector(0, 0);
  dotAcceleration = createVector(0, 0);
}

function draw() {
  background(0);

  fill(255);
  ellipse(dotPosition.x, dotPosition.y, 8, 8);
}

let dotPosition = null;

let dotVelocity = null;

let dotAcceleration = null;

function setup() {

createCanvas(windowWidth, windowHeight);

dotPosition = createVector(random(width), random(height));

dotVelocity = createVector(0, 0);

dotAcceleration = createVector(0, 0);

}

function draw() {

background(0);

fill(255);

ellipse(dotPosition.x, dotPosition.y, 8, 8);

}

On se retrouve donc avec 3 vecteurs pour notre « point ». Un pour le positionnement, un pour l’accélération et un pour la vélocité. Grossièrement, la vélocité correspond à la vitesse de déplacement de l’objet et l’accélération correspond à la vitesse à laquelle la vitesse augmente dans le temps. Résultat : Le point ne bouge toujours pas… On y arrive!

Refactoring

Avant d’appliquer les forces à l’objet, il serait temps de faire un peu de refactoring pour améliorer la propreté du code. Première technique, on « spot » les mots récurrents et on remarque qu’on a besoin d’un objet « dot ». Appelons-le Snowflake 😀 (vous voyez le lien avec Noël là?!)

class Snowflake {
  constructor(
      position,
      velocity,
      acceleration) {
    this.position = position;
    this.velocity = velocity;
    this.acceleration = acceleration;
  }
}

class Snowflake {

constructor(

position,

velocity,

acceleration) {

this.position = position;

this.velocity = velocity;

this.acceleration = acceleration;

}

Nous avons maintenant encapsulé l’information dans un flocon. Pour faire en sorte que notre « flocon » soit dessiné à l’écran, il faut mettre à jour les fonctions setup() et draw().

Note : Vous pouvez mettre la classe directement dans le fichier principal, sinon vous pouvez ajouter un fichier au projet et l’importer dans index.html, comme je l’ai fait dans l’exemple.

Accumulation de vecteurs de force

Maintenant que le code est un peu plus propre, ajoutons une méthode pour mettre à jour le flocon. Pour faire simple, on ajoute le vecteur de d’accélération au vecteur de vélocité (force qui initie le mouvement), on ajoute ensuite le vecteur de vélocité au vecteur de position (actuel déplacement) et on termine par multiplier le vecteur d’accélération par 0 pour annuler son effet (revenir à l’état de repos). Cette technique nous permettra d’accumuler des forces comme le vent et la gravité.

En P5.js, la librairie fait tout pour nous :

update() {
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.acceleration.mult(0);
}

update() {

this.velocity.add(this.acceleration);

this.position.add(this.velocity);

this.acceleration.mult(0);

}

On peut aussi utiliser cette fonction pour réutiliser notre flocon s’il sort de l’écran. S’il sort par le bas, il revient par le haut, de gauche à droite et vice-versa. Le flocon ne sortira pas par le haut.

update() {
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.acceleration.mult(0);

  if (this.position.y > height) {
    this.position.y = -100;
    this.position.x = random(width);
    this.velocity.y = 0;
    this.velocity.x = 0;
  } else if (this.position.x < 0) {
    this.position.x = width;
  } else if (this.position.x > width) {
    this.position.x = 0;
  }
}

update() {

this.velocity.add(this.acceleration);

this.position.add(this.velocity);

this.acceleration.mult(0);

if (this.position.y > height) {

this.position.y = -100;

this.position.x = random(width);

this.velocity.y = 0;

this.velocity.x = 0;

} else if (this.position.x < 0) {

this.position.x = width;

} else if (this.position.x > width) {

this.position.x = 0;

}

Il ne manque qu’une seule méthode à notre flocon. Cette méthode sert à y appliquer un vecteur de force.

applyForce(force) {
  this.acceleration.add(force);
}

applyForce(force) {

this.acceleration.add(force);

}

Ensuite, changeons les méthodes setup() et draw() pour prendre plusieurs flocons. Ceci est assez simple, merci à l’OO. Et grâce à un vecteur pour la gravité, les flocons devraient commencer à tomber du ciel 😀

const snowflakeMax = 200;
let snowflakeCount = 0;
let snowflakes = [];
let gravity = null;

function setup() {
  createCanvas(windowWidth, windowHeight);
  gravity = createVector(0, 0.1);
}

function draw() {
  background(0);
  if (snowflakeCount < snowflakeMax) {
    newSnowflake();
    snowflakeCount++;
  }

  for (let snowflake of snowflakes) {
    snowflake.applyForce(gravity);
    snowflake.update();
    snowflake.draw();
  }
}

function newSnowflake() {
  let snowflakePosition = createVector(
    random(width),
    random(-100, -10));

  let snowflakeVelocity = createVector(0, 0);

  snowflakes.push(new Snowflake(
    snowflakePosition,
    snowflakeVelocity,
    createVector(0, 0)));
}

const snowflakeMax = 200;

let snowflakeCount = 0;

let snowflakes = [];

let gravity = null;

function setup() {

createCanvas(windowWidth, windowHeight);

gravity = createVector(0, 0.1);

}

function draw() {

background(0);

if (snowflakeCount < snowflakeMax) {

newSnowflake();

snowflakeCount++;

}

for (let snowflake of snowflakes) {

snowflake.applyForce(gravity);

snowflake.update();

snowflake.draw();

}

function newSnowflake() {

let snowflakePosition = createVector(

random(width),

random(-100, -10));

let snowflakeVelocity = createVector(0, 0);

snowflakes.push(new Snowflake(

snowflakePosition,

snowflakeVelocity,

createVector(0, 0)));

}

Sources : https://editor.p5js.org/Ezo/sketches/rJ6cahM1E

Conclusion

Aujourd’hui, vous avez appris à faire tomber des flocons en appliquant des vecteurs les uns sur les autres. Ensuite, vous avez aussi découvert une nouvelle librairie qui permet de s’amuser à faire des animations sans trop se casser la tête.

Merci comme à l’habitude pour tous les partages et les commentaires sur les réseaux sociaux. J’ai toujours beaucoup de plaisir à échanger avec vous.

Partager sur Facebook

Partager sur Twitter

DIY 4 – C’est Noël !!!

Objectif

Prérequis

Étape 1 – Créer un projet P5.js

Étape 2 – Apprendre à dessiner sur un canevas

Étape 3 – Apprendre les vecteurs pour le positionnement d’éléments

Étape 4 – Utiliser les vecteurs pour appliquer des forces

Refactoring

Accumulation de vecteurs de force

Conclusion

60

SHARES

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

DIY 4 – C’est Noël !!!

Objectif

Prérequis

Étape 1 – Créer un projet P5.js

Étape 2 – Apprendre à dessiner sur un canevas

Étape 3 – Apprendre les vecteurs pour le positionnement d’éléments

Étape 4 – Utiliser les vecteurs pour appliquer des forces

Refactoring

Accumulation de vecteurs de force

Conclusion

60

SHARES

Articles qui pourraient vous intéresser :

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

Suivez-nous!