Le dernier blog

Processing, second cours

Voilà, vous avez installé processing. S’il fonctionne, lorsque vous double-cliquez sur l’icône du programme, une fenêtre qui ressemble à celle-ci doit s’ouvrir :

La zone blanche centrale est celle où doit être rédigé le programme.
Nous verrons plus tard à quoi servent les différents éléments de menus et les différentes icônes. 
Pour l’instant, nous nous contenterons de cliquer sur l’icône « play », qui devient jaune.
En cliquant sur ce bouton « play », on demande à processing d’exécuter le programme qui a été rédigé.
Dans notre cas, puisqu’aucun programme n’a été rédigé, processing se contente d’ouvrir la fenêtre par défaut. Il s’agit d’une fenêtre de 100 pixels de large et de de 100 pixels de haut, avec un fond gris.

Voici quelques lignes de programme à écrire dans la zone centrale.
Chaque fois que vous avez saisi une ligne, vous pouvez cliquer sur le bouton « play » (ou aller dans le menu « sketch » et sélectionner la commande « run » ou encore faire le raccourci-clavier Control.+.R.

size (500,500);

Cette fois-ci, une fenêtre s’est bien ouverte mais elle est nettement plus grande que la fois précédente, elle fait 500 pixels par 500 pixels. La commande « size » sert donc à définir la largeur et la hauteur de la « scène » d’affichage. La syntaxe de cette commande est celle-ci : size ( largeur, hauteur ); largeur et hauteur doivent être remplacés par les chiffres correspondants. Le mot size doit être en minuscules. La commande est terminée par un point-virgule (;). Vous pouvez essayer de modifier les chiffres (par exemple size(400,200);) pour voir le résultat.
Notre seconde commande concernera la couleur de fond de la fenêtre dans laquelle s’affiche le programme :

background(0);

Vous remarquez cette fois que notre fenêtre n’a plus un fond gris mais un fond noir. La commande background s’exécute avec un « argument » (le chiffre entre parenthèses) si l’on veut donner au fond de la fenêtre une valeur de gris (entre le noir (0) et le blanc (255)) ou bien trois, séparées par des virgules, si l’on désire d’autres couleurs que des valeurs de gris.
Vous pouvez essayer

background(255, 0, 0);

ou bien

background(0, 255, 0);

ou encore

background(0, 0, 255);

La première combinaison signifie que l’on veut une couleur RGB (rouge-vert-bleu) qui soit composée de la valeur maximum pour le rouge, de la valeur minimale pour le vert et de la valeur minimale pour le bleu. Cela nous donne du rouge.
La seconde combinaison donne du vert, et la troisième, du bleu.
Vous pouvez tester une combinaison de trois autres chiffres comme

background(170, 210, 210);

… qui nous donne un gris-vert.
Nous savons à présent utiliser deux commandes de base.
Finissons donc avec un tout petit programme, qui récapitule ces commandes très simples et qui en ajoute deux dont le sens sera très clair dès que vous en aurez lancé l’exécution :

size(530, 100);
background(250);
stroke(255, 0, 0);
line(10,10, 520,90);

Si tout fonctionne bien, le lancement de l’application fera apparaître une fenêtre de 530 pixels de large par 100 pixels de haut, avec un fond gris très clair (250), sur lequel est dessiné, en diagonale, un trait rouge (la commande stroke sert à décider de la couleur des traits), qui part du point (10, 10) et aboutit au point (520, 90).

Vous pouvez à présent essayer le même programme en modifiant les chiffres, et voir ce que cela donne. 
Nous avons donc appris que les commandes s’écrivent dans la fenêtre, qu’elles sont toujours suivies de parenthèses entre lesquelles se trouvent un certain nombre d’arguments (nombre qui est zéro dans le cas de certaines commandes ne réclamant pas de paramètres), séparés par des virgules.
Enfin nous avons appris qu’après chaque commande, on écrivait un point-virgule.
Si vous avez commis une faute quelconque (utilisation ou oubli de majuscules, oubli de point-virgule), vous aurez remarqué que processing n’exécute pas vos ordres mais vous adresse à la place un message plus ou moins compréhensible.