1
00:00:00,820 --> 00:00:02,871
Commençons par le commencement...

2
00:00:02,871 --> 00:00:04,592
On va tracer des formes.

3
00:00:04,592 --> 00:00:06,694
Plus tard, on ajoutera de la couleur,

4
00:00:06,694 --> 00:00:09,324
on créera des animations.

5
00:00:09,324 --> 00:00:11,174
Mais pour l’instant,

6
00:00:11,174 --> 00:00:14,636
on va commencer par dessiner un rectangle.

7
00:00:14,636 --> 00:00:16,516
Pour ça, on écrit à gauche « rect »
pour « rectangle »,

8
00:00:16,516 --> 00:00:20,756
on ouvre une parenthèse, 
et on ajoute 4 nombres,

9
00:00:20,756 --> 00:00:23,938
on ferme la parenthèse 
et on termine par un point-virgule.

10
00:00:23,938 --> 00:00:25,595
Hey ! Regardez à droite, 
on a dessiné un rectangle !

11
00:00:25,595 --> 00:00:27,753
Allez, on en ajoute un autre...

12
00:00:27,753 --> 00:00:30,011
... en utilisant d’autres nombres :

13
00:00:30,011 --> 00:00:32,177
certains plus grands,

14
00:00:32,177 --> 00:00:34,043
d'autres plus petits.

15
00:00:34,043 --> 00:00:36,071
Et voilà : on a obtenu 
un petit rectangle cette fois-ci !

16
00:00:36,071 --> 00:00:39,256
En fait, si on change le premier nombre,

17
00:00:39,256 --> 00:00:40,741
ça déplace le rectangle horizontalement.

18
00:00:40,741 --> 00:00:43,895
Si on change le dernier nombre,

19
00:00:43,895 --> 00:00:46,251
ça change sa hauteur.

20
00:00:46,251 --> 00:00:47,517
OK.

21
00:00:47,517 --> 00:00:51,265
Bon, voyons maintenant 
comment ça fonctionne.

22
00:00:51,265 --> 00:00:53,988
En fait, un ordinateur ne fait qu’obéir
aux ordres qu’on lui donne,

23
00:00:53,988 --> 00:00:55,511
un peu comme un chien obéissant.

24
00:00:55,511 --> 00:00:58,974
On peut lui demander de s’asseoir, 
ou de rouler sur le dos.

25
00:00:58,974 --> 00:01:02,033
On a juste à lui donner un ordre.

26
00:01:02,033 --> 00:01:05,752
Si on voulait demander à l’ordinateur de
s’asseoir [« sit down » en anglais] :

27
00:01:05,752 --> 00:01:08,618
on le ferait en écrivant le nom de la commande…

28
00:01:08,618 --> 00:01:11,262
« sit » ["assis" en anglais] ;

29
00:01:11,262 --> 00:01:13,256
puis, deux parenthèses

30
00:01:13,256 --> 00:01:16,097
et on termine par un point-virgule...

31
00:01:16,097 --> 00:01:19,528
pour lui demander d’exécuter cet ordre.

32
00:01:19,528 --> 00:01:22,109
Et là, l’ordinateur devrait s’asseoir !

33
00:01:22,109 --> 00:01:25,264
Bon, nos ordinateurs ne sont pas 
des chiens, en fait !

34
00:01:25,264 --> 00:01:27,210
Ils ne savent pas s’asseoir !

35
00:01:27,210 --> 00:01:30,256
Mais ils savent dessiner des rectangles...

36
00:01:30,256 --> 00:01:31,864
... quand on leur écrit « rect » !

37
00:01:31,864 --> 00:01:34,327
Voyons ça !

38
00:01:34,327 --> 00:01:37,160
On écrit « rect » : c’est le nom de la fonction,

39
00:01:37,160 --> 00:01:39,598
puis les deux parenthèses

40
00:01:39,598 --> 00:01:42,036
pour lui indiquer ce qu’il doit faire.

41
00:01:42,036 --> 00:01:44,474
Et on termine par le point-virgule

42
00:01:44,474 --> 00:01:47,212
pour qu’il exécute cet ordre.

43
00:01:47,212 --> 00:01:49,967
Revenons à ce que nous 
avons écrit tout à l’heure.

44
00:01:49,967 --> 00:01:52,268
Là, c’est le nom de la fonction,

45
00:01:52,268 --> 00:01:53,769
et là, la parenthèse.

