Nous avons appris comment dessiner des formes avec des positions et des tailles spécifiques, mais il nous manquait un élément essentiel, la couleur. On sait déjà qu'il faut être très précis et on ne peut pas dire « Fais ce cercle bleu ciel ». On spécifie les couleurs sous forme de nombres.

En termes de niveaux de gris 0 signifie noir et 255 signifie blanc. Entre 0 et 255, chaque nombre est une nuance du gris variant entre le noir et le blanc.

Pourquoi 255 ? Les couleurs sont stockés dans la mémoire de l'ordinateur. Cette mémoire est une longue séquence de 0 et de 1 (bits) regroupés par 8 (octets). Dans un octet on peut représenter 2⁸ = 256 valeurs différentes, de 0 à 255.

Chaque forme a une couleur du contour et une couleur de l'intérieur. Les points et les lignes n'ont pas d'intérieur. Par défaut le contour est 0 (noir) et l'intérieur est 255 (blanc). On utilise les fonctions stroke() et fill() pour changer les couleurs du contour et de l'intérieur. On appelle ces fonctions avant de dessiner la forme, c'est comme si on demandait à notre ami l'ordinateur de prendre des crayons spécifiques. Il va utiliser les mêmes crayons pour dessiner toutes les formes jusqu'à ce qu'on lui demande de changer à nouveau.

Les fonctions noStroke() et noFill() permettent d'éliminer le contour et l'intérieur. Il ne faut pas éliminer les deux à la fois car rien n'apparaîtra sur l'écran.

La fonction background() permet de changer la couleur du fond de la fenêtre.

Exemple 2.1.

size(150, 150);
// fond blanc
background(255);

stroke(0);
fill(127);
// contour noir et intérieur gris
rect(10, 10, 100, 100);

stroke(255);
// le contour devient blanc mais l'intérieur ne change pas
rect(20, 20, 100, 100);

stroke(0);
noFill();
// contour noir et pas d'intérieur
rect(30, 30, 100, 100);

