0:00:00.877,0:00:05.581
Voici le programme qui dessine Winston,[br]auquel j'ai ajouté du texte.

0:00:05.581,0:00:10.642
Ce que je veux faire, c'est de placer mes[br]Winston en dessous de chaque texte

0:00:10.642,0:00:13.210
pour que cela corresponde à [br]chaque période de sa vie.

0:00:13.210,0:00:15.197
Mais pour l'instant, il est placé[br]un peu partout,

0:00:15.197,0:00:20.449
car la fonction place Winston à une[br]position aléatoire pour faceX et faceY.

0:00:20.449,0:00:26.714
On veut changer ça et pourvoir indiquer[br]à la fonction à quelle position dessiner Winston.

0:00:26.714,0:00:31.296
Ainsi, quand on appellera la fonction, il suffira[br]d'indiquer à quelle position le dessiner,

0:00:31.296,0:00:34.458
comme pour les rectangles ou les ellipses.

0:00:34.458,0:00:40.460
OK. En fait, je veux pouvoir dessiner un Winston ici...[br]et ici.... aussi ici... et le dernier là !

0:00:40.460,0:00:44.373
Je ne veux plus de position aléatoire à chaque appel.

0:00:44.373,0:00:48.206
Pour faire ça, on va créer des paramètres[br]à notre fonction...

0:00:48.206,0:00:53.479
à la fois, au moment de la définition[br](tout en haut... ici)

0:00:53.479,0:00:58.032
et aussi au moment de l'appeler...[br]en bas...ici.

0:00:58.032,0:01:02.647
Dans "drawWinston()", on va lui passer [br]faceX et faceY,

0:01:02.647,0:01:09.482
et il pourra utiliser ces[br]valeurs au lieu de les générer aléatoirement.

0:01:09.482,0:01:15.207
Commençons par voir ce qu'on va lui [br]passer comme valeurs au moment de l'appel.

0:01:15.207,0:01:18.861
On veut le positionner sous chaque bloc de texte.

0:01:18.861,0:01:25.131
Donc on va passer des valeurs qui sont proches[br]des "x" et "y" utilisés pour le texte.

0:01:25.131,0:01:29.376
Probablement juste 10 pixels [br]plus bas pour le "y".

0:01:29.376,0:01:37.871
Le premier sera à peu près à 10 et 30,[br]puis... 200 et 30...

0:01:37.871,0:01:41.729
puis, 10 et 230... et enfin, 200 et 230.

0:01:41.729,0:01:49.457
J'ai utilisé ceux des textes[br]et juste ajouté 10 au "y" pour l'avoir un peu en dessous.

0:01:49.457,0:01:52.551
OK. Winston, lui, n'a pas bougé !

0:01:52.551,0:01:56.905
C'est parce qu'on n'a pas indiqué [br]à la fonction d'utiliser les paramètres.

0:01:56.905,0:01:59.401
Elle utilise donc toujours les valeurs aléatoire.

0:01:59.401,0:02:03.783
Donc pour lui dire de plutôt utiliser les paramètres,

0:02:03.783,0:02:09.208
on doit ajouter les noms des paramètres [br]entre les parenthèses... ici.

0:02:09.208,0:02:14.908
On va les appeler faceX et faceY... et les séparer[br]par une virgule.

0:02:14.908,0:02:21.076
On les appelle comme ça, car on utilise déjà ces[br]noms dans la fonction.

0:02:21.076,0:02:24.524
Cela nous évite de modifier[br]le code existant.

0:02:24.524,0:02:29.333
Mais, même en faisant ça, [br]Winston est toujours n'importe où !

0:02:29.333,0:02:32.249
Si vous regarder au début du code de la fonction,

0:02:32.249,0:02:36.045
vous voyez qu'on écrase toujours la valeur de [br]faceX et faceY par des valeurs aléatoires !

0:02:36.045,0:02:39.793
Il faut donc qu'on enlève ces deux lignes, là.

0:02:39.793,0:02:46.124
Et voilà ! maintenant la fonction utilise[br]les valeurs de faceX et faceY,

0:02:46.124,0:02:50.645
qu'on lui a passé au moment de l'appel.

0:02:50.645,0:02:54.051
Je n'ai pas bien positionné [br]mes Winston pour l'instant,

0:02:54.051,0:02:58.387
car j'ai oublié que les valeurs de "x" et "y" [br]pour les textes représentent le coin supérieur gauche

0:02:58.387,0:03:03.677
Alors que pour le visage, [br]ça représente le centre du visage de Winston.

0:03:03.677,0:03:07.427
Donc je vais changer ça un peu...

0:03:07.427,0:03:13.238
Je vais changer pas mal le "x"... et le "y" pareil...[br]avec l'outil c'est plus facile...

0:03:13.238,0:03:18.738
Donc, ce que je fais maintenant, c'est juste changer[br]les valeurs des paramètres de ma fonction.

0:03:18.738,0:03:23.128
Je n'ai plus à modifier la fonction elle-même.

0:03:23.128,0:03:28.868
Car elle va juste utiliser les valeurs que je lui passe.[br]OK ? Exactement comme avec ellipse() et rect().

0:03:28.868,0:03:33.708
OK. Je les ai positionnés, mais en fait, il est trop grand.

0:03:33.708,0:03:35.956
Ils se superposent. Il prend trop de place.

0:03:35.956,0:03:42.242
Comme j'ai fais une fonction pour le dessiner,[br]je peux modifier leur taille d'un coup,

0:03:42.242,0:03:45.408
juste en changeant une ligne de code !

0:03:45.408,0:03:51.126
Essayons de prendre la valeur 190, Yeah ![br]Il va maigrir d'un coup... 190.

0:03:51.126,0:04:01.654
C'est pas mal ! et si je modifie encore [br]un peu leur position, ça ira mieux.

0:04:01.654,0:04:06.167
Cool ! Bon. [br]Revoyons un peu ce que ce code fait.

0:04:06.167,0:04:09.540
On a définit une fonction appelée [br]"drawWinston()",

0:04:09.540,0:04:15.193
Cette fonction accepte 2 valeurs, [br]qu'on a nommées faceX et faceY.

0:04:15.193,0:04:21.795
Ces valeurs sont portées par ces deux variables [br]qu'on peut utiliser dans le reste de la fonction.

0:04:21.795,0:04:25.947
Exactement comme si on les[br]avait déclarées en haut normalement,

0:04:25.947,0:04:30.011
Et on peut appeler cette fonction [br]où on veut (après l'avoir déclarée)

0:04:30.011,0:04:34.555
et lui passer des valeurs [br]différentes en paramètre à chaque fois.

0:04:34.555,0:04:37.513
On vient de voir un truc super utile[br]avec les fonctions.

0:04:37.513,0:04:40.431
Quand on a du code qu'on pense[br]pouvoir ré-utiliser,

0:04:40.431,0:04:42.744
il suffit de le mettre dans une fonction.

0:04:42.744,0:04:45.123
Ensuite, on peut lui passer des paramètres

0:04:45.123,0:04:47.302
pour la personnaliser ou changer [br]son comportement.

0:04:47.302,0:04:48.906
C'est comme une recette.

0:04:48.906,0:04:52.690
Vous écrivez la recette pour un gâteau.[br]Mais si vous avez besoin d'en faire 4,

0:04:52.690,0:04:57.485
Vous n'avez pas à tout ré-inventer... [br]il suffit de tout multiplier par 4.

0:04:57.485,0:05:02.205
A vous de trouver le code que vous pouvez ré-utiliser !