Simulation

En informatique, la simulation désigne l’exécution d’un programme en vue de simuler un phénomène physique naturel réel ou complexe tel que la chute d’un corps ou la résistance à une surface. Au cours ce thème nous aborderons la simulation de déplacement d’un corps et l’introduction aux moteurs physiques tel que nous pouvons les utiliser dans les domaines de l’animation ou du jeu vidéo.

L’ensemble des exemples présentés au cours du thème seront réalisés en javascript par l’utilisation de la librairie P5JS

Introduction à javascript et P5JS

Javascript est un langage de programmation créé en 1995 et principalement employé dans les environnements web. Initialement créé en 1995 par Brendan Eich pour le compte de Netscape, Javascript voit son évolution croître avec l’évolution des standards du web porté par HTML5 dès 2004. Cette nouvelle version du format HTML — Hypertext Markup Language, comportant les technologies html, css et javascript — introduit de nouvelles possibilités d’interactions au cœur des pages web telles que la manipulation vidéo, audio, l’affichage 2D/3D, le support vectoriel… autant d’éléments précédemment accessible pour le web qu’à travers l’utilisation du pluggin Flash.

Javascript est un langage dit non typé, c’est-à-dire qu’il ne possède pas de déclaration de type pour ces variables. Lorsque nous utilisons un langage typé, chaque variable appartient à un type permettant de la définir et la différencier. Dans un contexte non typé les variables appartiennent toutes au même type var, leur type n’étant défini que par leurs valeurs. Ainsi en Java nous utilisons

int x = 10;
float x = 10.5;
char x = 'a';
String x = "alex";

En javascript nous utiliserons :

var x = 10;
var x = 10.0;
var x = 'a';
var x = "alex";

Découverte de P5JS

P5JS est une librairie javascript créée par Lauren McCarthy et développée par la Fondation Processing.

Cette librairie a pour objectif de fournir un modèle simple à tous designer, artiste ou développeur en se basant sur les paradigmes déjà établis par processing et proposer un environnement simple dessin. Ainsi nous y retrouverons de nombreuses méthodes proches du framework Java précédemment utilisé.

Création d’un programme avec P5JS

Comme vu plus haut, javascript est un langage dédié aux environnements web. Notre programme fonctionnera donc à travers un browser web. Afin de mettre en place notre programme nous aurons donc besoin des éléments suivants :

  1. Un programme javascript
  2. Une page web permettant de charger notre programme javascript

La première étape consiste à créer notre programme à l’aide de la syntaxe P5JS. Cette syntaxe étant très proche de celle de processing nous y retrouvons les deux fonctions principales que sont le setup() et le draw()  — pour rappel il s’agit de nos deux méthodes d’initialisation et de boucle de notre programme. La fonction size()  quant à elle, change de forme et s’écrit désormais createCanvas(largeur, hauteur)
 Cela s’explique par le fait que nous utilisons un canvas dans notre page HTML afin de dessiner notre programme. Nous obtenons alors le programme suivant que nous enregistrons sous le nom de sketch.js.

function setup(){
  createCanvas(640, 360);
}

function draw(){
  background(0);
}

Pour découvrir l’ensemble des références de P5JS je vous invite à vous rendre sur le site de la librairie : www.p5js.org.

Ce cours se concentrant sur la “simulation” en javascript nous ne verrons pas ici les notions d’HTML et CSS nécessaires à la création de pages web. Je vous invite à poursuivre par vous-même ce cours au travers des nombreuses ressources disponiblse en ligne tel que w3school ou openClassroom.

Pour les besoins de ce cours nous utiliserons la structure html suivante :

<html>
  <head>
       //header de la page HTML
  </head>
  <body style="margin : 0px; padding:0px">
    
  </body>
</html>

Nous devons ensuite importer la librairie P5JS et notre  programme JS dans la page HTML afin que ce dernier se charge au démarrage. Pour se faire nous allons utiliser la balise <script> disponible en HTML que nous allons ajouté au header de la page

<html>
  <head>
         <script src="../../p5js/p5.min.js"></script>
         <script src="00_introduction.js"></script>
  </head>
  <body style="margin : 0px; padding:0px">
    
  </body>
</html>

 Les systèmes simple

Les systèmes de particules sont des systèmes graphiques récurrents dans le milieu des arts graphique, que ce soit comme système graphique pur ou en tant que simulation d’éléments tels que de la fumée, des explosions ou de la poussière. D’un point de vue conceptuel, une particule est un élément évoluant dans un espace à travers plusieurs comportements tels que le déplacement, le rebond, la sensibilité à la gravité… À cet élément nous pourrons par la suite attacher des visuels ou des formes afin de donner vie à notre système.

Introduction au mouvement

Nous l’avons vu une particule est caractérisée par divers comportements, son principal comportement étant le déplacement dans l’espace. Le déplacement d’un élément dans un espace 2D se caractérise par une évolution, frame par frame de sa position x et y. Dans un espace 2D nous pouvons le symboliser de la manière suivante :

Soit un point P caractérisé par une position x et y
Soit une vitesse de x speedX et une vitesse de y speedY

À chaque frame nous incrémentons respectivement les valeurs x et y de leur vitesse speed x et speed y.

Soit dans notre programme P5JS : 
var x;
var y;
var speedX;
var speedY;

function update(){
  x += speedX;
  y += speedY;
}

Par cette méthode nous avons donc créé un comportement de déplacement qu’il nous suffira d’appeler dans la boucle de notre programme afin de mettre à jour la position de notre élément.

var x;
var y;
var speedX;
var speedY;

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

  x = width/2;
  y = height/2;
  speedX = 0.5;
  speedY = 0.25;
}

