Un flocon

Initialisation

Commençons par faire un seul flocon. Pour cela, posons nous la question habituelle : de quelle information avons nous besoin ? Pour pouvoir dessiner notre flocon, il faudra disposer à minima de son abscisse et de son ordonnée. Ces deux informations devraient nous suffire. Nous allons donc commencer le code en créant ces deux variable

var abscisse,ordonnee

Au moment de la mise en place du script, dans la fonction setup, nous allons initialiser les valeurs ce ces deux coordonnées. Pour l'abscisse, nous prenons un nombre aléatoire grâce à la fonction Math.random() qui renvoie un nombre entre 0 et 1, et à la variable width qui contient la largeur du canvas p5js. Pour l'ordonnée, nous commençons à 0.

function setup() {
  // sequence habituelle d'initialisation....
  abscisse = Math.random()*width
  ordonnee = 0
}

Déplacement

Notre flocon est donc placé en haut, à une position aléatoire. Nous allons maintenant le faire descendre. Sa descente correspond à une modification de sa position lors du passage dans la fonction draw. L'abscisse ne devra pas changer mais l'ordonnée elle devra augmenter à chaque étape.

Remettre le compteur à zéro

Vous avez ajouté 4 à chaque passage dans la boucle draw sans doute avec une ligne du type

ordonnee += 4

Votre flocon descend mais quand il arrive en bas, il disparait. C'est normal. À aucun moment, on ne donne de consigne dans le programme pour gérer ce cas de figure. L'ordonnée augmente sans arrêt, puis continue d'augmenter indéfiniment.

Il faut donc gérer cette situation : que se passe t'il quand on dépasse l'ordonnée maximale ? Deux possibilités s'offrent à nous.

• Utiliser l'opérateur mathématique modulo. Celui ci permet d'avoir le reste de la division entière par un nombre et on est sur de toujours rester entre 0 et la hauteur maximum
• Effectuer un test et modifier l'ordonnée. C'est cette solution que l'on va choisir. En effet, en plus de permettre de remettre l'ordonnée à zéro, elle nous permettra de redonner une valeur aléatoire au flocon pour ne pas avoir le flocon qui tourne "en boucle"

Résultat

Voilà, nous arrivons à avoir un flocon qui descend et qui arrivé en bas disparait et laisse place à un nouveau flocon comme dans l'exemple ci dessous. Nous allons passer à la suite en multipliant les flocons.