{"id":2661,"date":"2008-12-01T01:59:44","date_gmt":"2008-12-01T00:59:44","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2661"},"modified":"2008-12-01T01:59:44","modified_gmt":"2008-12-01T00:59:44","slug":"processing-dixieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2661","title":{"rendered":"Processing, dixi\u00e8me cours"},"content":{"rendered":"

\"\"Apr\u00e8s la souris, parlons du clavier1<\/a><\/sup> .\u00a0Processing est capable d’\u00abintercepter\u00bb\u00a0(c’est le terme consacr\u00e9) les \u00e9v\u00e8nements du clavier \u2014\u00a0ce qui est passablement banal. Tout comme dans le cas de la souris, on distingue la frappe d’une touche (keyReleased) de la demi-frappe (keyPressed).
\nN\u00e9anmoins, le clavier et le bouton de la souris fonctionnent de mani\u00e8re passablement diff\u00e9rente car le clavier reconna\u00eet la r\u00e9p\u00e9tition de la frappe, ce qui signifie que si l’on reste le doigt enfonc\u00e9 sur la touche \u00ab\u00a0a\u00a0\u00bb, l’ordinateur se comportera comme si on avait appuy\u00e9 plusieurs fois de suite sur la touche. Ce param\u00e8tre est totalement impossible \u00e0 ma\u00eetriser car il d\u00e9pend de chaque syst\u00e8me d’exploitation et des r\u00e9glages effectu\u00e9s par l’utilisateur.
\nVoici un script tout simple qui utilise les deux fonctions d’\u00e9v\u00e8nement (keyPressed() et keyReleased()) ainsi que la propri\u00e9t\u00e9 keyPressed :<\/p>\n

\n
void setup(){\n  background(255); stroke(255,0,0);\n}\nvoid draw(){\n \u00a0if (keyPressed ){\n    line(50,50, random(100),random(100));\n\u00a0\u00a0}\n}\nvoid keyPressed(){\n  background(0);\n}\u00a0\nvoid keyReleased(){\n  background(255);\n}<\/pre>\n<\/div>\n
\"\"Au d\u00e9marrage (setup()<\/strong>), je \u00ab\u00a0peins\u00a0\u00bb la fen\u00eatre en blanc et je r\u00e8gle la couleur des traits sur le rouge (255,0,0)
\nLa fonction d’\u00e9v\u00e8nement keyPressed()<\/strong> est invoqu\u00e9e lorsque l’on appuie sur le clavier. Elle a pour effet de \u00ab\u00a0peindre\u00a0\u00bb la fen\u00eatre en noir. La fonction d’\u00e9v\u00e8nement keyReleased()<\/strong> est invoqu\u00e9e lorsque l’on lache une touche que l’on a enfonc\u00e9, et elle a ici pour effet de \u00ab\u00a0peindre\u00a0\u00bb la fen\u00eatre en blanc. Enfin, avec le gestionnaire draw()<\/strong>, qui s’ex\u00e9cute r\u00e9guli\u00e8rement, je dis qu’une ligne doit \u00eatre trac\u00e9e au hasard sur l’\u00e9cran si, et seulement si, une touche du clavier est enfonc\u00e9e (if (keyPressed )<\/strong>).
\nNotez que, m\u00eame si elle ne contient rien, une fonction draw()<\/strong> doit imp\u00e9rativement \u00eatre r\u00e9dig\u00e9e dans le script pour que les fonction de gestion d’\u00e9v\u00e8nements du clavier soient pris en compte.<\/p>\n
Les touches du clavier<\/h4>\n
Processing est bien entendu capable de savoir quelle touche a \u00e9t\u00e9 enfonc\u00e9e. Le r\u00e9sultat de cet \u00e9v\u00e8nement est stock\u00e9 dans deux variables syst\u00e8mes, key<\/strong> et keyCode<\/strong>.
\nAvec key, on peut effectuer une v\u00e9rification de cette mani\u00e8re :<\/p>\n
\n
void draw(){\n\u00a0\u00a0\/\/ gestionnaire vide mais obligatoire\n}\n\nvoid keyReleased(){\n\u00a0\u00a0if(key=='r'){\n\u00a0\u00a0 \u00a0 background(255,0,0);\n\u00a0\u00a0} \u00a0\n\u00a0\u00a0if(key=='v'){\n\u00a0\u00a0 \u00a0 background(0,255,0);\n\u00a0\u00a0} \u00a0\n\u00a0\u00a0if(key=='b'){\n\u00a0\u00a0 \u00a0 background(0,0,255);\n\u00a0\u00a0}\u00a0\u00a0\n}<\/pre>\n<\/div>\n
Avec ce script une s\u00e9rie de tests, appel\u00e9s lorsque l’on touche au clavier (keyReleased()<\/strong>), sont effectu\u00e9s et sont dans certains cas suivis par un changement de la couleur de la sc\u00e8ne. Si la touche enfonc\u00e9e est ‘r<\/strong>‘, alors l’\u00e9cran est \u00ab\u00a0peint\u00a0\u00bb en rouge (background(255,0,0)<\/strong>), si la touche est ‘v<\/strong>‘, l’\u00e9cran est peint en vert et si la touche est ‘b<\/strong>‘, il est \u00ab\u00a0peint\u00a0\u00bb en bleu. Les lettres sont ici \u00e9crite en minuscules, car pour key, b et B ou v et V ne sont pas les m\u00eames lettres.
\n\"\"On remarquera que le caract\u00e8re s’\u00e9crit entre deux apostrophes droites ( ‘<\/strong> – souvent utilis\u00e9 en remplacement de l’apostrophe typographique\u00a0(\u2019<\/strong>)\u00a0ou de la minute (\u2032<\/strong>)).<\/p>\n
keyCode<\/strong> s’utilise de la m\u00eame mani\u00e8re, mais au lieu de contenir un caract\u00e8re, cette variable contient un code num\u00e9rique. Par exemple si je veux conna\u00eetre le keyCode apr\u00e8s que la touche ‘a<\/strong>‘ ait \u00e9t\u00e9 enfonc\u00e9e, Processing me renverra le chiffre 65. On peut par ailleurs comparer la variable keyCode \u00e0 un certain nombre de touches sp\u00e9ciales telles que\u00a0UP (fl\u00e8che haut), DOWN (fl\u00e8che bas), LEFT (fl\u00e8che gauche), RIGHT (fl\u00e8che droite), ALT, CONTROL et SHIFT (majuscule).<\/p>\n
\n
void draw(){\n  \/\/ gestionnaire vide mais obligatoire\n}\nvoid keyReleased(){\n  background(255);\n  if(keyCode==UP){\n    rect(40,0,20,50);\u00a0\n  }\n  if(keyCode==DOWN){\n    rect(40,50,20,50);\n  }\n  if(keyCode==RIGHT){\n    rect(50,40,50,20);\n  }\n  if(keyCode==LEFT){\n    rect(0,40,50,20);\n  }\n}<\/pre>\n<\/div>\n
Dans cet exemple, lorsque la touche du clavier a \u00e9t\u00e9 utilis\u00e9e, la sc\u00e8ne est \u00ab\u00a0repeinte\u00a0\u00bb en blanc (background(255)), puis une s\u00e9rie de tests sont effectu\u00e9s pour savoir si la fl\u00e8che haut, la fl\u00e8che bas, la gauche ou la droite ont \u00e9t\u00e9 utilis\u00e9e. Pour chacun de ces cas possibles, un dessin diff\u00e9rent appara\u00eet \u00e0 l’\u00e9cran.<\/p>\n
Encore un article assez aust\u00e8re. Les trois suivants seront, j’en ai peur, encore pires.<\/p>\n
  1.  Le coin culture : tout le monde sait que la souris d’ordinateur est une conqu\u00eate assez r\u00e9cente (th\u00e9orie: 1965, brevet: 1968, application industrielle: 1981), mais il est plus rare qu’on se souvienne que le clavier, du moins le clavier coupl\u00e9 \u00e0 un ordinateur, est \u00e0 peine plus ancien, puisque son usage informatique ne remonte qu’au d\u00e9but des ann\u00e9es 1960. Auparavant, on communiquait avec les ordinateurs \u00e0 l’aide de cartes perfor\u00e9es ou simplement (?) par c\u00e2blage.  [↩<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"
    Apr\u00e8s la souris, parlons du clavier1 .\u00a0Processing est capable d’\u00abintercepter\u00bb\u00a0(c’est le terme consacr\u00e9) les \u00e9v\u00e8nements du clavier \u2014\u00a0ce qui est passablement banal. Tout comme dans le cas de la souris, on distingue la frappe d’une touche (keyReleased) de la demi-frappe (keyPressed). N\u00e9anmoins, le clavier et le bouton de la souris fonctionnent de mani\u00e8re passablement diff\u00e9rente […]<\/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-2661","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2661","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=2661"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2661\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}