WEBVTT 00:00:00.877 --> 00:00:05.581 Voici le programme qui dessine Winston, auquel j'ai ajouté du texte. 00:00:05.581 --> 00:00:10.642 Ce que je veux faire, c'est de placer mes Winston en dessous de chaque texte 00:00:10.642 --> 00:00:13.210 pour que cela corresponde à chaque période de sa vie. 00:00:13.210 --> 00:00:15.197 Mais pour l'instant, il est placé un peu partout, 00:00:15.197 --> 00:00:20.449 car la fonction place Winston à une position aléatoire pour faceX et faceY. 00:00:20.449 --> 00:00:26.714 On veut changer ça et pourvoir indiquer à la fonction à quelle position dessiner Winston. 00:00:26.714 --> 00:00:31.296 Ainsi, quand on appellera la fonction, il suffira d'indiquer à quelle position le dessiner, 00:00:31.296 --> 00:00:34.458 comme pour les rectangles ou les ellipses. 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à ! 00:00:40.460 --> 00:00:44.373 Je ne veux plus de position aléatoire à chaque appel. 00:00:44.373 --> 00:00:48.206 Pour faire ça, on va créer des paramètres à notre fonction... 00:00:48.206 --> 00:00:53.479 à la fois, au moment de la définition (tout en haut... ici) 00:00:53.479 --> 00:00:58.032 et aussi au moment de l'appeler... en bas...ici. 00:00:58.032 --> 00:01:02.647 Dans "drawWinston()", on va lui passer faceX et faceY, 00:01:02.647 --> 00:01:09.482 et il pourra utiliser ces valeurs au lieu de les générer aléatoirement. 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. 00:01:15.207 --> 00:01:18.861 On veut le positionner sous chaque bloc de texte. 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. 00:01:25.131 --> 00:01:29.376 Probablement juste 10 pixels plus bas pour le "y". 00:01:29.376 --> 00:01:37.871 Le premier sera à peu près à 10 et 30, puis... 200 et 30... 00:01:37.871 --> 00:01:41.729 puis, 10 et 230... et enfin, 200 et 230. 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. 00:01:49.457 --> 00:01:52.551 OK. Winston, lui, n'a pas bougé ! 00:01:52.551 --> 00:01:56.905 C'est parce qu'on n'a pas indiqué à la fonction d'utiliser les paramètres. 00:01:56.905 --> 00:01:59.401 Elle utilise donc toujours les valeurs aléatoire. 00:01:59.401 --> 00:02:03.783 Donc pour lui dire de plutôt utiliser les paramètres, 00:02:03.783 --> 00:02:09.208 on doit ajouter les noms des paramètres entre les parenthèses... ici. 00:02:09.208 --> 00:02:14.908 On va les appeler faceX et faceY... et les séparer par une virgule. 00:02:14.908 --> 00:02:21.076 On les appelle comme ça, car on utilise déjà ces noms dans la fonction. 00:02:21.076 --> 00:02:24.524 Cela nous évite de modifier le code existant. 00:02:24.524 --> 00:02:29.333 Mais, même en faisant ça, Winston est toujours n'importe où ! 00:02:29.333 --> 00:02:32.249 Si vous regarder au début du code de la fonction, 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 ! 00:02:36.045 --> 00:02:39.793 Il faut donc qu'on enlève ces deux lignes, là. 00:02:39.793 --> 00:02:46.124 Et voilà ! maintenant la fonction utilise les valeurs de faceX et faceY, 00:02:46.124 --> 00:02:50.645 qu'on lui a passé au moment de l'appel. 00:02:50.645 --> 00:02:54.051 Je n'ai pas bien positionné mes Winston pour l'instant, 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 00:02:58.387 --> 00:03:03.677 Alors que pour le visage, ça représente le centre du visage de Winston. 00:03:03.677 --> 00:03:07.427 Donc je vais changer ça un peu... 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... 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. 00:03:18.738 --> 00:03:23.128 Je n'ai plus à modifier la fonction elle-même. 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(). 00:03:28.868 --> 00:03:33.708 OK. Je les ai positionnés, mais en fait, il est trop grand. 00:03:33.708 --> 00:03:35.956 Ils se superposent. Il prend trop de place. 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, 00:03:42.242 --> 00:03:45.408 juste en changeant une ligne de code ! 00:03:45.408 --> 00:03:51.126 Essayons de prendre la valeur 190, Yeah ! Il va maigrir d'un coup... 190. 00:03:51.126 --> 00:04:01.654 C'est pas mal ! et si je modifie encore un peu leur position, ça ira mieux. 00:04:01.654 --> 00:04:06.167 Cool ! Bon. Revoyons un peu ce que ce code fait. 00:04:06.167 --> 00:04:09.540 On a définit une fonction appelée "drawWinston()", 00:04:09.540 --> 00:04:15.193 Cette fonction accepte 2 valeurs, qu'on a nommées faceX et faceY. 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. 00:04:21.795 --> 00:04:25.947 Exactement comme si on les avait déclarées en haut normalement, 00:04:25.947 --> 00:04:30.011 Et on peut appeler cette fonction où on veut (après l'avoir déclarée) 00:04:30.011 --> 00:04:34.555 et lui passer des valeurs différentes en paramètre à chaque fois. 00:04:34.555 --> 00:04:37.513 On vient de voir un truc super utile avec les fonctions. 00:04:37.513 --> 00:04:40.431 Quand on a du code qu'on pense pouvoir ré-utiliser, 00:04:40.431 --> 00:04:42.744 il suffit de le mettre dans une fonction. 00:04:42.744 --> 00:04:45.123 Ensuite, on peut lui passer des paramètres 00:04:45.123 --> 00:04:47.302 pour la personnaliser ou changer son comportement. 00:04:47.302 --> 00:04:48.906 C'est comme une recette. 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, 00:04:52.690 --> 00:04:57.485 Vous n'avez pas à tout ré-inventer... il suffit de tout multiplier par 4. 00:04:57.485 --> 00:05:02.205 A vous de trouver le code que vous pouvez ré-utiliser !