1
00:00:01,109 --> 00:00:03,193
Il y a plusieurs façon de 
réaliser des animations,

2
00:00:03,193 --> 00:00:05,241
mais le principe de base est
toujours le même :

3
00:00:05,241 --> 00:00:07,132
Si vous prenez un ensemble de dessins

4
00:00:07,132 --> 00:00:09,726
où chacun est un peu différent du précédent

5
00:00:09,726 --> 00:00:11,462
et que vous les affichez assez rapidement,

6
00:00:11,462 --> 00:00:13,267
ils auront l'air de bouger.

7
00:00:13,267 --> 00:00:16,167
Il y a bien longtemps, tous les dessins
étaient dessinés à la main.

8
00:00:16,167 --> 00:00:19,696
Et c'était TRES long de faire assez de 
dessins pour seulement 3 secondes d'animation.

9
00:00:19,696 --> 00:00:22,877
Heureusement pour nous,
on utilise les nouvelles technologies.

10
00:00:22,877 --> 00:00:26,130
C'est très simple de réaliser 
une animation avec du code.

11
00:00:26,130 --> 00:00:27,998
Et je vais vous montrer ça !

12
00:00:27,998 --> 00:00:31,468
Sur la droite, vous voyez cette voiture
dessinée sur un fond jaune.

13
00:00:31,468 --> 00:00:34,965
Si, si... j'ai dessiné ma voiture moi-même, merci !

14
00:00:34,965 --> 00:00:38,575
Bon... ici, vous voyez le dessin du fond d'écran.

15
00:00:38,575 --> 00:00:42,531
Et la voiture n'a pas de contour, on utilise
la fonction "noStroke()" pour ça.

16
00:00:42,531 --> 00:00:47,471
Et ici, on a créé une variable "x", qui est la 
position de la voiture, qui vaut 10.

17
00:00:47,471 --> 00:00:49,456
Et vous voyez que si je change cette valeur,

18
00:00:49,456 --> 00:00:52,105
la voiture se déplace en fonction.

19
00:00:52,105 --> 00:00:53,531
Remettons 10.

20
00:00:53,531 --> 00:00:57,594
Et ici, on définit la couleur de remplissage de la voiture
et on dessine deux rectangles.

21
00:00:57,594 --> 00:01:00,063
Le premier rectangle est pour celui du bas

22
00:01:00,063 --> 00:01:02,483
et celui-là est pour le haut.

23
00:01:02,483 --> 00:01:05,027
Puis, ici, on fait la même chose pour les roues

24
00:01:05,027 --> 00:01:06,979
On définit la couleur et on dessine deux ellipses :

25
00:01:06,979 --> 00:01:08,648
Une positionnée à x+25

26
00:01:08,648 --> 00:01:10,191
et l'autre à x+75

27
00:01:10,191 --> 00:01:12,828
Et à la fin on a ce nouveau code.

28
00:01:12,828 --> 00:01:15,169
On appèle ce code la "définition d'une fonction".

29
00:01:15,169 --> 00:01:16,691
Vous verrez ça en détail plus tard.

30
00:01:16,691 --> 00:01:19,566
Pour l'instant on va juste l'utiliser.

31
00:01:19,566 --> 00:01:24,292
La chose importante, ici, est de repérer 
le mot-clé "draw" ("dessiner" en anglais).

32
00:01:24,292 --> 00:01:25,190
avec les accolades. Une qui est ouverte ici,

33
00:01:25,190 --> 00:01:26,750
l'autre qui est fermée ici.

34
00:01:26,750 --> 00:01:30,530
Cet ensemble, est ce qu'on appèle
la boucle de dessin ou la boucle d'animation.

35
00:01:30,530 --> 00:01:35,295
Tout ce que vous mettrez entre les accolades
sera exécuté sans arrêt à une vitesse très rapide.

36
00:01:35,295 --> 00:01:36,702
C'est pour ça que ça s'appèle une boucle.

37
00:01:36,702 --> 00:01:41,792
Et le code à l'extérieur des accolades sera exécuté
qu'une fois au tout début du programme.

38
00:01:41,792 --> 00:01:45,529
OK. Pour une animation, la première étape consiste à déplacer 
votre code de dessin à l'intérieur des accolades.

39
00:01:45,529 --> 00:01:47,833
Comme ça, votre dessin sera dessiné sans arrêt.

40
00:01:47,833 --> 00:01:51,661
Faisons ça... Je vais prendre tout ce code... là.

41
00:01:51,661 --> 00:01:54,261
Et le mettre à l'intérieur de ma boucle.

42
00:01:54,261 --> 00:02:02,471
Pour bien voir que ce code est entre les accolades, 
je vais l'indenter en sélectionnant le code 
et en pressant la touche "Tab" (tabulation).

43
00:02:02,471 --> 00:02:05,746
Et maintenant, je vois mieux que le code est 
situé entre les accolades.

44
00:02:05,746 --> 00:02:10,208
En faisant ça, on a l'impression que rien n'a changé.

45
00:02:10,208 --> 00:02:17,788
Car, la première fois que cette boucle est exécutée
l'ordinateur définit la variable "x", lui affecte 10, dessine
deux rectangles et deux ellipses.

