WEBVTT

00:00:00.820 --> 00:00:02.871
Commençons par le commencement...

00:00:02.871 --> 00:00:04.592
On va tracer des formes.

00:00:04.592 --> 00:00:06.694
Plus tard, on ajoutera de la couleur,

00:00:06.694 --> 00:00:09.324
on créera des animations.

00:00:09.324 --> 00:00:11.174
Mais pour l’instant,

00:00:11.174 --> 00:00:14.636
on va commencer par dessiner un rectangle.

00:00:14.636 --> 00:00:16.516
Pour ça, on écrit à gauche « rect »
pour « rectangle »,

00:00:16.516 --> 00:00:20.756
on ouvre une parenthèse, 
et on ajoute 4 nombres,

00:00:20.756 --> 00:00:23.938
on ferme la parenthèse 
et on termine par un point-virgule.

00:00:23.938 --> 00:00:25.595
Hey ! Regardez à droite, 
on a dessiné un rectangle !

00:00:25.595 --> 00:00:27.753
Allez, on en ajoute un autre...

00:00:27.753 --> 00:00:30.011
... en utilisant d’autres nombres :

00:00:30.011 --> 00:00:32.177
certains plus grands,

00:00:32.177 --> 00:00:34.043
d'autres plus petits.

00:00:34.043 --> 00:00:36.071
Et voilà : on a obtenu 
un petit rectangle cette fois-ci !

00:00:36.071 --> 00:00:39.256
En fait, si on change le premier nombre,

00:00:39.256 --> 00:00:40.741
ça déplace le rectangle horizontalement.

00:00:40.741 --> 00:00:43.895
Si on change le dernier nombre,

00:00:43.895 --> 00:00:46.251
ça change sa hauteur.

00:00:46.251 --> 00:00:47.517
OK.

00:00:47.517 --> 00:00:51.265
Bon, voyons maintenant 
comment ça fonctionne.

00:00:51.265 --> 00:00:53.988
En fait, un ordinateur ne fait qu’obéir
aux ordres qu’on lui donne,

00:00:53.988 --> 00:00:55.511
un peu comme un chien obéissant.

00:00:55.511 --> 00:00:58.974
On peut lui demander de s’asseoir, 
ou de rouler sur le dos.

00:00:58.974 --> 00:01:02.033
On a juste à lui donner un ordre.

00:01:02.033 --> 00:01:05.752
Si on voulait demander à l’ordinateur de
s’asseoir [« sit down » en anglais] :

00:01:05.752 --> 00:01:08.618
on le ferait en écrivant le nom de la commande…

00:01:08.618 --> 00:01:11.262
« sit » ["assis" en anglais] ;

00:01:11.262 --> 00:01:13.256
puis, deux parenthèses

00:01:13.256 --> 00:01:16.097
et on termine par un point-virgule...

00:01:16.097 --> 00:01:19.528
pour lui demander d’exécuter cet ordre.

00:01:19.528 --> 00:01:22.109
Et là, l’ordinateur devrait s’asseoir !

00:01:22.109 --> 00:01:25.264
Bon, nos ordinateurs ne sont pas 
des chiens, en fait !

00:01:25.264 --> 00:01:27.210
Ils ne savent pas s’asseoir !

00:01:27.210 --> 00:01:30.256
Mais ils savent dessiner des rectangles...

00:01:30.256 --> 00:01:31.864
... quand on leur écrit « rect » !

00:01:31.864 --> 00:01:34.327
Voyons ça !

00:01:34.327 --> 00:01:37.160
On écrit « rect » : c’est le nom de la fonction,

00:01:37.160 --> 00:01:39.598
puis les deux parenthèses

00:01:39.598 --> 00:01:42.036
pour lui indiquer ce qu’il doit faire.

00:01:42.036 --> 00:01:44.474
Et on termine par le point-virgule

00:01:44.474 --> 00:01:47.212
pour qu’il exécute cet ordre.

00:01:47.212 --> 00:01:49.967
Revenons à ce que nous 
avons écrit tout à l’heure.

00:01:49.967 --> 00:01:52.268
Là, c’est le nom de la fonction,

