![\"\"](\"\/dernier\/files\/2008\/12\/cases_donnees.png\")
<\/p>\nNous avons d\u00e9j\u00e0 rencontr\u00e9 des variables au fil des scripts, il est temps de faire le point \u00e0 leur sujet. Il s’agit d’un des concepts cl\u00e9 de la programmation.<\/p>\n
<\/p>\n
Une variable est un mot qui est associ\u00e9 \u00e0 une valeur. Je peux par exemple d\u00e9cr\u00e9ter que j’utilise une variable nomm\u00e9e compteur <\/strong>(c’est moi qui ai choisi le nom) et qui est associ\u00e9e \u00e0 la valeur 0 (z\u00e9ro). Puis, au cours de mon animation je peux imaginer d’incr\u00e9menter ce compteur en fonction d’un \u00e9v\u00e8nement, par exemple \u00e0 chaque fois qu’un clic de souris est effectu\u00e9. Au premier clic, la variable compteur sera alors incr\u00e9ment\u00e9e de 1 et verra sa valeur passer de z\u00e9ro \u00e0 un, puis au second clic elle sera \u00e0 nouveau incr\u00e9ment\u00e9e et prendra donc la valeur de deux, et ainsi de suite. Le principe de fonctionnement des variables n’est pas tr\u00e8s difficile \u00e0 comprendre mais le d\u00e9butant peut \u00eatre d\u00e9rout\u00e9 par un certain nombre de pr\u00e9-requis que je vais \u00e9num\u00e9rer ici :<\/p>\n Voici un exemple tr\u00e8s basique de manipulation d’une variable :<\/p>\n Ici la variable se nomme couleur<\/em>. On remarque que sur la premi\u00e8re ligne de mon programme, en marge (c’est \u00e0 dire \u00e0 un niveau sup\u00e9rieur) des gestionnaires d’\u00e9v\u00e8nement setup()<\/strong> et draw()<\/strong>, je d\u00e9clare ma variable en commen\u00e7ant par indiquer son type, suivi de son nom. Ainsi en \u00e9crivant float couleur;<\/strong>, j’avertis Processing que je vais manipuler une variable de type nombre d\u00e9cimal (float<\/em>) nomm\u00e9e couleur<\/em> et que cette variable pourra potentiellement \u00eatre manipul\u00e9e par n’importe quelle fonction du programme (c’est le fait d’\u00eatre d\u00e9clar\u00e9e en dehors des fonctions qui lui donne cette propri\u00e9t\u00e9). Sans cette d\u00e9claration, Processing refuserait d’utiliser la variable couleur. Au passage, revoyons la structure des conditions if<\/span><\/em><\/strong> : Finissons avec ce sujet extr\u00eamement abstrait en \u00e9voquant les types les plus courants de variables que Processing traite :<\/p>\n Nous allons voir dans le prochain article comment on peut stocker des variables sous forme de listes (ou tableaux).<\/p>\n Nous avons d\u00e9j\u00e0 rencontr\u00e9 des variables au fil des scripts, il est temps de faire le point \u00e0 leur sujet. Il s’agit d’un des concepts cl\u00e9 de la programmation. Une variable est un mot qui est associ\u00e9 \u00e0 une valeur. Je peux par exemple d\u00e9cr\u00e9ter que j’utilise une variable nomm\u00e9e compteur (c’est moi qui ai […]<\/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-2716","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2716","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=2716"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2716\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nLes applications pratiques des variables sont infinies, puisqu’elles permettent de faire \u00e9voluer une valeur dans le temps. Par exemple si je souhaite faire bouger un objet sur l’\u00e9cran, il faudra que ses coordonn\u00e9es soient stock\u00e9es dans des variables afin que je puisse changer la position de l’objet en tenant compte de son \u00e9tat ant\u00e9rieur. Nous alons voir un cas pratique plus loin.<\/p>\n\n
\nfloat couleur;\n\nvoid setup(){\n couleur=0;\n background(couleur);\n}\n\nvoid draw(){\n if(mousePressed){\n couleur=couleur+0.5;\n couleur=couleur*1.05;\n } else {\n couleur=couleur*0.9;\n }\n background(couleur);\n}<\/pre>\n<\/div>\n
\nDans notre setup() (fonction lanc\u00e9e une unique fois au d\u00e9but de l’ex\u00e9cution du programme), nous associons une valeur (z\u00e9ro) \u00e0 notre variable en \u00e9crivant ceci :\u00a0couleur=0<\/em>. L’op\u00e9rateur \u00ab\u00a0=\u00a0\u00bb (\u00e9gal) sert donc \u00e0 affecter une valeur \u00e0 une variable.
\nA=1 signifie donc : A prend la valeur de 1.
\n![\"\"](\"\/dernier\/files\/2008\/12\/progression_variable.png\")
Dans notre fonction draw()<\/em> (qui est lanc\u00e9e de mani\u00e8re r\u00e9guli\u00e8re), nous faisons un test (if (mousePressed)<\/em>) qui, on l’a vu pr\u00e9c\u00e9demment, permet de v\u00e9rifier si le bouton de la souris est enfonc\u00e9. Dans le cas o\u00f9 le bouton de la souris est effectivement enfonc\u00e9, la variable couleur <\/em>se voit appliquer deux traitements. Tout d’abord elle est incr\u00e9ment\u00e9e de 0.5 (z\u00e9ro virgule cinq). Si par exemple elle vaut 100, apr\u00e8s ce premier traitement sa valeur sera de 100.5. Ensuite nous multiplions couleur <\/em>par 1.05. Multiplier par 1.05 (un virgule z\u00e9ro-cinq) \u00e9quivaut \u00e0 ajouter 5% \u00e0 une valeur. Ainsi, 100*1.05 = 105 ; 200*1.05 = 210; etc. Cette multiplication permet \u00e0 ma variable couleur de conna\u00eetre une acc\u00e9l\u00e9ration. Elle conna\u00eetra ces \u00e9tats successifs (que j’arrondis \u00e0 trois d\u00e9cimales pour ne pas rendre l’\u00e9num\u00e9ration de ces \u00e9tats successifs trop indigeste ou trop illisible) :\u00a00.0 ;\u00a00.525 ; 1.076 ; 1.655 ; 2.262 ; 2.900 ; 3.571 ; 4.274 ; 5.013 ; 5.788 ; 6.603 ; 7.458 ; 8.356 ; 9.299 ; 10.289 ; 11.328 ; 12.420 ; 13.566 ; 14.769 ; 16.032 ; 17.359 ; 18.752 ; 20.215 ; 21.750 ; 23.363 ; 25.056 ; 26.834 ; 28.701 ; 30.661 ; 32.719 ; 34.880 ; 37.149 ; 39.531 ; 42.033 ; 44.660 ; 47.418 ; 50.314 ; 53.354 ; 56.547 ; 59.899 ; 63.419 ; 67.115 ; 70.996 ; 75.071 ; 79.349 ; 83.842 ; 88.559 ; 93.512 ; 98.713 ; 104.173 ; 109.907 ; etc. On peut voir sur l’image reproduite au dessus que notre chiffre augmente avec une acc\u00e9l\u00e9ration et non de mani\u00e8re rectiligne.
\nLa condition if<\/strong> (si…) est ici suivie d’une alternative else<\/strong> (sinon – c’est \u00e0 dire, dans ce cas, si le bouton de la souris n’est pas enfonc\u00e9<\/em>). Dans cette alternative, je multiplie ma variable couleur par 0.9, c’est \u00e0 dire que je lui \u00f4te 10% (multiplier par 0.9 revient \u00e0 enlever dix pour cent).
\nEnfin, apr\u00e8s avoir proc\u00e9d\u00e9 \u00e0 tous ces calculs, je \u00ab\u00a0repeins\u00a0\u00bb la fen\u00eatre avec la couleur qui correspond au chiffre contenu dans ma variable couleur<\/em>. Si couleur a la valeur de 10, \u00e9crire background(couleur) <\/em>revient \u00e0 \u00e9crire background(10)<\/em>.<\/p>\n
\nif <\/strong>( <\/strong>condition ) { <\/strong>actions \u00e0 r\u00e9aliser si la condition est remplie } else { <\/strong>actions \u00e0 r\u00e9aliser si la condition n’est pas remplie }<\/strong>
\nOn peut imbriquer des conditions dans les conditions, comme ceci : if (a<10){ if (a<5){ … }}. Il est \u00e0 noter que dans Processing, toute accolade, tout crochet, toute parenth\u00e8se ou toute guillemet ouvertes ( {[(\u00ab\u00a0<\/strong> ) doivent finir par \u00eatre ferm\u00e9s ( }])\u00a0\u00bb<\/strong> ).<\/p>\n\nvoid draw(){\n float x = random(100);float y = random(100);\n float rouge = 0; float vert = 0; float bleu = 0;\n if(x<33)\n {rouge=255;}\n else {\n if(x<66)\n {vert=255;}\n else {\n {bleu=255;}\n }\n }\n fill(rouge, vert, bleu);\n ellipse(x,y,10,10);\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/rvb_hasard.png\")
Dans l’exemple ci-dessus, les variables, toutes de type nombre d\u00e9cimal (float) et nomm\u00e9es x<\/em>, y<\/em>, rouge<\/em>, vert <\/em>et bleu<\/em>, sont d\u00e9clar\u00e9es \u00e0 l’int\u00e9rieur de la fonction draw()<\/strong>, ce qui signifie qu’elles seront oubli\u00e9es sit\u00f4t que la fonction aura \u00e9t\u00e9 ex\u00e9cut\u00e9e et ne seront pas lisibles par d’autres fonctions. Les variables x<\/em> et y<\/em> se voient chacune attribuer une valeur au hasard entre 0 et 100 (random(100)<\/em>), et les autres (rouge<\/em>, vert<\/em>, bleu<\/em>) se voient attribuer la valeur 0 (z\u00e9ro).
\nNous effectuons ensuite une batterie de tests disant que si x<\/em> est inf\u00e9rieur \u00e0 33 alors rouge <\/em>prend la valeur de 255. Sinon, si x<\/em> est inf\u00e9rieur \u00e0 66 alors vert <\/em>prend la valeur de 255. Dans tous les autres cas, bleu <\/em>prend la valeur de 255. Afin de ne pas faire un script trop long, je n’ai pas fait d’op\u00e9rations de ce genre se rapportant \u00e0 la valeur de la variable y<\/em>, mais on pourrait tout \u00e0 fait imaginer une telle chose.
\nPour finir, nous d\u00e9cr\u00e9tons que la couleur de remplissage des formes sera fill(rouge,vert,bleu)<\/em>, c’est \u00e0 dire que le \u00ab\u00a0canal\u00a0\u00bb RGB des rouges sera \u00e9gal \u00e0 la valeur de la variable nomm\u00e9e rouge<\/em>, que le \u00ab\u00a0canal\u00a0\u00bb des verts sera \u00e9gal \u00e0 la valeur de vert <\/em>et que le canal bleu sera \u00e9gal \u00e0 la valeur de la variable bleu<\/em>. Dans la pratique, la couleur sera donc (255,0,0), (0,255,0) ou (0,0,255).
\nPour finir, je dessine une ellipse de 10 pixels de diam\u00e8tre vertical et autant de diam\u00e8tre horizontal \u00e0 la position (x, y) que nous avons obtenue au hasard hasard. Le r\u00e9sultat est l’affichage apparemment anarchique de cercles dont la couleur d\u00e9pend cependant de la position horizontale.
\nCette page est consacr\u00e9e aux variables et il m’a sembl\u00e9 logique d’en utiliser beaucoup, mais j’aurais pu \u00e9crire le script ci-dessus en me passant des variables rouge<\/em>, vert<\/em>, bleu<\/em>, comme ceci :<\/p>\n\nvoid draw(){\n float x = random(100);float y = random(100);\n if(x<33)\n {fill(255,0,0);}\n else {\n if(x<66)\n {fill(0,255,0);}\n else {\n {fill(0,0,255);}\n }\n }\n ellipse(x,y,10,10);\n}<\/pre>\n<\/div>\n\n
Note : ainsi qu’on me le fait remarquer en commentaires \u00e0 cet article, mes indications concernant les guillemets \u00ab\u00a0droits\u00a0\u00bb et apostrophes \u00ab\u00a0droites\u00a0\u00bb ne sont pas tr\u00e8s claires car mon gestionnaire de blog convertit autoritairement ces caract\u00e8res dont il se sert d’une autre mani\u00e8re. Je cherche une solution \u00e0 ce probl\u00e8me d’affichage.<\/em><\/div>\n