On obtient les couleurs en mélangeant trois couleurs « primaires » : rouge, vert et bleu (Red, Green, Blue en anglais d'où RGB). Chaque couleur primaire varie entre 0 et 255. Ainsi on peut obtenir 256 x 256 x 256 = 16 777 216 couleurs différentes.

Exemple 2.2.

size(400, 200);

fill(0, 0, 0); // noir
rect(0, 0, 100, 100);

fill(255, 0, 0); // rouge
rect(100, 0, 100, 100);

fill(0, 255, 0); // vert
rect(200, 0, 100, 100);

fill(0, 0, 255); // bleu
rect(300, 0, 100, 100);

fill(255, 255, 0); // rouge + vert = jaune
rect(0, 100, 100, 100);

fill(255, 0, 255); // rouge + bleu = magenta
rect(100, 100, 100, 100);

fill(0, 255, 255); // vert + bleu = cyan
rect(200, 100, 100, 100);

fill(255, 255, 255); // blanc
rect(300, 100, 100, 100);

Exemple 2.3 Voici la palette de 10 couleurs que l'artiste Karel Martens a choisi pour les cabanes de la plage du Havre.

size(620, 120);
background(255);
noStroke();

fill(239, 51, 64); // rouge
rect(10, 10, 50, 100);

fill(255, 144, 0); // orange
rect(70, 10, 50, 100);

fill(246, 229, 0); // jaune
rect(130, 10, 50, 100);

fill(120, 190, 32); // vert
rect(190, 10, 50, 100);

fill(0, 126, 198); // bleu
rect(250, 10, 50, 100);

fill(117, 59, 189); // violet
rect(310, 10, 50, 100);

fill(174, 239, 252); // bleu clair
rect(370, 10, 50, 100);

fill(236, 199, 205); // rose pâle
rect(430, 10, 50, 100);

fill(145, 157, 157); // gris clair
rect(490, 10, 50, 100);

fill(63, 68, 68); // gris anthracite
rect(550, 10, 50, 100);

Processing a un outil pour nous aider à choisir nos couleurs (menu Outils/Sélecteur de couleurs).

En plus des composants rouge, vert et bleu de chaque couleur, il y a un quatrième composant facultatif appelé alpha qui correspond à la transparence. Les valeurs alpha varient entre 0 (complètement transparent) et 255 (complètement opaque). Le pixels ne sont pas vraiment transparents, c'est une illusion obtenue en mixant les couleurs.

Exemple 2.4.

size(300, 250);
background(0);
noStroke();
fill(0, 0, 255);
rect(0, 0, 150, 250);

fill(255, 0, 0, 255); // 100% opaque
rect(0, 10, 300, 50);

fill(255, 0, 0, 191); // 75% opaque
rect(0, 70, 300, 50);

fill(255, 0, 0, 127); // 50% opaque
rect(0, 130, 300, 50);

fill(255, 0, 0, 63); // 25% opaque
rect(0, 190, 300, 50);

La couleur RGB avec composants entre 0 et 255 n'est pas la seule façon de représenter la couleur dans Processing. Dans la mémoire de l'ordinateur la couleur est toujours stockée dans 3 octets (ou 4 dans le cas de couleurs avec alpha). Mais Processing nous permet de penser aux couleurs différemment et se charge de traduire nos valeurs en nombres que l'ordinateur comprend. Si par exemple vous préférez des valeurs entre 0 et 100 (pourcentage), vous pouvez spécifier votre propre mode couleur :

colorMode(RGB, 100);

Même si c'est rarement utile, on peut avoir des intervalles différents pour chaque composant :

colorMode(RGB, 100, 500, 10, 200);

Ainsi le rouge va de 0 à 100, le vert de 0 à 500, le bleu de 0 à 10 et l'alpha de 0 à 200.

Finalement, sans entrer en détail, Processing supporte également des couleurs HSB.

Source xkcd

Nous sommes enfin prêts à introduire Chip, notre petit robot qui va nous accompagner dans cette aventure. Nous allons assister à ces premiers pas, interagir avec lui et le voir grandir tout en apprenant les bases de la programmation.

Exemple 2.5.

size(400, 400);
background(255);

// le corps
fill(191);
rect(165, 200, 70, 70);

// les trois LEDs
fill(255, 0, 0);
rect(175, 220, 10, 10);
fill(0, 255, 0);
rect(195, 220, 10, 10);
fill(0, 0, 255);
rect(215, 220, 10, 10);

// les roues
fill(255);
ellipse(180, 270, 20, 20);
ellipse(220, 270, 20, 20);

// la tête
fill(191);
arc(200, 195, 70, 70, -PI, 0, CHORD);

// la caméra
fill(63, 0, 0);
ellipse(200, 180, 20, 20);

// l'antenne
strokeWeight(3);
line(200, 160, 200, 120);

// le message
println("Processing ... please wait");

À noter que pour dessiner l'antenne nous avons utilisé la fonction strokeWeight() qui permet de modifier l'épaisseur du contour.

Nous avons également utilisé la fonction println() pour afficher un texte sur la console. Dans ce cas l'argument de println() est une chaîne de caractères, un texte délimité par des guillemets, mais on peut également afficher des nombres, par exemple

println(8 * 5 + 2);

affichera 42.

Le sketchbook est le répertoire où vos croquis sont stockés. Par défaut c'est ~/sketchbook mais c'est configurable. Chaque croquis est un sous-répertoire qui contient un fichier d'extension .pde. Ainsi si votre croquis s'appelle MonPremierCroquis il sera stocké dans ~/sketchbook/MonPremierCroquis/MonPremierCroquis.pde. Le nom de votre croquis doit être composée de chiffres et de lettres et commencer par une lettre. On ne peut pas utiliser des espaces, utilisez _ à la place.

Nous avons déjà utilisé des commentaires dans nos programmes. Ce sont des lignes de texte que Processing ignore complètement. Il y a deux façons d'écrire des commentaires :

// Je suis un commentaire sur une ligne

/* Je suis un
   commentaire
   sur plusieurs
   lignes
*/

On utilise les commentaires comme rappels de ce que fait une partie du code, d'un bug à fixer ou une fonctionnalité à ajouter plus tard, etc. Il est très important de prendre l'habitude de commenter son code dès le début. On n'est pas obligé de commenter chaque ligne, mais plus un code est bien commenté, plus c'est facile de le modifier et de le réutiliser. En plus, écrire des commentaires nous oblige de comprendre le fonctionnement de notre code. Si on ne sait pas ce qu'on fait, comment on peut le commenter ? En règle générale, il faut commenter tout ce qui n'est pas évident.

Pendant qu'on tape notre code, on voit de temps en temps des messages en rouge apparaître. Il ne faut pas paniquer avant d'avoir tapé l'instruction entière. Si le message persiste après, il faut reprendre notre instruction et corriger l'erreur de frappe. Dans la plupart des cas, le message d'erreur nous indique bien la cause. Parfois les messages d'erreur ne nous aident pas beaucoup, mais on s'habitue d'identifier et corriger les erreurs avec la pratique.

Source xkcd

Une erreur très commune est d'oublier le ; à la fin d'une instruction. Rappelons que chaque instruction se termine par un point-virgule !

Une autre erreur commune est de mal orthographier le nom d'une fonction. C'est une erreur d'écrire elipse() à la place de ellipse(). Il est également très important de savoir que Processing distingue minuscules et MAJUSCULES. Nous avons par exemple une fonction qui s'appelle rectMode(). RectMode(), rectmode() ou rEcTmOdE() ne marchent pas.

Processing détecte et nous aide a corriger les erreurs syntaxiques. Il ne peut pas nous aider avec les erreurs logiques. Si par exemple notre cercle n'est pas à la bonne position ou de la bonne taille, c'est à nous de revoir notre code et de corriger l'erreur.

Même si le pictogramme est le même, en appuyant sur le bouton ▶️ de Processing, vous déclenchez un processus très différent de ce qui se passe dans votre lecteur multimédia. Prenons un peu de temps pour voir ce qui se passe sous le capot.

• Votre programme est stocké sous forme de texte dans un fichier d'extension .pde. Le premier pas est la traduction de ce code en Java. Les curieux peuvent voir ce code qui se situe dans un sous-répertoire de /tmp qui porte le même nom que votre croquis suivi par une longue séquence de chiffres.

• Le code Java est juste un autre fichier texte d'extension .java à la place de .pde. Pour que la machine le comprenne, il faut qu'il soit traduit en langage machine. Ce processus s'appelle compilation. Pour certains langages de programmation, le code est compilé directement en langage machine spécifique à votre ordinateur et à votre système d'exploitation. Dans le cas de Java, le code est compilé en langage machine particulier qui s'appelle bytecode. Il peut s'exécuter sur différentes plateformes (Linux, Windows, macOS, Android etc.) à condition que la plateforme soit équipée de Java Virtual Machine (JVM).

• Le bytecode est chargée et exécuté par la JVM et c'est ça qui fait apparaître la fenêtre sur l'écran.

Rappelons que la documentation de Processing est accessible via Aide\Documentation et Aide\Chercher dans la documentation. À consommer sans modération !

Exercice 2.1

En s'inspirant de Chip et en utilisant tout ce que vous avez appris jusqu'à maintenant, créez votre propre « chose ». Soyez créatifs mais gardez votre dessin assez simple. Vous allez utiliser votre « chose » comme base de votre projet et pour refaire tous les exemples que nous faisons avec Chip. Cela vous permettra de mieux comprendre et renforcer les concepts de base de la programmation que nous allons introduire par la suite.