1
00:00:00,877 --> 00:00:05,581
Voici le programme qui dessine Winston,
auquel j'ai ajouté du texte.

2
00:00:05,581 --> 00:00:10,642
Ce que je veux faire, c'est de placer mes
Winston en dessous de chaque texte

3
00:00:10,642 --> 00:00:13,210
pour que cela corresponde à 
chaque période de sa vie.

4
00:00:13,210 --> 00:00:15,197
Mais pour l'instant, il est placé
un peu partout,

5
00:00:15,197 --> 00:00:20,449
car la fonction place Winston à une
position aléatoire pour faceX et faceY.

6
00:00:20,449 --> 00:00:26,714
On veut changer ça et pourvoir indiquer
à la fonction à quelle position dessiner Winston.

7
00:00:26,714 --> 00:00:31,296
Ainsi, quand on appellera la fonction, il suffira
d'indiquer à quelle position le dessiner,

8
00:00:31,296 --> 00:00:34,458
comme pour les rectangles ou les ellipses.

9
00:00:34,458 --> 00:00:40,460
OK. En fait, je veux pouvoir dessiner un Winston ici...
et ici.... aussi ici... et le dernier là !

10
00:00:40,460 --> 00:00:44,373
Je ne veux plus de position aléatoire à chaque appel.

11
00:00:44,373 --> 00:00:48,206
Pour faire ça, on va créer des paramètres
à notre fonction...

12
00:00:48,206 --> 00:00:53,479
à la fois, au moment de la définition
(tout en haut... ici)

13
00:00:53,479 --> 00:00:58,032
et aussi au moment de l'appeler...
en bas...ici.

14
00:00:58,032 --> 00:01:02,647
Dans "drawWinston()", on va lui passer 
faceX et faceY,

15
00:01:02,647 --> 00:01:09,482
et il pourra utiliser ces
valeurs au lieu de les générer aléatoirement.

16
00:01:09,482 --> 00:01:15,207
Commençons par voir ce qu'on va lui 
passer comme valeurs au moment de l'appel.

17
00:01:15,207 --> 00:01:18,861
On veut le positionner sous chaque bloc de texte.

18
00:01:18,861 --> 00:01:25,131
Donc on va passer des valeurs qui sont proches
des "x" et "y" utilisés pour le texte.

19
00:01:25,131 --> 00:01:29,376
Probablement juste 10 pixels 
plus bas pour le "y".

20
00:01:29,376 --> 00:01:37,871
Le premier sera à peu près à 10 et 30,
puis... 200 et 30...

21
00:01:37,871 --> 00:01:41,729
puis, 10 et 230... et enfin, 200 et 230.

22
00:01:41,729 --> 00:01:49,457
J'ai utilisé ceux des textes
et juste ajouté 10 au "y" pour l'avoir un peu en dessous.

23
00:01:49,457 --> 00:01:52,551
OK. Winston, lui, n'a pas bougé !

24
00:01:52,551 --> 00:01:56,905
C'est parce qu'on n'a pas indiqué 
à la fonction d'utiliser les paramètres.

25
00:01:56,905 --> 00:01:59,401
Elle utilise donc toujours les valeurs aléatoire.

26
00:01:59,401 --> 00:02:03,783
Donc pour lui dire de plutôt utiliser les paramètres,

27
00:02:03,783 --> 00:02:09,208
on doit ajouter les noms des paramètres 
entre les parenthèses... ici.

28
00:02:09,208 --> 00:02:14,908
On va les appeler faceX et faceY... et les séparer
par une virgule.

29
00:02:14,908 --> 00:02:21,076
On les appelle comme ça, car on utilise déjà ces
noms dans la fonction.

30
00:02:21,076 --> 00:02:24,524
Cela nous évite de modifier
le code existant.

31
00:02:24,524 --> 00:02:29,333
Mais, même en faisant ça, 
Winston est toujours n'importe où !

32
00:02:29,333 --> 00:02:32,249
Si vous regarder au début du code de la fonction,

33
00:02:32,249 --> 00:02:36,045
vous voyez qu'on écrase toujours la valeur de 
faceX et faceY par des valeurs aléatoires !

