Voici le programme qui dessine Winston, auquel j'ai ajouté du texte.
Ce que je veux faire, c'est de placer mes Winston en dessous de chaque texte
pour que cela corresponde à chaque période de sa vie.
Mais pour l'instant, il est placé un peu partout,
car la fonction place Winston à une position aléatoire pour faceX et faceY.
On veut changer ça et pourvoir indiquer à la fonction à quelle position dessiner Winston.
Ainsi, quand on appellera la fonction, il suffira d'indiquer à quelle position le dessiner,
comme pour les rectangles ou les ellipses.
OK. En fait, je veux pouvoir dessiner un Winston ici... et ici.... aussi ici... et le dernier là !
Je ne veux plus de position aléatoire à chaque appel.
Pour faire ça, on va créer des paramètres à notre fonction...
à la fois, au moment de la définition (tout en haut... ici)
et aussi au moment de l'appeler... en bas...ici.
Dans "drawWinston()", on va lui passer faceX et faceY,
et il pourra utiliser ces valeurs au lieu de les générer aléatoirement.
Commençons par voir ce qu'on va lui passer comme valeurs au moment de l'appel.
On veut le positionner sous chaque bloc de texte.
Donc on va passer des valeurs qui sont proches des "x" et "y" utilisés pour le texte.
Probablement juste 10 pixels plus bas pour le "y".
Le premier sera à peu près à 10 et 30, puis... 200 et 30...
puis, 10 et 230... et enfin, 200 et 230.
J'ai utilisé ceux des textes et juste ajouté 10 au "y" pour l'avoir un peu en dessous.
OK. Winston, lui, n'a pas bougé !
C'est parce qu'on n'a pas indiqué à la fonction d'utiliser les paramètres.
Elle utilise donc toujours les valeurs aléatoire.
Donc pour lui dire de plutôt utiliser les paramètres,
on doit ajouter les noms des paramètres entre les parenthèses... ici.
On va les appeler faceX et faceY... et les séparer par une virgule.
On les appelle comme ça, car on utilise déjà ces noms dans la fonction.
Cela nous évite de modifier le code existant.
Mais, même en faisant ça, Winston est toujours n'importe où !
Si vous regarder au début du code de la fonction,
vous voyez qu'on écrase toujours la valeur de faceX et faceY par des valeurs aléatoires !
Il faut donc qu'on enlève ces deux lignes, là.
Et voilà ! maintenant la fonction utilise les valeurs de faceX et faceY,
qu'on lui a passé au moment de l'appel.
Je n'ai pas bien positionné mes Winston pour l'instant,
car j'ai oublié que les valeurs de "x" et "y" pour les textes représentent le coin supérieur gauche
Alors que pour le visage, ça représente le centre du visage de Winston.
Donc je vais changer ça un peu...
Je vais changer pas mal le "x"... et le "y" pareil... avec l'outil c'est plus facile...
Donc, ce que je fais maintenant, c'est juste changer les valeurs des paramètres de ma fonction.
Je n'ai plus à modifier la fonction elle-même.
Car elle va juste utiliser les valeurs que je lui passe. OK ? Exactement comme avec ellipse() et rect().
OK. Je les ai positionnés, mais en fait, il est trop grand.
Ils se superposent. Il prend trop de place.
Comme j'ai fais une fonction pour le dessiner, je peux modifier leur taille d'un coup,
juste en changeant une ligne de code !
Essayons de prendre la valeur 190, Yeah ! Il va maigrir d'un coup... 190.
C'est pas mal ! et si je modifie encore un peu leur position, ça ira mieux.
Cool ! Bon. Revoyons un peu ce que ce code fait.
On a définit une fonction appelée "drawWinston()",
Cette fonction accepte 2 valeurs, qu'on a nommées faceX et faceY.
Ces valeurs sont portées par ces deux variables qu'on peut utiliser dans le reste de la fonction.
Exactement comme si on les avait déclarées en haut normalement,
Et on peut appeler cette fonction où on veut (après l'avoir déclarée)
et lui passer des valeurs différentes en paramètre à chaque fois.
On vient de voir un truc super utile avec les fonctions.
Quand on a du code qu'on pense pouvoir ré-utiliser,
il suffit de le mettre dans une fonction.
Ensuite, on peut lui passer des paramètres
pour la personnaliser ou changer son comportement.
C'est comme une recette.
Vous écrivez la recette pour un gâteau. Mais si vous avez besoin d'en faire 4,
Vous n'avez pas à tout ré-inventer... il suffit de tout multiplier par 4.
A vous de trouver le code que vous pouvez ré-utiliser !