Une usine à flocons

Rendre le code plus simple ?

Pour l'instant, nous avons un code qui commence à se complexifier. Dans l'idéal, nous voudrions pouvoir dire que nous souhaitons juste créer des flocons, les déplacer et les afficher. Imaginons que nous voulions modifier le code pour avoir des flocons de rayon différent ? Il faudra rajouter un tableau pour les rayons. Que l'affichage du flocon change ? Il faudra modifier au sein de la fonction draw même si les flocons ne sont qu'une petite partie du code.

Il existe une solution pour cela. Ça s'appelle les objets. Les objets en javascript sont des types complexes qui comprennent à la fois des variables et des fonctions. En fait, en javascript, tout est objet. Rappelez vous les tableaux. Pour rajouter un élément à la fin d'un tableau on utilise la fonction push sur le tableau

tableau.push(nouvelElement)

Ce code utilise la fonction push() de l'objet tableau

Nous allons définir des objets flocons et faire en sorte que notre code se réduise après à cela :

var nombreFlocons=150, tableauFlocons=[]

function setup() {
  createCanvas(520,340)
  for (var i=0;i<nombreFlocons;i++)
    tableauFlocons.push(new Flocon())
}

function draw() {
    background(0,0,20)
    for (var i=0;i<nombreFlocons;i++) {
      var flocon = tableauFlocons[i]
      flocon.deplace()
      flocon.dessine()
  }
}

Le code ci dessus fait la chose suivante : il crée un tableau de 150 flocons, et à chaque étape il les déplace puis les dessine. Mais voyons ce qu'est un flocon...

Le constructeur, ou l'usine à flocons

Il existe plusieurs façons d'implémenter les objets en javascript. Celle que nous utilisons ici est de définir un constructeur, c'est à dire une fonction qui crée les objets flocons. On peut considérer que cette fonction est une usine à flocons.

Les constructeurs sont appelés grâce au mot clef spécial new. Ce mot clef indique que la fonction va créer un objet

Cette fonction va devoir définir quels sont les variables propre à chaque flocon, et les fonctions qui pourront s'appliquer à chaque flocon.

Nous allons le faire ensemble, pas à pas

Améliorons le code

Nous allons voir maintenant le grand avantage de la programmation objet : le code est bien rangé et facilement modifiable. Nous allons rajouter deux éléments

• les flocons sont de taille différente et se déplacent plus vites s'ils sont plus gros (pour créer un effet de perspective)
• les flocons ont un petit mouvement aléatoire de gauche à droite

Ensuivant les instructions, vous allez réaliser facilement ce résultat

Résultat

Voilà, nous avons atteint le résultat que nous souhaitions avoir, avec un code propre et maintenable grace aux objets.