Le dernier blog

Processing, troisième cours

Continuons à explorer les fonctions de dessin de processing.
Nous avons vu la fonction line qui permet de tracer une ligne selon cette syntaxe : line (x1, y1, x2, y2); où x1 est l’abscisse (la coordonnée horizontale) du premier point de la ligne, y1 l’ordonnée (la coordonnée verticale) du premier point, x2 l’abscisse du second point et y2 l’abscisse du second point.
Une douzaine d’années d’enseignement de la programmation auprès d’étudiants en art m’a appris qu’une partie non-négligeable d’entre ces derniers décrochaient complètement à l’évocation de mots tels que abscisses et ordonnées. Il n’y a pourtant pas de raison, ces notions sont extrêmement simples, le fait que je les comprenne le prouve.
Voici un petit programme qui va dessiner cinq lignes :

size(530, 100);
line(10,10,500,10);
line(15,30,505,30);
line(20,50,510,50);
line(25,70,515,70);
line(30,90,520,90);

La première ligne sera tracée entre le point (10, 10) et le point (500, 10), la seconde entre les points (15, 30) et (505, 30) et ainsi de suite. Le résultat est le suivant :

Ce sont des traits horizontaux puisque les ordonnées (coordonnées verticales) des deux points sont chaque fois identifuqes. À présent voyons ce qui advient si nous dessinons des lignes dont les deux points ne se trouvent pas sur la même ligne.

size(530, 120);
line(10,10,500,30);
line(15,30,505,50);
line(20,50,510,70);
line(25,70,515,90);
line(30,90,520,110);

Le résultat est celui-ci :

On remarque que les traits sont dessinés avec un effet d’escalier qui n’est pas forcément très heureux.
Cela peut être évité grâce à une commande nommée smooth();
Une fois que l’on a écrit la commande smooth(); dans un programme, les traits qui sont tracés sont dessinés avec un effet d’anti-aliasing, c’est à dire avec une diffusion de gris intermédiaires de valeurs différentes

size(530, 120);
line(10,10,500,30);
line(15,30,505,50);
line(20,50,510,70);
smooth();
line(25,70,515,90);
line(30,90,520,110);

Dans ce cas précis, les trois premiers traits sont dessinés avec l’effet d’escalier, puis la commande smooth(); est invoquée. Les deux traits suivants sont alors dessinés sans l’effet d’escalier. Comme il s’agit de traits noirs sur un gris assez foncé, et que l’inclinaison des lignes est assez proche de l’horizontale, l’effet n’est pas forcément agréable à l’œil :

Pour en finir avec les lignes, deux nouvelles commandes.
– strokeWeight, qui permet de régler l’épaisseur des traits
– stroke, qui permet de régler leur couleur.

size(530, 60);   // la scène fait 530 x 60 pixels
smooth();    // les traits doivent être dessinés sans effet d'escalier
stroke(255);    // les traits s'affichent en blanc
line(50,10,50, 50);  // tracer une ligne entre (50,10) et (50,60)
strokeWeight(2); // les traits doivent avoir une épaisseur de 2 pixels
line(100,10,100, 50);  // tracer une ligne
stroke(0);  // les traits doivent être noirs
strokeWeight(1); // les traits doivent faire 1 pixel d'épaisseur
line(150,10,150, 50);  // tracer une ligne
strokeWeight(3); // les traits doivent faire trois pixels
line(200,10,200, 50);  // tracer une ligne
strokeWeight(1);  // les traits doivent faire 1 pixel d'épaisseur
stroke(255,0,0);  // les traits doivent être rouges
line(250,10,250, 50);  // tracer une ligne
strokeWeight(5);   // les traits doivent faire 5 pixels d'épaisseur
line(300,10,300, 50);  // tracer une ligne
stroke(0,255,0);  // les traits doivent être verts
strokeWeight(0.1);   // les traits doivent faire 0,1 pixel d'épaisseur
line(350,10,350, 50);  // tracer une ligne
strokeWeight(10);   // les traits doivent faire 10 pixels d'épaisseur
line(400,10,400, 50);  // tracer une ligne
stroke(0,0,255);  // les traits doivent être bleus
strokeWeight(1.5);   // les traits doivent faire 1,5 pixel d'épaisseur
line(450,10,450, 50);  // tracer une ligne
strokeWeight(5);   // les traits doivent faire 5 pixel d'épaisseur
line(500,10,500, 50);  // tracer une ligne

Le résultat sera le suivant :

La syntaxe de la commande strokeWeight, qui permet de décider de l’épaisseur du trait, est donc strokeWeight(epaisseur); où épaisseur sera remplacé par un chiffre. Par exemple strokeWeight(10); pour une épaisseur de dix pixels. Par défaut l’épaisseur des traits est de 1 pixel. Notez la majuscule sur la lettre W : strokeWeight.
La syntaxe de la commande stroke, qui permet de décider de la couleur des traits, est stroke (gris); ou stroke(gris, opacité);, ou stroke(rouge, vert, bleu); ou encore stroke(rouge, vert, bleu, opacité);
Nous laisserons l’opacité de côté pour l’instant, mais il faut savoir que chacune de ces valeurs peut avoir 256 niveaux (soit deux puissance huit, car l’ordinateur compte par puissances de deux), de 0 à 255 précisément.
Dans le code qui est reproduit plus haut, j’ai introduit une nouveauté, les commentaires. En effet tout ce qui est précédé de deux « slashs » (//) n’est pas interprêté par processing. Par exemple si j’écris

background(0); // background(255);

… Le programme exécutera la première commande (« peindre » la fenêtre en noir) mais n’exécutera pas le seconde (« peindre » la fenêtre en blanc).

Bon, nous en avons fini avec les traits. Vous pouvez à présent essayer chez vous les mêmes commandes, en modifiant les chiffres, afin de voir ce qui arrive. Le prochain article introduira d’autres objets graphiques tels que les rectangles, les ellipses et les points.