[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.12,0:00:03.18,Default,,0000,0000,0000,,A ce stade, vous avez peut-être\Nréalisé que vous avez défini
Dialogue: 0,0:00:03.18,0:00:07.20,Default,,0000,0000,0000,,une fonction particulière à chaque fois\Nque vous vouliez animer votre programme,
Dialogue: 0,0:00:07.20,0:00:09.19,Default,,0000,0000,0000,,la fonction `draw`.
Dialogue: 0,0:00:09.19,0:00:13.44,Default,,0000,0000,0000,,En guise de rappel, voici à nouveau\Nnotre program d'animation de voiture.
Dialogue: 0,0:00:13.44,0:00:16.99,Default,,0000,0000,0000,,il a la variable appelée x,\Nqui commence avec une valeur de 11.
Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,,Puis dans la fonction `draw`, il dessine\Nla voiture à la position contenue dans x,
Dialogue: 0,0:00:22.65,0:00:26.64,Default,,0000,0000,0000,,puis il ajoute trois à cette variable x,\Net ceci à chaque appel de la fonction.
Dialogue: 0,0:00:26.64,0:00:28.50,Default,,0000,0000,0000,,A cela nous donne une voiture
Dialogue: 0,0:00:28.50,0:00:32.45,Default,,0000,0000,0000,,qui se déplace constamment de \Ntrois pixels à travers l'écran.
Dialogue: 0,0:00:32.45,0:00:34.72,Default,,0000,0000,0000,,Donc voilà comment cela fonctionne.
Dialogue: 0,0:00:34.72,0:00:37.68,Default,,0000,0000,0000,,Maintenant que vous avez appris\Nà faire vos propres fonctions,
Dialogue: 0,0:00:37.68,0:00:41.58,Default,,0000,0000,0000,,vous vous demandez peut-être,\Nce qu'est cette fonction `draw`?
Dialogue: 0,0:00:41.58,0:00:44.11,Default,,0000,0000,0000,,Pourquoi est elle nommée `draw`?
Dialogue: 0,0:00:44.11,0:00:45.90,Default,,0000,0000,0000,,Est-ce une fonction personnalisée?
Dialogue: 0,0:00:45.90,0:00:48.89,Default,,0000,0000,0000,,Et ce sont de très bonnes questions.
Dialogue: 0,0:00:48.89,0:00:51.98,Default,,0000,0000,0000,,Voyez vous, dans la\Nlibrairie ProcessingJS,
Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,,la fonction `draw` est l'une des\Nquelques fonctions prédéfinies
Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,,qui donne à notre programme un\Nmeilleur contrôle de la zone de dessin.
Dialogue: 0,0:01:01.01,0:01:04.83,Default,,0000,0000,0000,,Les fonctions prédéfinies sont celle\Nqui ont déjà été définies
Dialogue: 0,0:01:04.83,0:01:07.21,Default,,0000,0000,0000,,par la librairie ProcessingJS.
Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,,Mais d'habitude aucun code\Nn'y est défini.
Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,,Par exemple, dans la librairie\NProcessingJS, il y a un code comme ça:
Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,,`var draw = function() { }`
Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,,Et là, c'est simplement vide,\Ncomplètement vide.
Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,,Comme nous chargeons ProcessingJS\Ndans chaque programme de la Khan Academy
Dialogue: 0,0:01:28.62,0:01:30.90,Default,,0000,0000,0000,,Vous n'avez jamais vu ce code.
Dialogue: 0,0:01:30.90,0:01:33.65,Default,,0000,0000,0000,,Mais croyez moi, il existe.
Dialogue: 0,0:01:33.65,0:01:41.05,Default,,0000,0000,0000,,Maintenant je vais commenter cela, car\NProcessingJS le fait déjà pour nous.
Dialogue: 0,0:01:41.05,0:01:45.31,Default,,0000,0000,0000,,Maintenant si vous redéfinissez `draw`,\Ndans votre program,
Dialogue: 0,0:01:45.31,0:01:49.81,Default,,0000,0000,0000,,Cette nouvelle version masque\Nl'ancienne définition vide.
Dialogue: 0,0:01:49.81,0:01:51.63,Default,,0000,0000,0000,,Et maintenant la fonction `draw`
Dialogue: 0,0:01:51.63,0:01:55.50,Default,,0000,0000,0000,,fait des choses passionnantes,\Ncomme dessiner une voiture.
Dialogue: 0,0:01:55.50,0:02:01.38,Default,,0000,0000,0000,,Maintenant la questions est: pourquoi la\Nfonction `draw` est appelée en continu?
Dialogue: 0,0:02:01.38,0:02:05.96,Default,,0000,0000,0000,,Eh bien, il y a aussi du code\Ndans la librairie ProcessingJS
Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,,qui définit une minuterie et appel\Nla fonction `draw` de manière répétée,
Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,,encore et encore et encore.
Dialogue: 0,0:02:13.100,0:02:19.24,Default,,0000,0000,0000,,Nous devons nommer la fonction `draw`,\Ncar c'est le nom de la fonction
Dialogue: 0,0:02:19.24,0:02:22.07,Default,,0000,0000,0000,,que ProcessingJS appel de manière répétée.
Dialogue: 0,0:02:22.07,0:02:27.54,Default,,0000,0000,0000,,Si nous renommions cela, par emple\Nnous la renommons `drawCar`.
Dialogue: 0,0:02:27.54,0:02:33.73,Default,,0000,0000,0000,,D'abord nous avons une erreur "undefined",\Ndonc il faudrait écrire `var drawCar`.
Dialogue: 0,0:02:33.73,0:02:37.09,Default,,0000,0000,0000,,Maintenant vous pouvez voir, si nous\Nrenommons cela : `drawCar`,
Dialogue: 0,0:02:37.09,0:02:39.65,Default,,0000,0000,0000,,nous ne voyons plus d'animation.
Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,,Et c'est parce que cette fonction\Nn'est plus appelée de manière répétée,
Dialogue: 0,0:02:44.69,0:02:47.19,Default,,0000,0000,0000,,car elle n'est pas nommée draw.
Dialogue: 0,0:02:47.19,0:02:50.80,Default,,0000,0000,0000,,Donc nous avons mis le code à\Nappeler de manière répétée
Dialogue: 0,0:02:50.80,0:02:55.91,Default,,0000,0000,0000,,dans une fonction qui s'écrit `draw`.
Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,,Donc je vais juste le refaire encore,\Net je vais appeler `drawCar`ici.
Dialogue: 0,0:03:00.59,0:03:03.24,Default,,0000,0000,0000,,Aha! Ca remarche.
Dialogue: 0,0:03:03.24,0:03:07.21,Default,,0000,0000,0000,,Ok, donc il a besoin de s'appeler draw,
Dialogue: 0,0:03:07.21,0:03:12.97,Default,,0000,0000,0000,,et cela veut aussi dire que vous ne devez\Npas nommer vos propres fonctions `draw`,
Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,,a part si vous voulez qu'elle soit traitée\Nparticulièrement et répétée en continu.
Dialogue: 0,0:03:18.23,0:03:23.53,Default,,0000,0000,0000,,Et souvenez vous, vous ne pouvez pas avoir\Nplusieurs fonctions nommées `draw`.
Dialogue: 0,0:03:23.53,0:03:27.89,Default,,0000,0000,0000,,Seul la dernière définition va\Nêtre prise en compte.
Dialogue: 0,0:03:27.89,0:03:30.81,Default,,0000,0000,0000,,Si on a un `rect` la dedans--
Dialogue: 0,0:03:30.81,0:03:35.14,Default,,0000,0000,0000,,Donc la nous pouvons voir que notre\Nvoiture n'est plus dessinée,
Dialogue: 0,0:03:35.14,0:03:40.50,Default,,0000,0000,0000,,seul le rectangle est dessiné à la place,\Ncar seul la dernière définition compte.
Dialogue: 0,0:03:40.50,0:03:43.17,Default,,0000,0000,0000,,Donc débarrassons-nous de celle-là.
Dialogue: 0,0:03:43.17,0:03:48.29,Default,,0000,0000,0000,,La fonction draw n'est pas la seule\Nfonction prédéfinie
Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,,qui a un comportement spécial.
Dialogue: 0,0:03:50.50,0:03:52.68,Default,,0000,0000,0000,,Il y a aussi un groupe de fonctions
Dialogue: 0,0:03:52.68,0:03:56.69,Default,,0000,0000,0000,,pour répondre aux actions de la souris\Net aux appuis de touches du clavier.
Dialogue: 0,0:03:56.69,0:04:01.62,Default,,0000,0000,0000,,Disons que l'on veut un program\Nqui dessine une ellipse colorée
Dialogue: 0,0:04:01.62,0:04:04.72,Default,,0000,0000,0000,,à l'emplacement ou l'utilisateur déplace\Nle pointeur de la souris.
Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,,Donc nous pouvons faire cela avec\Nune fonction comme ça.
Dialogue: 0,0:04:09.04,0:04:15.67,Default,,0000,0000,0000,,[frappe au clavier]
Dialogue: 0,0:04:19.100,0:04:22.54,Default,,0000,0000,0000,,Ok, oh, magnifique.
Dialogue: 0,0:04:22.54,0:04:27.22,Default,,0000,0000,0000,,Maintenant, cette fonction est appelée\Nencore et encore,
Dialogue: 0,0:04:27.22,0:04:31.18,Default,,0000,0000,0000,,même si l'utilisateur ne déplace\Npas la souris, comme maintenant.
Dialogue: 0,0:04:31.18,0:04:34.70,Default,,0000,0000,0000,,Et ce programme, il fonctionne, il fait ce\Nque nous voulons qu'il fasse.
Dialogue: 0,0:04:34.70,0:04:37.90,Default,,0000,0000,0000,,Il dessine ces jolies ellipses\Npartout sur l'écran.
Dialogue: 0,0:04:37.90,0:04:42.11,Default,,0000,0000,0000,,Mais en fait, il y a un meilleur\Nmoyen de faire la même chose
Dialogue: 0,0:04:42.11,0:04:44.29,Default,,0000,0000,0000,,qui est plus efficace.
Dialogue: 0,0:04:44.29,0:04:51.89,Default,,0000,0000,0000,,Nous pouvons changer la fonction `draw` en\N`mouseMoved`, et voyons.
Dialogue: 0,0:04:51.89,0:04:54.58,Default,,0000,0000,0000,,Ca marche toujours.
Dialogue: 0,0:04:54.58,0:04:58.36,Default,,0000,0000,0000,,Vous voyez, notre environnement regarde si\Nnotre programme
Dialogue: 0,0:04:58.36,0:05:00.75,Default,,0000,0000,0000,,à définit une fonction `mouseMoved` ,
Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,,et si c'est le cas, il appel cette\Nfonction quand la souris se déplace.
Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,,Mais elle ne sera pas appelée\Nsi l'utilisateur ne déplace pas la souris.
Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,,Donc avant, on appelait le code dans\Nla fonction `draw` lorsque
Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,,nous n'en avions pas besoins,\Nencore et encore
Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,,Et maintenant, on appelle ce code\Ndans `mouseMoved`
Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,,seulement lorsque mouseX ou mouseY\Na changé.
Dialogue: 0,0:05:23.29,0:05:27.31,Default,,0000,0000,0000,,Donc notre programme est plus efficace,\Net c'est une bonne chose.
Dialogue: 0,0:05:27.31,0:05:30.73,Default,,0000,0000,0000,,Généralement, si vous voulez changer le\Nrésultat de votre programme
Dialogue: 0,0:05:30.73,0:05:34.52,Default,,0000,0000,0000,,seulement quand l'utilisateur bouge la\Nsouris, alors c'est mieux de coder
Dialogue: 0,0:05:34.52,0:05:37.21,Default,,0000,0000,0000,,dans la fonction `mouseMoved`.
Dialogue: 0,0:05:37.21,0:05:40.99,Default,,0000,0000,0000,,Et il y a encore quelques autres\Nfonctions prédéfinies comme ça,
Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,,dont vous pouvez trouver plus d'exemples\Ndans la documentation.
Dialogue: 0,0:05:44.66,0:05:48.87,Default,,0000,0000,0000,,Comme `mousePressed`, `mouseReleased`,\N`keyPressed` et plus encore.
Dialogue: 0,0:05:48.87,0:05:53.99,Default,,0000,0000,0000,,Donc souvenez-vous, si vous voulez\Nutiliser une fonction prédéfinie spéciale,
Dialogue: 0,0:05:53.99,0:05:59.24,Default,,0000,0000,0000,,comme `mouseMoved` ou `draw`, écrivez-là \Ncorrectement, et utilisez-là correctement.
Dialogue: 0,0:05:59.24,0:06:03.40,Default,,0000,0000,0000,,Si vous ne le faites pas, assurez-vous de\Ndonner à vos fonctions personnalisée
Dialogue: 0,0:06:03.40,0:06:07.06,Default,,0000,0000,0000,,un nouveau nom unique.