0:00:00.230,0:00:05.300
Maintenant, parlons un peu de quelque chose[br]que vous avez déjà beaucoup utilisé : les fonctions.

0:00:05.339,0:00:11.129
A chaque fois que vous avez utilisé "rect()" ou "fill()", [br]vous avez appelé des fonctions.

0:00:11.137,0:00:14.747
Et ces fonctions ont dessinés ce que vous[br]leur avez demandé.

0:00:14.831,0:00:16.811
Qu'est-ce qu'une fonction ?

0:00:16.811,0:00:20.181
C'est un ensemble de code qui est regroupé [br]et auquel on donne un nom

0:00:20.198,0:00:23.538
pour pouvoir le ré-utiliser plusieurs fois.

0:00:23.538,0:00:26.178
Pensez un peu à la fonction "rect()".[br]Qu'est-ce qu'elle fait ?

0:00:26.188,0:00:28.698
Elle dessine 4 lignes, n'est-ce pas ?

0:00:28.698,0:00:31.508
On pourrait le faire en appelant [br]4 fois la fonction "line()".

0:00:31.623,0:00:34.103
Voilà... on obtient un rectangle.

0:00:34.103,0:00:38.703
Mais on s'est rendu compte qu'on voulait[br]souvent dessiner des rectangles.

0:00:38.900,0:00:44.260
Et c'est assez ennuyeux d'avoir à calculer[br]à chaque la façon de dessiner les 4 lignes.

0:00:44.632,0:00:49.232
Donc, on a créé une fonction "rect()" qui fait[br]exactement le dessin des 4 lignes.

0:00:49.476,0:00:53.746
Du coup, on peut dessiner un rectangle [br]avec beaucoup moins de code.

0:00:54.599,0:01:02.139
C'est plutôt sympa ! "rect()" est l'une des fonctions[br]que l'on vous permet d'utiliser sur la Khan Academy

0:01:02.261,0:01:07.251
Mais vous pouvez aussi créer vos propres[br]fonctions et les réutiliser dans vos programmes.

0:01:07.709,0:01:13.919
Par exemple, imaginons qu'on fasse un programme[br]et qu'on veuille dessiner Winston plusieurs fois.

0:01:14.373,0:01:19.093
Car on souhaite raconter son histoire[br]et le dessiner à plusieurs époques.

0:01:19.218,0:01:23.648
Donc, voici à quoi peut ressembler le code[br]pour dessiner le visage de Winston.

0:01:24.071,0:01:28.521
On a les variables "faceX" et "faceY"[br]pour déterminer le centre du visage.

0:01:28.690,0:01:32.350
Et on dessine ses yeux et sa bouche [br]en fonction de ces deux variables.

0:01:32.358,0:01:36.798
Pour l'instant, le programme analyse le code[br]qui n'est pas dans une fonction.

0:01:37.138,0:01:40.828
Donc il l'exécute.[br]Il l'exécute seulement une seule fois.

0:01:41.011,0:01:43.911
OK. Transformons ça avec une fonction !

0:01:43.940,0:01:48.420
Pour faire ça, cela ressemble à la façon[br]de définir une variable.

0:01:48.686,0:01:54.496
On écrit : "var drawWinston"[br](on choisit un nom clair) ici, c'est[br]"dessineWinston"

0:01:54.496,0:01:56.436
Puis on écrit un signe égale ( = ).

0:01:56.436,0:02:01.386
Ensuite, au lieu d'indiquer un nombre [br]ou une chaine, on écrit : "function"

