IntroAuDessinStatique

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Commençons par le commencement...

On va tracer des formes.

Plus tard, on ajoutera de la couleur,

on créera des animations.

Mais pour l’instant,

on va commencer par dessiner un rectangle.

Pour ça, on écrit à gauche « rect »
pour « rectangle »,

on ouvre une parenthèse,
et on ajoute 4 nombres,

on ferme la parenthèse
et on termine par un point-virgule.

Hey ! Regardez à droite,
on a dessiné un rectangle !

Allez, on en ajoute un autre...

... en utilisant d’autres nombres :

certains plus grands,

d'autres plus petits.

Et voilà : on a obtenu
un petit rectangle cette fois-ci !

En fait, si on change le premier nombre,

ça déplace le rectangle horizontalement.

Si on change le dernier nombre,

ça change sa hauteur.

OK.

Bon, voyons maintenant
comment ça fonctionne.

En fait, un ordinateur ne fait qu’obéir
aux ordres qu’on lui donne,

un peu comme un chien obéissant.

On peut lui demander de s’asseoir,
ou de rouler sur le dos.

On a juste à lui donner un ordre.

Si on voulait demander à l’ordinateur de
s’asseoir [« sit down » en anglais] :

on le ferait en écrivant le nom de la commande…

« sit » ["assis" en anglais] ;

puis, deux parenthèses

et on termine par un point-virgule...

pour lui demander d’exécuter cet ordre.

Et là, l’ordinateur devrait s’asseoir !

Bon, nos ordinateurs ne sont pas
des chiens, en fait !

Ils ne savent pas s’asseoir !

Mais ils savent dessiner des rectangles...

... quand on leur écrit « rect » !

Voyons ça !

On écrit « rect » : c’est le nom de la fonction,

puis les deux parenthèses

pour lui indiquer ce qu’il doit faire.

Et on termine par le point-virgule

pour qu’il exécute cet ordre.

Revenons à ce que nous
avons écrit tout à l’heure.

Là, c’est le nom de la fonction,

et là, la parenthèse.

Mais à quoi correspondent ces 4 nombres ?

Eh bien, en fait, l’ordinateur
a besoin de la position

et de la taille du rectangle
pour le dessiner.

Imaginez que je vous donne
un papier quadrillé

et que je vous demande
de dessiner un rectangle,

exactement celui que j’ai en tête.

Pour ça, vous avez besoin

de savoir à quel endroit
il faut le dessiner sur la feuille.

Donc il faut définir une numérotation
pour le quadrillage.

Disons qu’horizontalement,
on numérote à partir de zéro à gauche,

et que le côté droit se termine à 400.

Maintenant, si je veux me positionner à…

... disons… 100.
C’est à peu près par là.

OK. Bon. Cela me donne une
position de gauche à droite.

Voyons maintenant du haut vers le bas.
Verticalement,

prenons un autre nombre… disons… 200.

On dit que le haut est numéroté à partir de 0,

et que tout en bas, c’est 400.

Du coup, pour 200… on est… au milieu.

C’est parfait car maintenant on sait
à quel endroit dessiner le rectangle...

... juste ici !

Car c’est à 100 du bord gauche

et 200 vers le bas. Parfait !

Mais cela ne suffit pas pour dessiner le rectangle

car il vous faut aussi sa largeur.

Eh bien… disons… 150 de large.
A cet endroit on est à 100.

Et à celui-là, on est à 400.

150 de large, ça nous donne
quelque chose qui nous amène… par là.

Bon, il nous manque encore la hauteur.

Je veux un rectangle pas très haut,
disons de 50.

Bon 50 de haut ça fait à peu près… ça.

Et on a maintenant tout ce qu’il faut...

... pour dessiner le rectangle !

Ça fait pas mal de travail
pour un simple rectangle.

Mais avec simplement 4 nombres :

100 vers la droite, 200 vers le bas,

150 de large et 50 de haut,

on a tout ce qu’il faut
pour dessiner un rectangle.

Et l’ordinateur a, lui aussi,
besoin de ces 4 nombres.

Pour ça, on écrit le nom de la fonction « rect »,

une parenthèse et les 4 nombres :
100, 200, 150 et 50,

on ferme la parenthèse… le point-virgule,

et l’ordinateur dessine un rectangle exactement
à l’endroit qu’on lui a indiqué.

Bon… il n’est pas tout à fait où on voulait,

mais on a dessiné le brouillon à la main,

donc… c’est un peu normal !

Imaginons qu’on veuille le faire
correspondre exactement.

Donc un peu à droite...
Un peu vers le haut...

Un peu moins large...
Et un peu moins haut...

Et voilà les deux qui se superposent.

Comme on sait maintenant à
quoi correspondent les 4 nombres,

on peut les modifier pour
obtenir exactement ce qu’on veut.

OK. On va essayer de dessiner
un autre rectangle,

car on sait maintenant
en dessiner comme on veut.

Cette fois-ci, on veut le mettre
dans le coin ici en haut à gauche.

Voyons comment trouver sa position.

Bon, tout à gauche, cela donne zéro.
Et tout en haut, c’est zéro aussi.

Faisons-le assez petit,
disons... 50 de large, et 10 de haut.

Allez, on essaye.
On écrit « rect » avec sa parenthèse.

Puis les 4 paramètres séparés par des virgules.
C’est pas mal, non ?

Hum, en fait on a ce message d’erreur
qui nous indique qu’il manque une parenthèse.

OK. Je l'ajoute.

Hey ! J’ai un autre message maintenant
qui me dit qu’il manque un point-virgule.

Si je clique sur le lien « montrez-moi où »,

cela me montre la ligne avec l’erreur.

C’est vrai. Toutes les fonctions doivent
se terminer par un point-virgule,

comme le point à la fin des phrases en français.

J’ajoute le point-virgule.
Et le message disparaît.

Voilà un petit rectangle en haut à gauche.
Comme on voulait.

On peut l’agrandir...

... ou le déplacer comme on veut.

Voilà, vous savez maintenant comment
dessiner un rectangle avec la fonction « rect ».

On a vu à quoi correspond
chacun des 4 nombres,

qu’il faut commencer par écrire
le nom de la fonction,

puis les parenthèses, avec les nombres
séparés par des virgules à l’intérieur,

et on termine par un point-virgule.

Entraînez-vous pour prendre l'habitude !

La prochaine fois, on verra comment
dessiner d’autres formes,

comment utiliser les couleurs,

et comment animer les formes sur l’écran.