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.