Maintenant, parlons un peu de quelque chose que vous avez déjà beaucoup utilisé : les fonctions. A chaque fois que vous avez utilisé "rect()" ou "fill()", vous avez appelé des fonctions. Et ces fonctions ont dessinés ce que vous leur avez demandé. Qu'est-ce qu'une fonction ? C'est un ensemble de code qui est regroupé et auquel on donne un nom pour pouvoir le ré-utiliser plusieurs fois. Pensez un peu à la fonction "rect()". Qu'est-ce qu'elle fait ? Elle dessine 4 lignes, n'est-ce pas ? On pourrait le faire en appelant 4 fois la fonction "line()". Voilà... on obtient un rectangle. Mais on s'est rendu compte qu'on voulait souvent dessiner des rectangles. Et c'est assez ennuyeux d'avoir à calculer à chaque la façon de dessiner les 4 lignes. Donc, on a créé une fonction "rect()" qui fait exactement le dessin des 4 lignes. Du coup, on peut dessiner un rectangle avec beaucoup moins de code. C'est plutôt sympa ! "rect()" est l'une des fonctions que l'on vous permet d'utiliser sur la Khan Academy Mais vous pouvez aussi créer vos propres fonctions et les réutiliser dans vos programmes. Par exemple, imaginons qu'on fasse un programme et qu'on veuille dessiner Winston plusieurs fois. Car on souhaite raconter son histoire et le dessiner à plusieurs époques. Donc, voici à quoi peut ressembler le code pour dessiner le visage de Winston. On a les variables "faceX" et "faceY" pour déterminer le centre du visage. Et on dessine ses yeux et sa bouche en fonction de ces deux variables. Pour l'instant, le programme analyse le code qui n'est pas dans une fonction. Donc il l'exécute. Il l'exécute seulement une seule fois. OK. Transformons ça avec une fonction ! Pour faire ça, cela ressemble à la façon de définir une variable. On écrit : "var drawWinston" (on choisit un nom clair) ici, c'est "dessineWinston" Puis on écrit un signe égale ( = ). Ensuite, au lieu d'indiquer un nombre ou une chaine, on écrit : "function" (Attention à bien l'écrire) Ensuite deux parenthèses ( ) Et enfin, deux accolades : { } et on termine par un point-virgule. Ce qu'il nous reste à faire, c'est de mettre tout le code nécessaire à l'intérieur des accolades. Donc on prend tout ce code, là... Et on le mets dans la fonction... On indente le code (avec la touche Tabulation). Et... Voilà ! Donc on a maintenant une variable qui contient une fonction. Dit autrement, on a donné un "nom" à ce bloc de code. Ainsi, quand on en aura besoin, on pourra demander à notre programme... de chercher ce bloc de code, et de l'exécuter. Donc, ce bloc de code est maintenant ré-utilisable. Remarquez qu'on n'a plus le dessin de Winston. On a perdu Winston ! Ou est-il passé ? OK. Ce qu'il s'est passé, c'est que quand on a mis ce bloc de code dans la fonction, On a indiqué à l'ordinateur qu'on voulait pouvoir exécuter le code plus tard... et ne l'exécuter que quand on lui dira de le faire. Donc on a besoin maintenant de lui demander d'exécuter ce code. On dit, qu'on a besoin "d’appeler la fonction". exactement comme on l'a fait pour rect() ou line(). Pour ça, on écrit le nom de la fonction : drawWinston. Puis, nos deux parenthèses : ( ) Et un point-virgule ; Et voilà ! Voilà notre Winston ! C'est cool, ça ! Bon. Peut être que vous ne trouvez pas ça si cool ! Car on a finalement exactement le même résultat qu'au début. Mais l'utilité des fonction est qu'on peut les ré-utiliser. Donc, faisons ça maintenant. On copie et colle l'appel de la fonction. Ici, et là... Hum... On ne voit rien de différent ! En fait, ça marche bien... Il dessine plusieurs Winston, mais tous au même endroit ! Si je pouvais voir avec des rayons X, je verrais 3 Winstons. Malheureusement, ce n'est pas le cas... Je ne sais pas pour vous ? ! ? OK. On peut modifier un peu notre fonction pour rendre ça plus clair. Vous voyez ces deux variables faceX et faceY ? Elles contiennent toujours 202 et 208. On peut changer ça pour utiliser un nombre aléatoire compris entre 50 et 350. Et on fait pareil pour faceY pour le rendre aléatoire aussi... Du coup, à chaque fois que la fonction est appelée cela génère une position aléatoires différente. Si on appuie sur "Redémarrer", on obtient 3 Winston à des endroits différents. OK ! C'est génial ça ! Car il aurait fallut beaucoup de lignes de code pour faire ça sans les fonctions. Il aurait fallut 3 fois plus de code ! On peut encore améliorer ça...Car c'est pas sûr qu'on ai besoin de le positionner aléatoirement ! On préfère surement pouvoir le positionner à l'endroit que l'on souhaite sur l'écran. Donc, regardez l'exposé suivant, car vous verrez comment passer des paramètres à la fonction. Et cela vous permettra de faire exactement ça !