{"id":2614,"date":"2008-11-29T00:30:46","date_gmt":"2008-11-28T23:30:46","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2614"},"modified":"2012-04-04T21:26:14","modified_gmt":"2012-04-04T21:26:14","slug":"processing-neuvieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2614","title":{"rendered":"Processing, neuvi\u00e8me cours"},"content":{"rendered":"

\"\"Processing ne sert pas qu’\u00e0 produire des images fixes, comme on l’a vu avec la fonction draw() que nous allons \u00e0 nouveau employer ici.
\nParmi les \u00ab\u00a0sens\u00a0\u00bb (les p\u00e9riph\u00e9riques d’entr\u00e9e) de processing, les deux plus \u00e9vidents sont la souris et le clavier de l’ordinateur. Il en existe bien d’autres, accessibles directement ou par le biais de librairies externes : micro, webcam, r\u00e9seau, etc. Pour l’instant, nous allons parler de la souris.
\nUne premi\u00e8re chose \u00e0 savoir est que la position de la souris sur un \u00e9cran ou dans une fen\u00eatre de programme est toujours relative au coin sup\u00e9rieur gauche de cet espace.<\/p>\n

Les coordonn\u00e9es de la souris<\/strong><\/p>\n

Ce simple exemple sera sans doute suffisamment \u00e9loquent :<\/p>\n

\n
void draw(){\r\n  point(mouseX, mouseY);\r\n}<\/pre>\n<\/div>\n
Si vous saisissez ce code dans processing et que vous cliquez sur le bouton \u00ab\u00a0play\u00a0\u00bb, un point noir sera dessin\u00e9 sous votre curseur de souris, ce qui fait que vous dessinerez sur l’\u00e9cran. Nous connaissons d\u00e9j\u00e0 la fonction draw()<\/strong>, qui est ex\u00e9cut\u00e9e x fois par seconde, et la fonction point(x,y)<\/strong> qui dessine un point \u00e0 l’emplacement (x,y). Ici, x et y sont remplac\u00e9s par deux variables syst\u00e8me, mouseX<\/strong> et mouseY<\/strong> qui sont, respectivement, la coordonn\u00e9e horizontale de la souris (abscisse) et sa coordonn\u00e9e verticale (ordonn\u00e9e).
\nNous pouvons remplacer le point par une ellipse, et repeindre la sc\u00e8ne en noir \u00e0 chaque cycle, afin que l’ellipse ne dessine pas sur la sc\u00e8ne mais semble bouger avec la souris.<\/p>\n
\n
void draw(){\r\n  background(0);\r\n  ellipse(mouseX, mouseY,20,20);\r\n}<\/pre>\n<\/div>\n
Compliquons encore un peu plus notre programme en ajoutant un script setup<\/strong> :<\/p>\n
\n
void setup(){\r\n   smooth(); noStroke();background(0);\r\n}\r\n\r\nvoid draw(){\r\n  background(0);\r\n  ellipse(mouseX, mouseY,20,20);\r\n}<\/pre>\n<\/div>\n
Cette fois, m\u00eame r\u00e9sultat (une ellipse semble suivre la souris) mais l’affichage est am\u00e9lior\u00e9 puisque l’on a supprim\u00e9 le trait de contour (stroke), peint la sc\u00e8ne en noir d\u00e8s le d\u00e9part (background) et activ\u00e9 l’anti-aliasing (smooth). On aurait aussi pu changer la couleur de remplissage de l’ellipse, par exemple en \u00e9crivant dans le setup fill(255,0,0);<\/strong> (l’ellipse appara\u00eetrait alors en rouge).
\nOn remarque au passage que Processing n’accepte comme coordonn\u00e9es de la souris que des valeurs correspondant \u00e0 la fen\u00eatre d’affichage. Au passage, signalons que l’on peut masquer le curseur avec la commande noCursor();<\/strong>
\nLa position de la souris peut \u00eatre utilis\u00e9e pour d’autres choses que pour faire bouger un objet, bien entendu. On peut par exemple demander que l’\u00e9cran ait un fond d’une certaine couleur si la position verticale du curseur de la souris est inf\u00e9rieure \u00e0 50 pixels et d’une autre couleur sinon.<\/p>\n
\n
void draw(){\r\n  if(mouseY<50){ background(255);} else { background(0);}\r\n}<\/pre>\n<\/div>\n
Au passage nous venons de d\u00e9couvrir une nouvelle fonction, le test conditionnel (if<\/strong>), qui permet d’agir d’une mani\u00e8re ou d’une autre en fonction d’un param\u00e8tre donn\u00e9. Nous y reviendrons.
\nLes cr\u00e9ateurs de Processing ont pens\u00e9 \u00e0 y ajouter deux variables syst\u00e8me extr\u00eamement utiles : pmouseX <\/strong>et pmouseY<\/strong>. Ces deux variables servent \u00e0 stocker la position pr\u00e9c\u00e9dente de la souris. Si mon curseur se trouvait \u00e0 (10,11) au moment pr\u00e9c\u00e9dent (il y a 1\/20e de seconde si nous sommes \u00e0 20 images par seconde par ex.) et qu’il se trouve \u00e0 (13,12) sur l’image suivante, pmouseX aura la valeur de 10, pmouseY la valeur de 11, mouseX la valeur de 13 et mouseY la valeur de 12. Un petit calcul de la distance parcourue nous permettra d’estimer la v\u00e9locit\u00e9 de la souris sur l’\u00e9cran par exemple.<\/p>\n
Le clic<\/strong><\/p>\n
Les utilisateurs y pensent rarement, quoiqu’ils les emploient quotidiennement, mais il existe deux sortes de clics avec une souris. Le demi-clic et le simple clic. Le demi-clic intervient lorsque l’on appuie sur le bouton de la souris, tandis que le simple clic intervient lorsque l’on relache le bouton de la souris. \u00c9videmment, si l’on effectue un simple clic, c’est apr\u00e8s avoir effectu\u00e9 un demi-clic. On utilise souvent le demi-clic pour le glisser-d\u00e9placer et le clic, pour ex\u00e9cuter ou valider une action.<\/p>\n
Nous pouvons tester trois possibilit\u00e9s :<\/p>\n
    \n
  • L’instant o\u00f9 le bouton de la souris vient d’\u00eatre enfonc\u00e9. C’est la fonction d’\u00e9v\u00e8nement mousePressed()<\/strong>.<\/li>\n
  • L’instant o\u00f9 le bouton de la souris est rel\u00e2ch\u00e9 (clic). C’est la fonction d’\u00e9v\u00e8nement mouseReleased()<\/strong>.<\/li>\n
  • Enfin, \u00e0 tout instant nous pouvons v\u00e9rifier si le clic est maintenu, avec la propri\u00e9t\u00e9 mousePressed<\/strong>.<\/li>\n<\/ul>\n
    L’exemple qui suit recourt \u00e0 toutes ces possibilit\u00e9s \u00e0 la fois.
    \nDans le fonction draw(), qui s’ex\u00e9cute r\u00e9guli\u00e8rement, je v\u00e9rifie si le curseur de la souris est enfonc\u00e9, avec la condition if (mousePressed)<\/strong>. Si c’est le cas, je dessine une ellipse de 20×20 pixels aux coordonn\u00e9es de la souris.
    \nLa fonction mousePressed()<\/strong> est ex\u00e9cut\u00e9e lorsque le bouton de la souris est enfonc\u00e9. Ici, je l’utilise pour \u00ab\u00a0repeindre\u00a0\u00bb la fen\u00eatre en blanc.
    \nLa fonction mouseReleased()<\/strong> est invoqu\u00e9e lorsque la souris a \u00e9t\u00e9 enfonc\u00e9e puis est rel\u00e2ch\u00e9e. Ici, je lui demande de \u00ab\u00a0repeindre\u00a0\u00bb la fen\u00eatre en noir.<\/p>\n
    \n
    void draw(){\r\n  if (mousePressed){\r\n    ellipse(mouseX, mouseY, 20,20);\r\n  }\r\n}\r\n\r\nvoid mousePressed(){\r\n  background(255);\r\n}\r\n\r\nvoid mouseReleased(){\r\n  background(0);\r\n}<\/pre>\n<\/div>\n
    Il existe par ailleurs deux fonctions relatives au d\u00e9placement de la souris, mouseMoved()<\/strong>, qui est invoqu\u00e9e chaque fois que la souris a boug\u00e9, et mouseDragged()<\/strong>, qui est invoqu\u00e9e chaque fois que la souris a boug\u00e9 et que son bouton est maintenu enfonc\u00e9.
    \nDans l’exemple suivant, \u00e0 chaque fois que la souris est d\u00e9plac\u00e9e et que le clic est maintenu, processing dessine une ligne entre l’ancienne position de la souris et la nouvelle.<\/p>\n
    \"\"<\/p>\n
    (l’image ci-dessus n’est pas une animation Processing mais juste une image fixe qui \u00e9voque le r\u00e9sultat obtenu avec le programme reproduit plus bas).
    \nNotez qu’il faut que le script contienne une fonction draw()<\/strong> pour que la fonction mouseDragged()<\/strong> soit prise en compte.<\/p>\n
    \n
    void draw(){\r\n  \/\/ sans action, mais obligatoire<\/span>\r\n}\r\n\r\nvoid mouseDragged(){\r\n  line(pmouseX, pmouseY, mouseX, mouseY);\r\n}<\/pre>\n<\/div>\n
    Pour finir, il existe une derni\u00e8re propri\u00e9t\u00e9 relative \u00e0 la souris qui se nomme mouseButton et qui permet de v\u00e9rifier quel bouton de la souris est cliqu\u00e9, \u00e0 savoir le droit, le gauche ou le bouton central (RIGHT, LEFT, CENTER). Par exemple : if (mouseButton== RIGHT){ instructions <\/em>}<\/strong>, o\u00f9 instructions <\/em>sera remplac\u00e9 par les commandes \u00e0 ex\u00e9cuter si la condition (le clic gauche) est remplie.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Processing ne sert pas qu’\u00e0 produire des images fixes, comme on l’a vu avec la fonction draw() que nous allons \u00e0 nouveau employer ici. Parmi les \u00ab\u00a0sens\u00a0\u00bb (les p\u00e9riph\u00e9riques d’entr\u00e9e) de processing, les deux plus \u00e9vidents sont la souris et le clavier de l’ordinateur. Il en existe bien d’autres, accessibles directement ou par le biais […]<\/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-2614","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2614","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=2614"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2614\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}