00:01:52.268 --> 00:01:53.769
et là, la parenthèse.

00:01:53.769 --> 00:01:55.930
Mais à quoi correspondent ces 4 nombres ?

00:01:55.930 --> 00:01:59.049
Eh bien, en fait, l’ordinateur 
a besoin de la position

00:01:59.049 --> 00:02:01.688
et de la taille du rectangle 
pour le dessiner.

00:02:01.688 --> 00:02:05.424
Imaginez que je vous donne 
un papier quadrillé

00:02:05.424 --> 00:02:07.528
et que je vous demande 
de dessiner un rectangle,

00:02:07.528 --> 00:02:09.842
exactement celui que j’ai en tête.

00:02:09.842 --> 00:02:12.495
Pour ça, vous avez besoin

00:02:12.495 --> 00:02:16.978
de savoir à quel endroit 
il faut le dessiner sur la feuille.

00:02:16.978 --> 00:02:22.486
Donc il faut définir une numérotation
pour le quadrillage.

00:02:22.486 --> 00:02:26.770
Disons qu’horizontalement, 
on numérote à partir de zéro à gauche,

00:02:26.770 --> 00:02:30.215
et que le côté droit se termine à 400.

00:02:30.215 --> 00:02:32.719
Maintenant, si je veux me positionner à…

00:02:32.719 --> 00:02:36.373
... disons… 100.
C’est à peu près par là.

00:02:36.373 --> 00:02:39.506
OK. Bon. Cela me donne une 
position de gauche à droite.

00:02:39.506 --> 00:02:43.379
Voyons maintenant du haut vers le bas. 
Verticalement,

00:02:43.379 --> 00:02:46.219
prenons un autre nombre… disons… 200.

00:02:46.219 --> 00:02:49.745
On dit que le haut est numéroté à partir de 0,

00:02:49.745 --> 00:02:52.528
et que tout en bas, c’est 400.

00:02:52.528 --> 00:02:56.864
Du coup, pour 200… on est… au milieu.

00:02:56.864 --> 00:03:01.212
C’est parfait car maintenant on sait 
à quel endroit dessiner le rectangle...

00:03:01.212 --> 00:03:02.620
... juste ici !

00:03:02.620 --> 00:03:04.962
Car c’est à 100 du bord gauche

00:03:04.962 --> 00:03:06.744
et 200 vers le bas. Parfait !

00:03:06.744 --> 00:03:10.008
Mais cela ne suffit pas pour dessiner le rectangle

00:03:10.008 --> 00:03:12.822
car il vous faut aussi sa largeur.

00:03:12.838 --> 00:03:20.388
Eh bien… disons… 150 de large.
A cet endroit on est à 100.

00:03:20.388 --> 00:03:22.428
Et à celui-là, on est à 400.

00:03:22.428 --> 00:03:28.568
150 de large, ça nous donne 
quelque chose qui nous amène… par là.

00:03:28.568 --> 00:03:31.488
Bon, il nous manque encore la hauteur.

00:03:31.488 --> 00:03:33.818
Je veux un rectangle pas très haut,
disons de 50.

00:03:33.818 --> 00:03:37.656
Bon 50 de haut ça fait à peu près… ça.

00:03:37.656 --> 00:03:40.794
Et on a maintenant tout ce qu’il faut...

00:03:40.794 --> 00:03:44.162
... pour dessiner le rectangle !

00:03:44.162 --> 00:03:48.052
Ça fait pas mal de travail 
pour un simple rectangle.

00:03:48.052 --> 00:03:51.192
Mais avec simplement 4 nombres :

00:03:51.192 --> 00:03:54.368
100 vers la droite, 200 vers le bas,

00:03:54.368 --> 00:03:57.952
150 de large et 50 de haut,

00:03:57.962 --> 00:04:01.816
on a tout ce qu’il faut 
pour dessiner un rectangle.

00:04:01.816 --> 00:04:04.552
Et l’ordinateur a, lui aussi, 
besoin de ces 4 nombres.

00:04:04.552 --> 00:04:07.225
Pour ça, on écrit le nom de la fonction « rect »,

00:04:07.225 --> 00:04:14.301
une parenthèse et les 4 nombres : 
100, 200, 150 et 50,