46
00:01:53,769 --> 00:01:55,930
Mais à quoi correspondent ces 4 nombres ?

47
00:01:55,930 --> 00:01:59,049
Eh bien, en fait, l’ordinateur 
a besoin de la position

48
00:01:59,049 --> 00:02:01,688
et de la taille du rectangle 
pour le dessiner.

49
00:02:01,688 --> 00:02:05,424
Imaginez que je vous donne 
un papier quadrillé

50
00:02:05,424 --> 00:02:07,528
et que je vous demande 
de dessiner un rectangle,

51
00:02:07,528 --> 00:02:09,842
exactement celui que j’ai en tête.

52
00:02:09,842 --> 00:02:12,495
Pour ça, vous avez besoin

53
00:02:12,495 --> 00:02:16,978
de savoir à quel endroit 
il faut le dessiner sur la feuille.

54
00:02:16,978 --> 00:02:22,486
Donc il faut définir une numérotation
pour le quadrillage.

55
00:02:22,486 --> 00:02:26,770
Disons qu’horizontalement, 
on numérote à partir de zéro à gauche,

56
00:02:26,770 --> 00:02:30,215
et que le côté droit se termine à 400.

57
00:02:30,215 --> 00:02:32,719
Maintenant, si je veux me positionner à…

58
00:02:32,719 --> 00:02:36,373
... disons… 100.
C’est à peu près par là.

59
00:02:36,373 --> 00:02:39,506
OK. Bon. Cela me donne une 
position de gauche à droite.

60
00:02:39,506 --> 00:02:43,379
Voyons maintenant du haut vers le bas. 
Verticalement,

61
00:02:43,379 --> 00:02:46,219
prenons un autre nombre… disons… 200.

62
00:02:46,219 --> 00:02:49,745
On dit que le haut est numéroté à partir de 0,

63
00:02:49,745 --> 00:02:52,528
et que tout en bas, c’est 400.

64
00:02:52,528 --> 00:02:56,864
Du coup, pour 200… on est… au milieu.

65
00:02:56,864 --> 00:03:01,212
C’est parfait car maintenant on sait 
à quel endroit dessiner le rectangle...

66
00:03:01,212 --> 00:03:02,620
... juste ici !

67
00:03:02,620 --> 00:03:04,962
Car c’est à 100 du bord gauche

68
00:03:04,962 --> 00:03:06,744
et 200 vers le bas. Parfait !

69
00:03:06,744 --> 00:03:10,008
Mais cela ne suffit pas pour dessiner le rectangle

70
00:03:10,008 --> 00:03:12,822
car il vous faut aussi sa largeur.

71
00:03:12,838 --> 00:03:20,388
Eh bien… disons… 150 de large.
A cet endroit on est à 100.

72
00:03:20,388 --> 00:03:22,428
Et à celui-là, on est à 400.

73
00:03:22,428 --> 00:03:28,568
150 de large, ça nous donne 
quelque chose qui nous amène… par là.

74
00:03:28,568 --> 00:03:31,488
Bon, il nous manque encore la hauteur.

75
00:03:31,488 --> 00:03:33,818
Je veux un rectangle pas très haut,
disons de 50.

76
00:03:33,818 --> 00:03:37,656
Bon 50 de haut ça fait à peu près… ça.

77
00:03:37,656 --> 00:03:40,794
Et on a maintenant tout ce qu’il faut...

78
00:03:40,794 --> 00:03:44,162
... pour dessiner le rectangle !

79
00:03:44,162 --> 00:03:48,052
Ça fait pas mal de travail 
pour un simple rectangle.

80
00:03:48,052 --> 00:03:51,192
Mais avec simplement 4 nombres :

81
00:03:51,192 --> 00:03:54,368
100 vers la droite, 200 vers le bas,

82
00:03:54,368 --> 00:03:57,952
150 de large et 50 de haut,

83
00:03:57,962 --> 00:04:01,816
on a tout ce qu’il faut 
pour dessiner un rectangle.

84
00:04:01,816 --> 00:04:04,552
Et l’ordinateur a, lui aussi, 
besoin de ces 4 nombres.

85
00:04:04,552 --> 00:04:07,225
Pour ça, on écrit le nom de la fonction « rect »,

86
00:04:07,225 --> 00:04:14,301
une parenthèse et les 4 nombres : 
100, 200, 150 et 50,

