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 !