34
00:02:36,045 --> 00:02:39,793
Il faut donc qu'on enlève ces deux lignes, là.

35
00:02:39,793 --> 00:02:46,124
Et voilà ! maintenant la fonction utilise
les valeurs de faceX et faceY,

36
00:02:46,124 --> 00:02:50,645
qu'on lui a passé au moment de l'appel.

37
00:02:50,645 --> 00:02:54,051
Je n'ai pas bien positionné 
mes Winston pour l'instant,

38
00:02:54,051 --> 00:02:58,387
car j'ai oublié que les valeurs de "x" et "y" 
pour les textes représentent le coin supérieur gauche

39
00:02:58,387 --> 00:03:03,677
Alors que pour le visage, 
ça représente le centre du visage de Winston.

40
00:03:03,677 --> 00:03:07,427
Donc je vais changer ça un peu...

41
00:03:07,427 --> 00:03:13,238
Je vais changer pas mal le "x"... et le "y" pareil...
avec l'outil c'est plus facile...

42
00:03:13,238 --> 00:03:18,738
Donc, ce que je fais maintenant, c'est juste changer
les valeurs des paramètres de ma fonction.

43
00:03:18,738 --> 00:03:23,128
Je n'ai plus à modifier la fonction elle-même.

44
00:03:23,128 --> 00:03:28,868
Car elle va juste utiliser les valeurs que je lui passe.
OK ? Exactement comme avec ellipse() et rect().

45
00:03:28,868 --> 00:03:33,708
OK. Je les ai positionnés, mais en fait, il est trop grand.

46
00:03:33,708 --> 00:03:35,956
Ils se superposent. Il prend trop de place.

47
00:03:35,956 --> 00:03:42,242
Comme j'ai fais une fonction pour le dessiner,
je peux modifier leur taille d'un coup,

48
00:03:42,242 --> 00:03:45,408
juste en changeant une ligne de code !

49
00:03:45,408 --> 00:03:51,126
Essayons de prendre la valeur 190, Yeah !
Il va maigrir d'un coup... 190.

50
00:03:51,126 --> 00:04:01,654
C'est pas mal ! et si je modifie encore 
un peu leur position, ça ira mieux.

51
00:04:01,654 --> 00:04:06,167
Cool ! Bon. 
Revoyons un peu ce que ce code fait.

52
00:04:06,167 --> 00:04:09,540
On a définit une fonction appelée 
"drawWinston()",

53
00:04:09,540 --> 00:04:15,193
Cette fonction accepte 2 valeurs, 
qu'on a nommées faceX et faceY.

54
00:04:15,193 --> 00:04:21,795
Ces valeurs sont portées par ces deux variables 
qu'on peut utiliser dans le reste de la fonction.

55
00:04:21,795 --> 00:04:25,947
Exactement comme si on les
avait déclarées en haut normalement,

56
00:04:25,947 --> 00:04:30,011
Et on peut appeler cette fonction 
où on veut (après l'avoir déclarée)

57
00:04:30,011 --> 00:04:34,555
et lui passer des valeurs 
différentes en paramètre à chaque fois.

58
00:04:34,555 --> 00:04:37,513
On vient de voir un truc super utile
avec les fonctions.

59
00:04:37,513 --> 00:04:40,431
Quand on a du code qu'on pense
pouvoir ré-utiliser,

60
00:04:40,431 --> 00:04:42,744
il suffit de le mettre dans une fonction.

61
00:04:42,744 --> 00:04:45,123
Ensuite, on peut lui passer des paramètres

62
00:04:45,123 --> 00:04:47,302
pour la personnaliser ou changer 
son comportement.

63
00:04:47,302 --> 00:04:48,906
C'est comme une recette.

64
00:04:48,906 --> 00:04:52,690
Vous écrivez la recette pour un gâteau.
Mais si vous avez besoin d'en faire 4,

65
00:04:52,690 --> 00:04:57,485
Vous n'avez pas à tout ré-inventer... 
il suffit de tout multiplier par 4.

66
00:04:57,485 --> 00:05:02,205
A vous de trouver le code que vous pouvez ré-utiliser !