46
00:02:17,788 --> 00:02:24,289
Puis, il va recommencer pour définir "x", dessiner 
2 rectangles et 2 ellipses.

47
00:02:24,289 --> 00:02:28,213
Puis, il va définir "x", dessiner 2 rectangles,....
Exactement toujours les mêmes choses !

48
00:02:28,213 --> 00:02:31,151
Rien ne change ! Donc on ne voit aucune animation.

49
00:02:31,151 --> 00:02:34,660
Il ne fait que dessiner les mêmes rectangles et les ellipses
toujours au dessus des précédents.

50
00:02:34,660 --> 00:02:40,395
Or souvenez-vous : on a dit que pour faire une animation,
il fallait que quelque chose soit différent entre chaque dessin.

51
00:02:40,395 --> 00:02:42,761
Donc si je veux que ma voiture avance,

52
00:02:42,761 --> 00:02:45,361
je dois changer la valeur de la variable "x",
n'est-ce pas ?

53
00:02:45,361 --> 00:02:48,052
Donc, aller je le change en... 11.

54
00:02:48,052 --> 00:02:51,117
Ha ! non ! Maintenant, il dessine sans arrêt
à la position 11...


55
00:02:51,117 --> 00:02:57,564
Bon... Comment vais-je faire pour changer la valeur de "x" 
à chaque fois que l'ordinateur exécute la boucle ?

56
00:02:57,564 --> 00:02:59,707
OK. Regardez cette astuce simplement magique !

57
00:02:59,707 --> 00:03:02,789
Regardez... ce "var x" crée une nouvelle variable.

58
00:03:02,789 --> 00:03:08,061
Quand on met ce code DANS la boucle, il va créer
une nouvelle variable à chaque fois, sans arrêt.

59
00:03:08,061 --> 00:03:13,467
On a besoin de créer cette variable à l'extérieur de la boucle.
Comme ça, elle sera créée q'une seule fois.

60
00:03:13,467 --> 00:03:22,770
Et ainsi, à chaque boucle, l'ordinateur va pouvoir réutiliser la 
même variable et elle aura la valeur qu'on lui aura donné.

61
00:03:22,770 --> 00:03:31,295
Allez, je fais ça. Je prends cette variable, je la mets à 
l'extérieur de la boucle. Elle est donc créée qu'une fois.

62
00:03:31,295 --> 00:03:38,291
Donc à chaque boucle, l'ordinateur va réutiliser 
la même variable. Sa valeur, pour l'instant est toujours de 11.

63
00:03:38,291 --> 00:03:41,757
Donc elle va rester à 11.
Voici le tour de magie !

64
00:03:41,757 --> 00:03:46,148
Quelque part à l'intérieur de la boucle, on va changer
la valeur de "x" pour qu'elle soit un peu plus grande.

65
00:03:46,148 --> 00:03:50,539
Comme : x contient l'ancienne valeur de "x" plus 1.

66
00:03:50,539 --> 00:03:54,931
Yeah !! ça marche !!!

67
00:03:54,931 --> 00:04:02,823
Sauf que... il manque un truc. En fait, on a oublié de
dessiner le fond d'écran à l'intérieur de la boucle.

68
00:04:02,823 --> 00:04:07,147
Donc il dessine la voiture en la déplaçant mais au dessus 
des précédentes....

69
00:04:07,147 --> 00:04:12,190
Donc, si je prends cette ligne pour la mettre dans la boucle,
comme ça...

70
00:04:12,190 --> 00:04:15,984
Et j'appuie sur le bouton "restart" (Redémarrer") pour
voir ma voiture au début.

71
00:04:15,984 --> 00:04:18,269
Yeah !! C'est parfait !!

72
00:04:18,269 --> 00:04:22,386
Si je veux accélérer ma voiture, il suffit de changer
la façon d'augmenter "x" à chaque passage.

73
00:04:22,386 --> 00:04:28,862
Donc si je mets 10, Whooooo ! Elle sort de l'écran !
Et je peux mettre un nombre négatif "x-10" et...

74
00:04:28,862 --> 00:04:34,552
Elle repasse ! puis positif... Hoops ! la voilà !

75
00:04:34,552 --> 00:04:36,550
Bon. Voici les choses importantes à retenir :

76
00:04:36,550 --> 00:04:43,513
Cette partie, ici, est appelée la boucle d'animation.
les dessins qui seront à l'intérieur seront dessinés 
en permanence, sans arrêt.

77
00:04:43,513 --> 00:04:52,015
Puis, vous créez vos variables à l'extérieur de la boucle.
C'est très important, car cela permet de réutiliser la même
variable dans la boucle.

78
00:04:52,015 --> 00:04:55,854
Puis, à l'intérieur de la boucle, ici, on va changer la valeur 
de la variable un petit peu...

79
00:04:55,854 --> 00:05:02,315
souvent, en utilisant sa précédente valeur 
plus ou moins un nombre.

80
00:05:02,315 --> 00:05:07,834
Enfin, on utilise cette variable pour que notre dessin 
soit un peu différent à chaque fois.

81
00:05:07,881 --> 00:05:10,171
Et... voilà !