{"id":2508,"date":"2008-11-27T10:55:56","date_gmt":"2008-11-27T09:55:56","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2508"},"modified":"2008-11-27T10:55:56","modified_gmt":"2008-11-27T09:55:56","slug":"processing-cinquieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2508","title":{"rendered":"Processing, cinqui\u00e8me cours"},"content":{"rendered":"

On reprend, avec quelques nouvelles formes en deux dimensions. Nous avons vu la ligne, le rectangle et l’ellipse, voici \u00e0 pr\u00e9sent le point, le triangle, l’arc et le quad.<\/p>\n

Le point<\/h4>\n

La commande point est simplissime, puisqu’elle s’invoque tout b\u00eatement comme ceci : point(abscisse, ordonnee);<\/strong>, o\u00f9 abscisse et ordonn\u00e9e sont des chiffres. Pour \u00eatre plus pr\u00e9cis, on peut ajouter un troisi\u00e8me axe (la cote), afin de placer le point dans l’espace et non sur un plan : point(abscisse, ordonn\u00e9e, cote);<\/strong>. Mais nous ne parlerons pas de \u00e7a aujourd’hui.
\nLe point est soumis aux param\u00e8tres des traits en g\u00e9n\u00e9ral, c’est \u00e0 dire que l’on peut r\u00e9gler sa couleur avec stroke(couleur);<\/strong>,\u00a0son \u00e9paisseur avec strokeWeight(\u00e9paisseur);<\/strong> et la pr\u00e9cision visuelle de son affichage avec smooth();<\/strong>.
\nEn revanche la commande\u00a0noStroke();<\/strong> n’a pas d’effet sur l’affichage des points.<\/p>\n

\"\"<\/p>\n

La suite de points ci dessus a \u00e9t\u00e9 obtenue avec ce programme :<\/p>\n

\n
size(530,50);\npoint(53,25);\nstrokeWeight(25);\npoint(159,25);\nsmooth();\npoint(265,25);\nstroke(255,0,0);\nstrokeWeight(10);\npoint(371,25);\nstroke(255,255,255);\npoint(477,25);<\/pre>\n<\/div>\n
On peut noter la diff\u00e9rence visuelle appr\u00e9ciable qui intervient apr\u00e8s l’utilisation de la commande smooth(), sur le troisi\u00e8me point, au centre de l’image.<\/p>\n
Le triangle<\/h4>\n
\"\"Le triangle, qui comme chacun sait est d\u00e9fini par trois points, se dessine de mani\u00e8re tr\u00e8s simple avec la commande triangle()<\/strong>, qui est invoqu\u00e9e comme suit : triangle (x1, y1, x2, y2, x3, y3);<\/strong>, o\u00f9 x1 est l’abscisse du premier point, y1 l’ordonn\u00e9e du premier point, et ainsi de suite. La commande triangle est sensible aux commandes fill (couleur de remplissage), stroke (couleur des traits), strokeWeight (\u00e9paisseur des traits) et smooth (qualit\u00e9 d’affichage).
\nDans cet exemple, nous commen\u00e7ons par \u00ab\u00a0peindre\u00a0\u00bb la fen\u00eatre en noir (background(0);<\/strong>)\u00a0puis nous d\u00e9cr\u00e9tons que la couleur de remplissage en cours est le rouge (fill(255,0,0);<\/strong>) et que les traits devront \u00eatre dessin\u00e9s en jaune (stroke(255,255,0);<\/strong>).
\nEnfin, nous tra\u00e7ons notre triangle avec trois points : (10,90), (50,10) et (90,90).<\/p>\n
\n
background(0);\nfill(255,0,0);\nstroke(255,255,0);\ntriangle(10,90,50,10,90,90);<\/pre>\n<\/div>\n
L’arc<\/h4>\n
\"\"Le dessin des arcs n’est pas beaucoup plus compliqu\u00e9, la syntaxe de la commande \u00e9tant la suivante :
\narc(x, y, largeur, hauteur, d\u00e9part, arriv\u00e9e);<\/strong> o\u00f9 x et y sont les coordonn\u00e9es cart\u00e9siennes de l’origine de l’arc, ou largeur et hauteur sont les diam\u00e8tres horizontaux et verticaux dans lesquels s’inscrit l’arc (comme pour les ellipses) et o\u00f9, pour finir, d\u00e9part et arriv\u00e9e sont l’angle de d\u00e9part et l’angle d’arriv\u00e9e de l’arc. Par d\u00e9faut, ces angles sont exprim\u00e9s en radians (de z\u00e9ro \u00e0 deux fois \u03a0) et non en degr\u00e9s (de z\u00e9ro \u00e0 trois-cent soixante). Pour convertir des degr\u00e9s en radians on utilise la commande radians (radians(180); donne\u00a0\u03a0 (PI), par exemple.
\nLe pacman qui est dessin\u00e9 ci-dessus est r\u00e9alis\u00e9 avec le code suivant :<\/p>\n
\n
fill(255,255,0);\narc(50, 50, 90, 90, radians(45), radians(315));<\/pre>\n<\/div>\n
On remarque que les arcs sont soumis \u00e0 la commande fill<\/strong> (remplissage). Ils sont aussi soumis aux commandes stroke<\/strong>, strokeweight<\/strong> et smooth<\/strong>, qui ne sont pas utilis\u00e9es ici. On remarque par ailleurs que les valeurs de l’angle de d\u00e9part et de l’angle d’arriv\u00e9es ne sont pas des chiffres mais le r\u00e9sultat d’une conversion de chiffre. Pour processing, \u00e9crire radians(45)<\/strong> \u00e9quivaut en fait \u00e0 \u00e9crire\u00a00.7853982.<\/p>\n
Le quad<\/h4>\n
Le quad est un quadrilat\u00e8re quelconque, rep\u00e9r\u00e9 par quatre points. on le dessine \u00e0 l’aide de cette commande.: quad (x1, y1, x2, y2, x3, y3, x4, y4);<\/strong>, o\u00f9 x1 et y1 sont les coordonn\u00e9es d’un des quatre points, x2 et y2 les coordonn\u00e9es d’un second point, x3 et y3 les coordonn\u00e9es d’un troisi\u00e8me point et x4 et y4 les coordonn\u00e9es du quatri\u00e8me et dernier point. Les quads sont soumis aux\u00a0commandes\u00a0stroke<\/strong>,\u00a0strokeweight <\/strong>et\u00a0smooth<\/strong>. Voici quelques exemples de quads.<\/p>\n
\"\"<\/p>\n
Ils ont \u00e9t\u00e9 obtenus avec ce programme :<\/p>\n
\n
quad (10,10,90,10,90,90,10,90);\nquad (10,10,90,10,10,90,90,90);\nquad (10,20,90,10,80,90,20,80);\nsmooth();\nquad (10,20,90,10,80,90,20,80);\nnoStroke();\nfill(200,190,0);\nquad (10,20,90,10,80,90,20,80);<\/pre>\n<\/div>\n
On remarque la diff\u00e9rence d’affichage des quads dessin\u00e9s apr\u00e8s la commande smooth();<\/strong> (le quatri\u00e8me et le cinqui\u00e8me quad sont dans ce cas). On remarque aussi que les deux premiers quads, qui utilisent les m\u00eames points, mais pas dans le m\u00eame ordre, ce qui fait que deux traits du second quad se croisent.<\/p>\n
Nous pouvons nous arr\u00eater l\u00e0 avec les formes dessin\u00e9es par processing, pour l’instant, mais il en existe d’autres : les courbes et les courbes de b\u00e9zier, les \u00ab\u00a0vertex\u00a0\u00bb (qui sont en fait des formes \u00e0 n points reli\u00e9s par des lignes ou par des courbes), et bien entendu les formes en 3D.
\nNous ne sommes pas non plus rentr\u00e9s dans les d\u00e9tails concernant le rendu des lignes, que permettent les commandes strokeCap();<\/a><\/strong> et strokeJoin();<\/a><\/strong>, qui permettent de d\u00e9cider si une ligne se termine par un arrondi, par un angle ou par un biseau et qui permet de d\u00e9finir le rendu de l’intersection de deux lignes.<\/p>\n
Prochain \u00e9pisode : l’utilisation du hasard.<\/p>\n","protected":false},"excerpt":{"rendered":"
On reprend, avec quelques nouvelles formes en deux dimensions. Nous avons vu la ligne, le rectangle et l’ellipse, voici \u00e0 pr\u00e9sent le point, le triangle, l’arc et le quad. Le point La commande point est simplissime, puisqu’elle s’invoque tout b\u00eatement comme ceci : point(abscisse, ordonnee);, o\u00f9 abscisse et ordonn\u00e9e sont des chiffres. Pour \u00eatre plus […]<\/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-2508","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2508","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=2508"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2508\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}