0:02:01.487,0:02:05.997
(Attention à bien l'écrire)[br]Ensuite deux parenthèses ( )

0:02:06.063,0:02:10.633
Et enfin, deux accolades : { }[br]et on termine par un point-virgule.

0:02:10.746,0:02:18.539
Ce qu'il nous reste à faire, c'est de mettre[br]tout le code nécessaire à l'intérieur[br]des accolades.

0:02:18.539,0:02:23.182
Donc on prend tout ce code, là...[br]Et on le mets dans la fonction...

0:02:23.182,0:02:26.916
On indente le code (avec la touche Tabulation).[br]Et... Voilà !

0:02:26.916,0:02:30.546
Donc on a maintenant une variable qui[br]contient une fonction.

0:02:30.556,0:02:34.256
Dit autrement, on a donné un "nom"[br]à ce bloc de code.

0:02:34.256,0:02:37.256
Ainsi, quand on en aura besoin, on pourra[br]demander à notre programme...

0:02:37.385,0:02:40.835
de chercher ce bloc de code,[br]et de l'exécuter.

0:02:40.835,0:02:43.965
Donc, ce bloc de code est maintenant[br]ré-utilisable.

0:02:43.965,0:02:49.455
Remarquez qu'on n'a plus le dessin de Winston.[br]On a perdu Winston ! Ou est-il passé ?

0:02:49.591,0:02:54.071
OK. Ce qu'il s'est passé, c'est que quand on a [br]mis ce bloc de code dans la fonction,

0:02:54.071,0:02:58.051
On a indiqué à l'ordinateur qu'on voulait[br]pouvoir exécuter le code plus tard...

0:02:58.140,0:03:01.180
et ne l'exécuter que quand on lui dira de le faire.

0:03:01.180,0:03:04.470
Donc on a besoin maintenant de lui[br]demander d'exécuter ce code.

0:03:04.594,0:03:10.084
On dit, qu'on a besoin "d’appeler la fonction".[br]exactement comme on l'a fait pour rect() ou line().

0:03:10.084,0:03:16.300
Pour ça, on écrit le nom de la fonction : drawWinston.[br]Puis, nos deux parenthèses : ( )

0:03:16.300,0:03:20.847
Et un point-virgule ;[br]Et voilà ! Voilà notre Winston !

0:03:21.101,0:03:22.781
C'est cool, ça !

0:03:22.946,0:03:25.006
Bon. Peut être que vous [br]ne trouvez pas ça si cool !

0:03:25.133,0:03:29.133
Car on a finalement exactement[br]le même résultat qu'au début.

0:03:29.452,0:03:33.452
Mais l'utilité des fonction est [br]qu'on peut les ré-utiliser.

0:03:33.570,0:03:37.870
Donc, faisons ça maintenant.[br]On copie et colle l'appel de la fonction.

0:03:37.994,0:03:43.504
Ici, et là... Hum...[br]On ne voit rien de différent !

0:03:43.574,0:03:46.314
En fait, ça marche bien...

0:03:46.383,0:03:50.723
Il dessine plusieurs Winston,[br]mais tous au même endroit !

0:03:50.786,0:03:55.296
Si je pouvais voir avec des rayons X,[br]je verrais 3 Winstons.

0:03:55.402,0:03:59.632
Malheureusement, ce n'est pas le cas...[br]Je ne sais pas pour vous ? ! ?

0:03:59.812,0:04:04.412
OK. On peut modifier un peu notre fonction[br]pour rendre ça plus clair.

0:04:04.505,0:04:08.505
Vous voyez ces deux variables faceX et faceY ?[br]Elles contiennent toujours 202 et 208.

0:04:08.545,0:04:14.065
On peut changer ça pour utiliser un nombre[br]aléatoire compris entre 50 et 350.

0:04:14.177,0:04:18.977
Et on fait pareil pour faceY [br]pour le rendre aléatoire aussi...

0:04:19.244,0:04:23.924
Du coup, à chaque fois que la fonction est appelée[br]cela génère une position aléatoires différente.

0:04:24.265,0:04:28.555
Si on appuie sur "Redémarrer", on obtient[br]3 Winston à des endroits différents.

0:04:28.804,0:04:31.124
OK ![br]C'est génial ça !

0:04:31.333,0:04:35.123
Car il aurait fallut beaucoup de lignes de code[br]pour faire ça sans les fonctions.

0:04:35.254,0:04:38.534
Il aurait fallut 3 fois plus de code !

0:04:38.630,0:04:43.250
On peut encore améliorer ça...Car c'est pas sûr[br]qu'on ai besoin de le positionner aléatoirement !

0:04:43.318,0:04:47.318
On préfère surement pouvoir le positionner[br]à l'endroit que l'on souhaite sur l'écran.

0:04:47.456,0:04:51.456
Donc, regardez l'exposé suivant, car vous verrez[br]comment passer des paramètres à la fonction.

0:04:51.592,0:04:55.592
Et cela vous permettra de faire exactement ça !