00:04:14.301 --> 00:04:16.567
on ferme la parenthèse… le point-virgule,

00:04:16.567 --> 00:04:20.143
et l’ordinateur dessine un rectangle exactement 
à l’endroit qu’on lui a indiqué.

00:04:20.143 --> 00:04:24.247
Bon… il n’est pas tout à fait où on voulait,

00:04:24.247 --> 00:04:26.381
mais on a dessiné le brouillon à la main,

00:04:26.381 --> 00:04:29.010
donc… c’est un peu normal !

00:04:29.010 --> 00:04:31.739
Imaginons qu’on veuille le faire 
correspondre exactement.


00:04:31.739 --> 00:04:36.520
Donc un peu à droite... 
Un peu vers le haut...

00:04:36.520 --> 00:04:42.371
Un peu moins large...
Et un peu moins haut...

00:04:42.371 --> 00:04:45.902
Et voilà les deux qui se superposent.

00:04:45.902 --> 00:04:49.433
Comme on sait maintenant à 
quoi correspondent les 4 nombres,

00:04:49.433 --> 00:04:52.515
on peut les modifier pour 
obtenir exactement ce qu’on veut.

00:04:52.515 --> 00:04:54.937
OK. On va essayer de dessiner
un autre rectangle,

00:04:54.937 --> 00:04:58.919
car on sait maintenant 
en dessiner comme on veut.

00:04:58.919 --> 00:05:03.153
Cette fois-ci, on veut le mettre 
dans le coin ici en haut à gauche.

00:05:03.153 --> 00:05:05.888
Voyons comment trouver sa position.

00:05:05.888 --> 00:05:10.256
Bon, tout à gauche, cela donne zéro.
Et tout en haut, c’est zéro aussi.

00:05:10.256 --> 00:05:16.144
Faisons-le assez petit, 
disons... 50 de large, et 10 de haut.

00:05:16.144 --> 00:05:20.770
Allez, on essaye.
On écrit « rect » avec sa parenthèse.

00:05:20.770 --> 00:05:24.986
Puis les 4 paramètres séparés par des virgules.
C’est pas mal, non ?

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.

00:05:30.513 --> 00:05:33.370
OK. Je l'ajoute.

00:05:33.370 --> 00:05:36.868
Hey ! J’ai un autre message maintenant
qui me dit qu’il manque un point-virgule.

00:05:36.868 --> 00:05:39.660
Si je clique sur le lien « montrez-moi où »,

00:05:39.660 --> 00:05:42.542
cela me montre la ligne avec l’erreur.

00:05:42.542 --> 00:05:45.422
C’est vrai. Toutes les fonctions doivent
se terminer par un point-virgule,

00:05:45.422 --> 00:05:48.702
comme le point à la fin des phrases en français.

00:05:48.702 --> 00:05:51.782
J’ajoute le point-virgule.
Et le message disparaît.

00:05:51.782 --> 00:05:55.003
Voilà un petit rectangle en haut à gauche.
Comme on voulait.

00:05:55.003 --> 00:05:57.933
On peut l’agrandir...

00:05:57.933 --> 00:06:01.833
... ou le déplacer comme on veut.

00:06:01.833 --> 00:06:04.995
Voilà, vous savez maintenant comment 
dessiner un rectangle avec la fonction « rect ».

00:06:04.995 --> 00:06:08.160
On a vu à quoi correspond 
chacun des 4 nombres,

00:06:08.160 --> 00:06:10.680
qu’il faut commencer par écrire 
le nom de la fonction,

00:06:10.680 --> 00:06:13.350
puis les parenthèses, avec les nombres
séparés par des virgules à l’intérieur,

00:06:13.350 --> 00:06:15.540
et on termine par un point-virgule.

00:06:15.540 --> 00:06:18.603
Entraînez-vous pour prendre l'habitude !

00:06:18.603 --> 00:06:21.247
La prochaine fois, on verra comment
dessiner d’autres formes,

00:06:21.247 --> 00:06:23.227
comment utiliser les couleurs,

00:06:23.227 --> 00:06:26.030
et comment animer les formes sur l’écran.