{"id":2445,"date":"2008-11-26T10:00:41","date_gmt":"2008-11-26T09:00:41","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2445"},"modified":"2008-11-26T10:00:41","modified_gmt":"2008-11-26T09:00:41","slug":"processing-second-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2445","title":{"rendered":"Processing, second cours"},"content":{"rendered":"

Voil\u00e0, vous avez install\u00e9 processing. S’il fonctionne, lorsque vous double-cliquez sur l’ic\u00f4ne du programme, une fen\u00eatre qui ressemble \u00e0 celle-ci doit s’ouvrir :<\/p>\n

\"\"<\/p>\n

La zone blanche centrale est celle o\u00f9 doit \u00eatre r\u00e9dig\u00e9 le programme.
\nNous verrons plus tard \u00e0 quoi servent les diff\u00e9rents \u00e9l\u00e9ments de menus et les diff\u00e9rentes ic\u00f4nes.\u00a0
\n\"\"Pour l’instant, nous nous contenterons de cliquer sur l’ic\u00f4ne \u00ab\u00a0play\u00a0\u00bb, qui devient jaune.
\nEn cliquant sur ce bouton \u00ab\u00a0play\u00a0\u00bb, on demande \u00e0 processing d’ex\u00e9cuter le programme qui a \u00e9t\u00e9 r\u00e9dig\u00e9.
\nDans notre cas, puisqu’aucun programme n’a \u00e9t\u00e9 r\u00e9dig\u00e9, processing se contente d’ouvrir la fen\u00eatre par d\u00e9faut. Il s’agit d’une fen\u00eatre de 100 pixels de large et de de 100 pixels de haut, avec un fond gris.<\/p>\n

Voici quelques lignes de programme \u00e0 \u00e9crire dans la zone centrale.
\nChaque fois que vous avez saisi une ligne, vous pouvez cliquer sur le bouton \u00ab\u00a0play\u00a0\u00bb (ou aller dans le menu \u00ab\u00a0sketch\u00a0\u00bb et s\u00e9lectionner la commande \u00ab\u00a0run\u00a0\u00bb ou encore faire le raccourci-clavier Control<\/strong>.<\/strong><\/span>+<\/strong>.<\/strong><\/span>R<\/strong>.<\/p>\n

\n
size (500,500);<\/pre>\n<\/div>\n
Cette fois-ci, une fen\u00eatre s’est bien ouverte mais elle est nettement plus grande que la fois pr\u00e9c\u00e9dente, elle fait 500 pixels par 500 pixels.  La commande \u00ab\u00a0size\u00a0\u00bb sert donc \u00e0 d\u00e9finir la largeur et la hauteur de la \u00ab\u00a0sc\u00e8ne\u00a0\u00bb d’affichage. La syntaxe de cette commande est celle-ci : size ( largeur, hauteur );<\/strong> largeur et hauteur doivent \u00eatre remplac\u00e9s par les chiffres correspondants. Le mot size <\/strong>doit \u00eatre en minuscules. La commande est termin\u00e9e par un point-virgule (;<\/strong>). Vous pouvez essayer de modifier les chiffres (par exemple size(400,200);<\/strong>) pour voir le r\u00e9sultat.
\nNotre seconde commande concernera la couleur de fond de la fen\u00eatre dans laquelle s’affiche le programme :<\/p>\n
\n
background(0);<\/pre>\n<\/div>\n
Vous remarquez cette fois que notre fen\u00eatre n’a plus un fond gris mais un fond noir. La commande background <\/strong>s’ex\u00e9cute avec un \u00ab\u00a0argument\u00a0\u00bb (le chiffre entre parenth\u00e8ses) si l’on veut donner au fond de la fen\u00eatre une valeur de gris (entre le noir (0<\/strong>) et le blanc (255<\/strong>)) ou bien trois, s\u00e9par\u00e9es par des virgules, si l’on d\u00e9sire d’autres couleurs que des valeurs de gris.
\nVous pouvez essayer<\/p>\n
\n
background(255, 0, 0);<\/pre>\n<\/div>\n
ou bien<\/p>\n
\n
background(0, 255, 0);<\/pre>\n<\/div>\n
ou encore<\/p>\n
\n
background(0, 0, 255);<\/pre>\n<\/div>\n
La premi\u00e8re combinaison signifie que l’on veut une couleur RGB (rouge-vert-bleu) qui soit compos\u00e9e de la valeur maximum pour le rouge, de la valeur minimale pour le vert et de la valeur minimale pour le bleu. Cela nous donne du rouge.
\nLa seconde combinaison donne du vert, et la troisi\u00e8me, du bleu.
\nVous pouvez tester une combinaison de trois autres chiffres comme<\/p>\n
\n
background(170, 210, 210);<\/pre>\n<\/div>\n
… qui nous donne un gris-vert.
\nNous savons \u00e0 pr\u00e9sent utiliser deux commandes de base.
\nFinissons donc avec un tout petit programme, qui r\u00e9capitule ces commandes tr\u00e8s simples et qui en ajoute deux dont le sens sera tr\u00e8s clair d\u00e8s que vous en aurez lanc\u00e9 l’ex\u00e9cution :<\/p>\n
\n
size(530, 100);\nbackground(250);\nstroke(255, 0, 0);\nline(10,10, 520,90);<\/pre>\n<\/div>\n
Si tout fonctionne bien, le lancement de l’application fera appara\u00eetre une fen\u00eatre de 530 pixels de large par 100 pixels de haut, avec un fond gris tr\u00e8s clair (250), sur lequel est dessin\u00e9, en diagonale, un trait rouge (la commande stroke<\/strong> sert \u00e0 d\u00e9cider de la couleur des traits), qui part du point (10, 10) et aboutit au point (520, 90).<\/p>\n
\"\"<\/p>\n
Vous pouvez \u00e0 pr\u00e9sent essayer le m\u00eame programme en modifiant les chiffres, et voir ce que cela donne.\u00a0
\nNous avons donc appris que les commandes s’\u00e9crivent dans la fen\u00eatre, qu’elles sont toujours suivies de parenth\u00e8ses entre lesquelles se trouvent un certain nombre d’arguments (nombre qui est z\u00e9ro dans le cas de certaines commandes ne r\u00e9clamant pas de param\u00e8tres), s\u00e9par\u00e9s par des virgules.
\nEnfin nous avons appris qu’apr\u00e8s chaque commande, on \u00e9crivait un point-virgule.
\nSi vous avez commis une faute quelconque (utilisation ou oubli de majuscules, oubli de point-virgule), vous aurez remarqu\u00e9 que processing n’ex\u00e9cute pas vos ordres mais vous adresse \u00e0 la place un message plus ou moins compr\u00e9hensible.<\/p>\n","protected":false},"excerpt":{"rendered":"
Voil\u00e0, vous avez install\u00e9 processing. S’il fonctionne, lorsque vous double-cliquez sur l’ic\u00f4ne du programme, une fen\u00eatre qui ressemble \u00e0 celle-ci doit s’ouvrir : La zone blanche centrale est celle o\u00f9 doit \u00eatre r\u00e9dig\u00e9 le programme. Nous verrons plus tard \u00e0 quoi servent les diff\u00e9rents \u00e9l\u00e9ments de menus et les diff\u00e9rentes ic\u00f4nes.\u00a0 Pour l’instant, nous nous […]<\/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-2445","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2445","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=2445"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2445\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}