{"id":2480,"date":"2008-11-27T00:18:02","date_gmt":"2008-11-26T23:18:02","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2480"},"modified":"2008-11-27T00:18:02","modified_gmt":"2008-11-26T23:18:02","slug":"processing-quatrieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2480","title":{"rendered":"Processing, quatri\u00e8me cours"},"content":{"rendered":"

Comme promis \u00e0 pr\u00e9sent, les rectangles (dont les carr\u00e9s) et les ellipses (dont les cercles).
\nOn peut difficilement faire plus simple. Pour dessiner un rectangle parall\u00e8le aux bords de l’\u00e9cran, il suffit de d’indiquer son point sup\u00e9rieur gauche puis de d\u00e9cider de sa largeur et sa hauteur.<\/p>\n

\n
rect(20,25,50,60);<\/pre>\n<\/div>\n
\"\"Avec ce code, processing dessine un rectangle dont le point sup\u00e9rieur gauche se trouve \u00e0 20 pixels du bord gauche et \u00e0 25 pixels du bord sup\u00e9rieur. Ce rectangle a une largeur de 50 pixels et une hauteur de 60 pixels.
\nLa syntaxe de la commande rect est donc : rect(x, y, l, h);<\/strong>, o\u00f9 x et y sont l’abscisse et l’ordonn\u00e9e du point sup\u00e9rieur gauche du rectangle, l sa largeur et h sa hauteur. Comme vous vous en doutez, si l’on choisit le m\u00eame chiffre comme hauteur et comme largeur du rectangle, celui-ci sera un carr\u00e9.
\nOn ne peut pas faire plus simple. Comme je n’ai pas demand\u00e9 de format particulier pour ma fen\u00eatre, elle mesure 100 pixels par 100 pixels et sa couleur de fond est le gris. Puisque je n’ai pas d\u00e9cid\u00e9 de la couleur de contour de mon rectangle, celle-ci est le noir et puisque je n’ai pas d\u00e9fini une couleur de remplissage pour mon rectangle, celui-ci est rempli en blanc. Si je ne veux pas de contour \u00e0 mon rectangle, je dois invoquer la commande noStroke();<\/strong> et si je ne veux pas lui attribuer de couleur de remplissage, je dois \u00e9crire noFill();<\/strong>. \u00c9videmment, si j’ai utilis\u00e9 les commandes noFill(); et noStroke(); en m\u00eame temps, le r\u00e9sultat sera… que rien ne s’affichera. La couleur du trait de contour doit \u00eatre r\u00e9gl\u00e9e avec la commande stroke(); que nous connaissons d\u00e9j\u00e0. L’\u00e9paisseur de ce trait de contour se r\u00e8gle avec la commande fill();<\/strong>, qui est parfaitement sym\u00e9trique \u00e0 stroke();<\/strong>. Mais passons \u00e0 la pratique.
\nLe programme qui suit commence par r\u00e9gler la taille et la couleur de la fen\u00eatre d’affichage (530×80 pixels, dans un gris assez clair). Puis il dessine successivement sept rectangles, en changeant les couleurs ou les options de remplissage et de contour gr\u00e2ce aux commandes fill, stroke, strokeWeight, noFill et noStro<\/p>\n
\n
size(530,80);\nbackground(220);\nrect(10,10,60,60);\nfill(255,0,0);\nrect(85,10,60,60);\nfill(0,255,0);\nstroke(0,0,255);\nrect(160,10,60,60);\nstrokeWeight(5);\nfill(255);\nrect(235,10,60,60);\nnoStroke();\nfill(255,0,0);\nrect(310,10,60,60);\nfill(255,255,0);\nrect(385,10,60,60);\nstroke(0);\nnoFill();\nrect(460,10,60,60);<\/pre>\n<\/div>\n
Voici le r\u00e9sultat que nous obtenons<\/p>\n
\"\"<\/p>\n
Au passage, profitons en pour tester une propri\u00e9t\u00e9 des couleurs d\u00e9j\u00e0 \u00e9voqu\u00e9e pr\u00e9c\u00e9demment mais non-utilis\u00e9e, l’opacit\u00e9. Rappelez-vous, si j’\u00e9cris stroke(0, 25);, cela signifiera que je veux que les traits soient noirs (0) mais \u00e0 un certain degr\u00e9 d’opacit\u00e9, \u00e0 savoir 25 (sur 255, soit environ 10%). Cela fonctionne aussi pour la commande fill.<\/p>\n
\n
size(190,88);\nbackground(255);\nnoStroke();\nfill(255,0,0,20);\nrect(2,2,60,60);\nrect(6,6,60,60);\nrect(10,10,60,60);\nrect(14,14,60,60);\nrect(18,18,60,60);\nrect(22,22,60,60);\nrect(26,26,60,60);\nnoFill();\nstroke(0,0,255,80);\nstrokeWeight(2);\nrect(102,2,60,60);\nrect(106,6,60,60);\nrect(110,10,60,60);\nrect(114,14,60,60);\nrect(118,18,60,60);\nrect(122,22,60,60);<\/pre>\n<\/div>\n
\"\"Dans ce cas, j’ai commenc\u00e9 par d\u00e9finir une zone d’affichage de 190 pixels par 88, sur fond blanc. Puis j’ai d\u00e9cr\u00e9t\u00e9 qu’il n’y aurait pas de traits de contours \u00e0 mes formes (noStroke();<\/strong>) et j’ai s\u00e9lectionn\u00e9 comme couleur de remplissage du rouge (255,0,0) \u00e0 une opacit\u00e9 de 20, comme ceci : fill(255,0,0,20);<\/strong>. Le niveau d’opacit\u00e9 (ou de transparence, c’est la m\u00eame chose) peut aller de 0 (totalement invisible) \u00e0 255 (totalement opaque). Avec la valeur de 20, j’obtiens une opacit\u00e9 d’environ 8%. Avec 127, j’obtiendrais une opacit\u00e9 de 50%, etc. Des carr\u00e9s sont ensuite dessin\u00e9s tous les quatre pixels. L’effet de transparence\/opacit\u00e9 fait que plus il y a d’intersections et plus la couleur est dense.
\nPour la seconde s\u00e9rie, c’est la couleur de remplissage qui est supprim\u00e9e (noFill();<\/strong>) et la couleur de contour qui est cr\u00e9\u00e9e \u00e0 une certaine opacit\u00e9 (stroke(0,0,255,80);<\/strong>), ce qui nous donne du bleu avec une opacit\u00e9 de 80 sur 255, soit environ 32%. L’\u00e9paisseur des traits est de 2 pixels (strokeWeight(2);<\/strong>).<\/p>\n
Les ellipses fonctionnent de mani\u00e8re assez similaire aux rectangles puisque leur remplissage et leur contour se d\u00e9cide de la m\u00eame mani\u00e8re (stroke, noStroke, strokeWeight, fill, noFill). Comme la commande rect, la commande ellipse s’invoque avec quatre arguments : ellipse (x, y, d1, d2);<\/strong>, o\u00f9 x est l’abscisse et y l’ordonn\u00e9e de l’origine (du centre) de l’ellipse et ou d1 est son diam\u00e8tre horizontal et d2 son diam\u00e8tre vertical.
\nDans l’exemple qui suit, apr\u00e8s avoir d\u00e9cid\u00e9 de la taille (530 x 100) et de la couleur (blanc) de la fen\u00eatre d’affichage, je dessine cinq ellipses dont les centres se trouvent aux positions (40,50), (120,50), (200,50), (280,50) et (360,50). Le fait que leur coordonn\u00e9e verticale soit toujours la m\u00eame (50) les place sur la m\u00eame ligne. Les trois premi\u00e8res figures ont des diam\u00e8tres lat\u00e9raux et verticaux identiques, ce sont donc des cercles. Les deux suivantes ont des diam\u00e8tres non-\u00e9gaux.\u00a0
\nPlus loin, je supprime les traits de contour (noStroke();<\/strong>) puis je dessine quatre ellipses dont le point d’origine est le m\u00eame (460, 50) mais dont les diam\u00e8tres sont de plus en plus petits. Entre deux dessins, je change de couleur de remplissage.<\/p>\n
\n
size(530, 100);background(255);\nellipse(40,50,20,20);\nellipse(120,50,40,40);\nellipse(200,50,60,60);\nellipse(280,50,60,20);\nellipse(360,50,20,60);\nnoStroke();\nfill(255,0,0);\nellipse(460,50,80,80);\nfill(255,255,0);\nellipse(460,50,60,60);\nfill(0,255,0);\nellipse(460,50,40,40);\nfill(255);\nellipse(460,50,20,20);<\/pre>\n
Le r\u00e9sultat est conforme au programme.
\nJ’aurais aussi pu d\u00e9cr\u00e9ter une \u00e9paisseur des traits de contour particuli\u00e8re, ce que je n’ai pas fait.\u00a0<\/p>\n
\"\"<\/p>\n
Avec les ellipses nous retrouvons l’effet d’escalier, pas toujours heureux, qui apparaissait avec les lignes obliques dessin\u00e9es \u00e0 l’aide de la commande line<\/strong>.
\nPour pallier \u00e0 ce probl\u00e8me, exactement comme avec les lignes, on peut commencer son programme par la commande smooth();<\/strong> dont l’effet est d’adoucir l’affichage de certains objets.
\nSi la commande smooth(); n’est pas lanc\u00e9e automatiquement au d\u00e9marrage, c’est parce que l’on n’en a pas toujours besoin et qu’elle ralentit consid\u00e9rablement le travail de processing, ralentissement qui n’est cependant pas sensible sur des images aussi simples que celle-ci.\u00a0<\/p>\n
\"\"<\/p>\n
Il n’y a pas beaucoup plus \u00e0 savoir sur les ellipses et les rectangles si ce n’est qu’il existe pour chacune de ces deux formes un param\u00e9trage facultatif permettant de modifier le r\u00f4le du point de r\u00e9f\u00e9rence de la forme. Ainsi en \u00e9crivant rectMode(CENTER);<\/strong>, les rectangles ne seront plus rep\u00e9r\u00e9s par leur point sup\u00e9rieur gauche mais par leur centre, tandis qu’en \u00e9crivant ellipseMode(CORNER);<\/strong>, le point de r\u00e9f\u00e9rence de l’ellipse ne sera plus son centre mais son coin sup\u00e9rieur gauche.<\/div>\n","protected":false},"excerpt":{"rendered":"
Comme promis \u00e0 pr\u00e9sent, les rectangles (dont les carr\u00e9s) et les ellipses (dont les cercles). On peut difficilement faire plus simple. Pour dessiner un rectangle parall\u00e8le aux bords de l’\u00e9cran, il suffit de d’indiquer son point sup\u00e9rieur gauche puis de d\u00e9cider de sa largeur et sa hauteur. rect(20,25,50,60); Avec ce code, processing dessine un rectangle […]<\/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-2480","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2480","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=2480"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2480\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}