87
00:04:14,301 --> 00:04:16,567
on ferme la parenthèse… le point-virgule,

88
00:04:16,567 --> 00:04:20,143
et l’ordinateur dessine un rectangle exactement 
à l’endroit qu’on lui a indiqué.

89
00:04:20,143 --> 00:04:24,247
Bon… il n’est pas tout à fait où on voulait,

90
00:04:24,247 --> 00:04:26,381
mais on a dessiné le brouillon à la main,

91
00:04:26,381 --> 00:04:29,010
donc… c’est un peu normal !

92
00:04:29,010 --> 00:04:31,739
Imaginons qu’on veuille le faire 
correspondre exactement.


93
00:04:31,739 --> 00:04:36,520
Donc un peu à droite... 
Un peu vers le haut...

94
00:04:36,520 --> 00:04:42,371
Un peu moins large...
Et un peu moins haut...

95
00:04:42,371 --> 00:04:45,902
Et voilà les deux qui se superposent.

96
00:04:45,902 --> 00:04:49,433
Comme on sait maintenant à 
quoi correspondent les 4 nombres,

97
00:04:49,433 --> 00:04:52,515
on peut les modifier pour 
obtenir exactement ce qu’on veut.

98
00:04:52,515 --> 00:04:54,937
OK. On va essayer de dessiner
un autre rectangle,

99
00:04:54,937 --> 00:04:58,919
car on sait maintenant 
en dessiner comme on veut.

100
00:04:58,919 --> 00:05:03,153
Cette fois-ci, on veut le mettre 
dans le coin ici en haut à gauche.

101
00:05:03,153 --> 00:05:05,888
Voyons comment trouver sa position.

102
00:05:05,888 --> 00:05:10,256
Bon, tout à gauche, cela donne zéro.
Et tout en haut, c’est zéro aussi.

103
00:05:10,256 --> 00:05:16,144
Faisons-le assez petit, 
disons... 50 de large, et 10 de haut.

104
00:05:16,144 --> 00:05:20,770
Allez, on essaye.
On écrit « rect » avec sa parenthèse.

105
00:05:20,770 --> 00:05:24,986
Puis les 4 paramètres séparés par des virgules.
C’est pas mal, non ?

106
00:05:24,986 --> 00:05:30,513
Hum, en fait on a ce message d’erreur
qui nous indique qu’il manque une parenthèse.

107
00:05:30,513 --> 00:05:33,370
OK. Je l'ajoute.

108
00:05:33,370 --> 00:05:36,868
Hey ! J’ai un autre message maintenant
qui me dit qu’il manque un point-virgule.

109
00:05:36,868 --> 00:05:39,660
Si je clique sur le lien « montrez-moi où »,

110
00:05:39,660 --> 00:05:42,542
cela me montre la ligne avec l’erreur.

111
00:05:42,542 --> 00:05:45,422
C’est vrai. Toutes les fonctions doivent
se terminer par un point-virgule,

112
00:05:45,422 --> 00:05:48,702
comme le point à la fin des phrases en français.

113
00:05:48,702 --> 00:05:51,782
J’ajoute le point-virgule.
Et le message disparaît.

114
00:05:51,782 --> 00:05:55,003
Voilà un petit rectangle en haut à gauche.
Comme on voulait.

115
00:05:55,003 --> 00:05:57,933
On peut l’agrandir...

116
00:05:57,933 --> 00:06:01,833
... ou le déplacer comme on veut.

117
00:06:01,833 --> 00:06:04,995
Voilà, vous savez maintenant comment 
dessiner un rectangle avec la fonction « rect ».

118
00:06:04,995 --> 00:06:08,160
On a vu à quoi correspond 
chacun des 4 nombres,

119
00:06:08,160 --> 00:06:10,680
qu’il faut commencer par écrire 
le nom de la fonction,

120
00:06:10,680 --> 00:06:13,350
puis les parenthèses, avec les nombres
séparés par des virgules à l’intérieur,

121
00:06:13,350 --> 00:06:15,540
et on termine par un point-virgule.

122
00:06:15,540 --> 00:06:18,603
Entraînez-vous pour prendre l'habitude !

123
00:06:18,603 --> 00:06:21,247
La prochaine fois, on verra comment
dessiner d’autres formes,

124
00:06:21,247 --> 00:06:23,227
comment utiliser les couleurs,

125
00:06:23,227 --> 00:06:26,030
et comment animer les formes sur l’écran.