function draw(){
  background(127);
  update();

  fill(255);
  stroke(0);
  ellipse(x, y, 100, 100);
}

function update(){
  x += speedX;
  y += speedY;
}

 

Dans l’exemple ci-dessus nous avons réalisé un déplacement linéaire, c’est-à-dire un comportement où la position s’incrémente de manière uniforme selon une vitesse constante. Il est également possible de mettre à jour la position à travers un comportement plus aléatoire, qu’il soit chaotique ou doux. Pour se faire nous pouvons utiliser l’aléatoire brownien ou perlin vu dans les précédents cours.

//déplacement aléatoire chaotique de 1 pixel en x et 1
function update(){
  speedX = random(-1, 1);
  speedY = random(-1, 1);
  x += speedX;
  y += speedY;
}

//déplacement aléatoire doux de 1 pixel en x et y
function update(){
  speedX = -1 + noise(frameCount * 0.15) * 2;
  speedY = -1 + noise(frameCount * 0.125) * 2;
  x += speedX;
  y += speedY;
}

 Création de comportements

Dans l’exemple ci-dessus nous avons écrit notre déplacement sous la forme d’une fonction que nous avons par la suite appelée dans notre boucle draw(). Nous avons créé ce que l’on appelle un comportement : celui de se mouvoir. Nous pouvons ajouter divers comportements à notre particule tels que le fait de grossir ou de se réduire.

L’un des comportements les plus utilisés est celui de la limitation de la particule à l’espace de la scène par rebond. Cette fonction décrit le comportement qu’aura notre particule lorsque celle-ci atteint les limites de la scène. Dans ce cas celle-ci rebondira, c’est-à-dire ira dans le sens inverse. Pour ce faire, lorsque cette dernière atteint les limites de la scène nous inversons la vitesse en x ou y.

function checkEdges{
  if(this.x < 0 || this.x > width){
    this.speedX *= -1;
  }
  if(this.y < 0 || this.y > height){
    this.speedY *= -1;
  }
}

** Algorithm tips : les Objets (Classes) **

Si nous avons vu comment réaliser des comportements simples nous ignorons toujours comment l’appliquer à un lot d’éléments. Pour ce faire nous allons utiliser un méthode vue précédemment : la création de classe. Comme nous l’avons durant le cours précédemment : une classe est un modèle de description d’un objet.

En javascript les classes prennent une syntaxe particulière. En effet, javascript étant un langage non typé il ne dispose d’aucune déclaration de type classe. Ces dernière prendront donc la forme de  fonctions imbriquées.

La classe prendra la forme suivante :

var nomDeLaClass = function(param1, parma2){
    this.variable1;
    
    this.comportement1 = function();
}

Nous noterons différentes observations :

  1. Une classe JS ne possède pas de constructeur comme en JAVA
  2. L’ensemble des fonctions et variables sont désignées par l’indicateur this. Permettant d’indiquer à notre à notre programme que cette variable appartient à cette classe.

L’utilisation d’un objet dans le programme se fera par la suite de la manière suivante :

var objet; 
 
function setup(){
  createCanvas(640, 320);
  var objet= new nomDeLaClass(width/2, height/2);
}

Dans le cas de notre programme nous pouvons alors réaliser la classe particule regroupant nos comportements précédents de la manière suivante :

var Particle = function(x_, y_, radius_){
  this.speedX = random(-2, 2);
  this.speedY = random(-2, 2);
  this.radius = radius_;
  this.x = x_;
  this.y = y_;

  this.update = function(){
    this.x += this.speedX;
    this.y += this.speedY;
  }

  this.checkEdges = function(){
    if(this.x <= 0 || this.x >= width){
      this.speedX *= -1;
    }
    if(this.y <= 0 || this.y >= height){
      this.speedY *= -1;
    }
  }

}

Une fois notre classe devons ensuite en créer plusieurs sur la scène. Afin d’instancier plusieurs objets nous utiliserons un tableau de la manière suivante :

var particleList = [];

function setup(){
  createCanvas(windowWidth, windowHeight);
  for(var i=0; i<100; i++){
    var p =  new Particle (width/2, height/2, 5)
    particleList.push(p);
  }
}

Enfin nous utiliserons un boucle for dans notre draw afin de mettre à jour les comportements de nos particules et les afficher

function draw(){
  background(127);
  for(var i=0; i<particleList .length; i++){
    var p= particleList[i];
    p.checkEdges();
    p.update();
             ellipse(p.x, p.y, p.radius, p.radius);
  }
}

Rappel des algorithmes/méthodes

  1. Un comportement est une fonction décrivant le comportement d’un élément au fil du temps ou d’une action
  2. Un déplacement se caractérise par une incrémentation positive ou négative de x et/ou y
  3. Nous utilisons des classes pour décrire des éléments/objets disposant de leur propre variables et fonctions
  4. Nous utilisons des liste dynamique pour stocker un nombre indéfini éléments

Pour aller plus loin

À partir de l’ensemble des cours, réaliser les exercices suivants :

  1. Ajouter une comportement à vos particules (rebond entre elles, relier les points les plus proches…)
  2. Réaliser des comportements aléatoires
  3. Réaliser des classes de particules aux comportements différents et détecter leurs collisions.

Annexes

  1. Simulation informatique : https://fr.wikipedia.org/wiki/Simulation_informatique
  2. P5JS Librairie : http://p5js.org/
  3. P5JS cours : https://github.com/alexr4/e-artsup-GxD_Semestre2
  4. OpenClassroom : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
  5. W3School : https://www.w3schools.com/
  6. Javascript : https://fr.wikipedia.org/wiki/JavaScript
  7. HTML : https://fr.wikipedia.org/wiki/HTML5