{"id":2464,"date":"2008-11-26T20:27:58","date_gmt":"2008-11-26T19:27:58","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2464"},"modified":"2008-11-26T20:27:58","modified_gmt":"2008-11-26T19:27:58","slug":"processing-troisieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2464","title":{"rendered":"Processing, troisi\u00e8me cours"},"content":{"rendered":"

Continuons \u00e0 explorer les fonctions de dessin de processing.
\nNous avons vu la fonction line <\/strong>qui permet de tracer une ligne selon cette syntaxe : line (x1, y1, x2, y2);<\/strong> o\u00f9 x1<\/strong> est l’abscisse (la coordonn\u00e9e horizontale) du premier point de la ligne, y1<\/strong> l’ordonn\u00e9e (la coordonn\u00e9e verticale) du premier point, x2<\/strong> l’abscisse du second point et y2<\/strong> l’abscisse du second point.
\nUne douzaine d’ann\u00e9es d’enseignement de la programmation aupr\u00e8s d’\u00e9tudiants en art m’a appris qu’une partie non-n\u00e9gligeable d’entre ces derniers d\u00e9crochaient compl\u00e8tement \u00e0 l’\u00e9vocation de mots tels que abscisses et ordonn\u00e9es. Il n’y a pourtant pas de raison, ces notions sont extr\u00eamement simples, le fait que je les comprenne le prouve.
\nVoici un petit programme qui va dessiner cinq lignes :<\/p>\n

\n
size(530, 100);\nline(10,10,500,10);\nline(15,30,505,30);\nline(20,50,510,50);\nline(25,70,515,70);\nline(30,90,520,90);<\/pre>\n<\/div>\n
La premi\u00e8re ligne sera trac\u00e9e 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\u00e9sultat est le suivant :<\/p>\n
\"\"<\/p>\n
Ce sont des traits horizontaux puisque les ordonn\u00e9es (coordonn\u00e9es verticales) des deux points sont chaque fois identifuqes. \u00c0 pr\u00e9sent voyons ce qui advient si nous dessinons des lignes dont les deux points ne se trouvent pas sur la m\u00eame ligne.<\/p>\n
\n
size(530, 120);\nline(10,10,500,30);\nline(15,30,505,50);\nline(20,50,510,70);\nline(25,70,515,90);\nline(30,90,520,110);<\/pre>\n<\/div>\n
Le r\u00e9sultat est celui-ci :<\/p>\n
\"\"<\/p>\n
On remarque que les traits sont dessin\u00e9s avec un effet d’escalier qui n’est pas forc\u00e9ment tr\u00e8s heureux.
\nCela peut \u00eatre \u00e9vit\u00e9 gr\u00e2ce \u00e0 une commande nomm\u00e9e smooth();
\nUne fois que l’on a \u00e9crit la commande smooth(); dans un programme, les traits qui sont trac\u00e9s sont dessin\u00e9s avec un effet d’anti-aliasing, c’est \u00e0 dire avec une diffusion de gris interm\u00e9diaires de valeurs diff\u00e9rentes<\/p>\n
\n
size(530, 120);\nline(10,10,500,30);\nline(15,30,505,50);\nline(20,50,510,70);\nsmooth();\nline(25,70,515,90);\nline(30,90,520,110);<\/pre>\n<\/div>\n
Dans ce cas pr\u00e9cis, les trois premiers traits sont dessin\u00e9s avec l’effet d’escalier, puis la commande smooth(); est invoqu\u00e9e. Les deux traits suivants sont alors dessin\u00e9s sans l’effet d’escalier. Comme il s’agit de traits noirs sur un gris assez fonc\u00e9, et que l’inclinaison des lignes est assez proche de l’horizontale, l’effet n’est pas forc\u00e9ment agr\u00e9able \u00e0 l’\u0153il :<\/p>\n
\"\"<\/p>\n
Pour en finir avec les lignes, deux nouvelles commandes.
\n– strokeWeight<\/strong>, qui permet de r\u00e9gler l’\u00e9paisseur des traits
\n– stroke<\/strong>, qui permet de r\u00e9gler leur couleur.<\/p>\n
\n
size(530, 60); \u00a0 \/\/ la sc\u00e8ne fait 530 x 60 pixels<\/span>\nsmooth(); \u00a0 \u00a0\/\/ les traits doivent \u00eatre dessin\u00e9s sans effet d'escalier<\/span>\nstroke(255); \u00a0 \u00a0\/\/ les traits s'affichent en blanc<\/span>\nline(50,10,50, 50); \u00a0\/\/ tracer une ligne entre (50,10) et (50,60)<\/span>\nstrokeWeight(2); \/\/ les traits doivent avoir une \u00e9paisseur de 2 pixels<\/span>\nline(100,10,100, 50); \u00a0\/\/ tracer une ligne<\/span>\nstroke(0); \u00a0\/\/ les traits doivent \u00eatre noirs<\/span>\nstrokeWeight(1); \/\/ les traits doivent faire 1 pixel d'\u00e9paisseur<\/span>\nline(150,10,150, 50); \u00a0\/\/ tracer une ligne<\/span>\nstrokeWeight(3); \/\/ les traits doivent faire trois pixels<\/span>\nline(200,10,200, 50); \u00a0\/\/ tracer une ligne<\/span>\nstrokeWeight(1); \u00a0\/\/ les traits doivent faire 1 pixel d'\u00e9paisseur<\/span>\nstroke(255,0,0); \u00a0\/\/ les traits doivent \u00eatre rouges<\/span>\nline(250,10,250, 50); \u00a0\/\/ tracer une ligne<\/span>\nstrokeWeight(5); \u00a0 \/\/ les traits doivent faire 5 pixels d'\u00e9paisseur<\/span>\nline(300,10,300, 50); \u00a0\/\/ tracer une ligne<\/span>\nstroke(0,255,0); \u00a0\/\/ les traits doivent \u00eatre verts<\/span>\nstrokeWeight(0.1); \u00a0 \/\/ les traits doivent faire 0,1 pixel d'\u00e9paisseur<\/span>\nline(350,10,350, 50); \u00a0\/\/ tracer une ligne<\/span>\nstrokeWeight(10); \u00a0 \/\/ les traits doivent faire 10 pixels d'\u00e9paisseur<\/span>\nline(400,10,400, 50); \u00a0\/\/ tracer une ligne<\/span>\nstroke(0,0,255); \u00a0\/\/ les traits doivent \u00eatre bleus<\/span>\nstrokeWeight(1.5); \u00a0 \/\/ les traits doivent faire 1,5 pixel d'\u00e9paisseur<\/span>\nline(450,10,450, 50); \u00a0\/\/ tracer une ligne<\/span>\nstrokeWeight(5); \u00a0 \/\/ les traits doivent faire 5 pixel d'\u00e9paisseur<\/span>\nline(500,10,500, 50); \u00a0\/\/ tracer une ligne<\/span><\/pre>\n<\/div>\n
Le r\u00e9sultat sera le suivant :<\/p>\n
\"\"<\/p>\n
La syntaxe de la commande strokeWeight<\/strong>, qui permet de d\u00e9cider de l’\u00e9paisseur du trait, est donc strokeWeight(epaisseur);<\/strong> o\u00f9 \u00e9paisseur sera remplac\u00e9 par un chiffre. Par exemple strokeWeight(10);<\/strong> pour une \u00e9paisseur de dix pixels. Par d\u00e9faut l’\u00e9paisseur des traits est de 1 pixel. Notez la majuscule sur la lettre W : strokeW<\/span>eight.
\nLa syntaxe de la commande stroke<\/strong>, qui permet de d\u00e9cider de la couleur des traits, est stroke (gris);<\/strong> ou stroke(gris, opacit\u00e9);<\/strong>, ou stroke(rouge, vert, bleu);<\/strong> ou encore stroke(rouge, vert, bleu, opacit\u00e9);<\/strong>
\nNous laisserons l’opacit\u00e9 de c\u00f4t\u00e9 pour l’instant, mais il faut savoir que chacune de ces valeurs peut avoir 256 <\/strong>niveaux (soit deux puissance huit, car l’ordinateur compte par puissances de deux), de 0 \u00e0 255 pr\u00e9cis\u00e9ment.
\nDans le code qui est reproduit plus haut, j’ai introduit une nouveaut\u00e9, les commentaires. En effet tout ce qui est pr\u00e9c\u00e9d\u00e9 de deux \u00ab\u00a0slashs\u00a0\u00bb (\/\/<\/strong>) n’est pas interpr\u00eat\u00e9 par processing. Par exemple si j’\u00e9cris<\/p>\n
\n
background(0); \/\/ background(255);<\/span><\/pre>\n<\/div>\n
… Le programme ex\u00e9cutera la premi\u00e8re commande (\u00ab\u00a0peindre\u00a0\u00bb la fen\u00eatre en noir) mais n’ex\u00e9cutera pas le seconde (\u00ab\u00a0peindre\u00a0\u00bb la fen\u00eatre en blanc).<\/p>\n
Bon, nous en avons fini avec les traits. Vous pouvez \u00e0 pr\u00e9sent essayer chez vous les m\u00eames 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Continuons \u00e0 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\u00f9 x1 est l’abscisse (la coordonn\u00e9e horizontale) du premier point de la ligne, y1 l’ordonn\u00e9e (la coordonn\u00e9e verticale) du premier point, x2 l’abscisse du second […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2464","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2464"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2464\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}