{"id":2582,"date":"2008-11-28T00:04:54","date_gmt":"2008-11-27T23:04:54","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2582"},"modified":"2012-04-04T21:21:27","modified_gmt":"2012-04-04T21:21:27","slug":"processing-huitieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2582","title":{"rendered":"Processing, huiti\u00e8me cours"},"content":{"rendered":"

Les programmeurs aguerris qui m’ont lu jusqu’ici se sont sans doute inqui\u00e9t\u00e9s : qu’est-ce que c’est que ce langage sans structure, dont les commandes sont lanc\u00e9es n’importe comment, \u00e0 la fa\u00e7on des langages interpr\u00e9t\u00e9s comme le bon vieux langage Logo<\/a>, cr\u00e9\u00e9 dans les ann\u00e9es 1960 et qui servait aussi \u00e0 dessiner ? Ils peuvent se rassurer : Processing est un langage tout aussi structur\u00e9 que les autres. J’esp\u00e8re que les lignes qui vont suivre ne para\u00eetront pas trop abstraites \u00e0 certains de leurs lecteurs. N\u00e9anmoins le sujet sera rab\u00e2ch\u00e9 par la suite.<\/p>\n

Il existe deux fonctions de base r\u00e9ellement importantes dans processing : setup()<\/strong>, et draw()<\/strong>. La fonction setup()<\/strong> est lanc\u00e9e une seule et unique fois, au d\u00e9marrage de l’animation. La fonction draw()<\/strong> s’ex\u00e9cute de mani\u00e8re redondante selon la fr\u00e9quence qu’on lui a impos\u00e9 (par exemple 25 fois par seconde).
\nUne chose tr\u00e8s importante \u00e0 savoir, c’est qu’un programme processing qui n’a pas de setup() ni de draw() peut rencontrer des probl\u00e8mes. Les fonctions cr\u00e9\u00e9es par le programmeur ou les fonctions relatives \u00e0 l’interactivit\u00e9 (clic, clavier,…) ne marcheront pas, par exemple.<\/p>\n

setup()<\/strong><\/p>\n

C’est dans le setup, lanc\u00e9 une seule fois, que l’on initialise des variables, que l’on r\u00e8gle le format d’\u00e9cran, sa couleur, et plus g\u00e9n\u00e9ralement tout ce qui doit \u00eatre r\u00e9gl\u00e9 au d\u00e9marrage et a fortiori ce que l’on ne veut r\u00e9gler qu’une seule fois.
\nVoici un setup() typique :<\/p>\n

\n
void setup(){\r\n  size(500,500);\r\n  background(0);\r\n  smooth();\r\n  frameRate(24);\r\n}<\/pre>\n<\/div>\n
Vous connaissez d\u00e9j\u00e0 les commandes size (le format de la fen\u00eatre), background (la couleur de fond) et smooth (le lissage des dessins). \u00a0Nous d\u00e9couvrons en revanche la fonction frameRate()<\/strong>, extr\u00eamement utile puisqu’elle sert \u00e0 d\u00e9cider de la rapidit\u00e9 d’ex\u00e9cution d’une animation. Avec frameRate(1), nous cr\u00e9ons une animation qui affichera une image par seconde ou, plus pr\u00e9cis\u00e9ment, qui ex\u00e9cutera la fonction draw() une fois par seconde.<\/p>\n
draw()<\/h4>\n
draw() est donc la fonction redondante de Processing, sa \u00ab\u00a0boucle temporelle\u00a0\u00bb. Toute instruction que l’on \u00e9crit dans draw() sera ex\u00e9cut\u00e9e \u00e0 une fr\u00e9quence pr\u00e9cise jusqu’\u00e0 ce que l’on ferme l’application ou jusqu’\u00e0 ce que le programme tombe sur l’instruction noLoop();<\/strong> qui inhibe l’ex\u00e9cution de draw();
\nAvec le petit programme qui suit, une ligne va \u00eatre trac\u00e9e \u00e0 des coordonn\u00e9es al\u00e9atoires de mani\u00e8re r\u00e9guli\u00e8re.<\/p>\n
\n
void draw(){\r\n  line(random(100),random(100),random(100),random(100));\u00a0\r\n}<\/pre>\n<\/div>\n
\"\"Notez que l’exemple ci-contre a \u00e9t\u00e9 mont\u00e9 sous forme de gif anim\u00e9 \u00e0 l’aide… d’un concurrent de processing. Ce n’est donc pas une authentique animation processing mais plut\u00f4t une simulation.
\nQuoi qu’il en soit, il suffit donc de cr\u00e9er une fonction draw() pour ex\u00e9cuter des actions de mani\u00e8re r\u00e9guli\u00e8re. C’est ce type de disposition qui fait de processing un syst\u00e8me sp\u00e9cialis\u00e9 dans la cr\u00e9ation visuelle. Si l’on compare avec le langage Java (qui sert de support \u00e0 processing) les choses se d\u00e9rouleraient bien diff\u00e9remment. Il faudrait commencer par d\u00e9clarer l’emploi de telles et telles \u00ab\u00a0librairies\u00a0\u00bb, puis inventer un \u00ab\u00a0timer\u00a0\u00bb qui de mani\u00e8re redondante permettrait d’ex\u00e9cuter certaines actions… Bref, on s’y perd vite. Ici, les besoins sp\u00e9cifiques \u00e0 la cr\u00e9ation artistique sont int\u00e9gr\u00e9s et leurs commandes sont simples \u00e0 manipuler.<\/p>\n
Les fonctions<\/strong><\/p>\n
Malgr\u00e9 la simplicit\u00e9 du syst\u00e8me, la structure des fonctions (setup() <\/strong>et draw() <\/strong>sont des fonctions) est sans doute un peu troublante \u00e0 lire pour ceux qui ne connaissent pas ce genre de langage \u2014 ou pour ceux qui ne connaissent rien \u00e0 la programmation. Elle est toujours la m\u00eame :
\ntype nom( arguments ){ instructions }<\/strong>, o\u00f9 type est le genre de donn\u00e9es que la fonction renvoie. Si elle doit renvoyer un chiffre entier, le type sera int<\/strong>. Si elle doit renvoyer une cha\u00eene de caract\u00e8re, le type sera String<\/strong>. Enfin, si la fonction ne renvoie rien, le type \u00e0 indiquer est void<\/strong>. Les gestionnaires draw() et setup() sont des fonctions qui ne renvoient pas de donn\u00e9es, on \u00e9crit donc void<\/strong> devant.
\nLe nom de la fonction doit \u00eatre une cha\u00eene de caract\u00e8res, commen\u00e7ant par une lettre, sans espace. Il faut imp\u00e9rativement que \u00e7a ne soit pas un mot r\u00e9serv\u00e9 de processing.
\nLes arguments sont les \u00e9ventuels param\u00e8tres que la fonction s’attend \u00e0 recevoir. Pour une fonction ne recevant aucun param\u00e8tre, on se contentera de mettre une parenth\u00e8se ouvrante et une parenth\u00e8se fermante, comme draw() ou setup(). Sans les parenth\u00e8ses, le programme ne comprend pas qu’il s’agit de fonction.
\nProcessing est un langage rigoureusement typ\u00e9, c’est \u00e0 dire qu’il refuse de ne pas savoir de quel type (entier, flottant, cha\u00eene, caract\u00e8re, double, booleen,…) est une variable1<\/a><\/sup> . Cette fonction assez simple pourra vous permettre d’y voir un peu plus clair en pratique.<\/p>\n
\n
float distance(float x1, float y1, float x2, float y2) {\r\n  float cote1 = x1-x2;\r\n  float cote2 = y1-y2;\r\n  return sqrt(pow(cote1, 2)+pow(cote2, 2));\r\n}<\/pre>\n<\/div>\n
\"\" Pour l’anecdote, la fonction ci-dessus sert \u00e0 calculer la distance qui s\u00e9pare deux points \u00e0 l’aide du th\u00e9or\u00e8me de Pythagore. Chaque ligne dont on conna\u00eet les coordonn\u00e9es sur un \u00e9cran est en fait l’hypot\u00e9nuse d’un triangle-rectangle. Avec une ligne dons les points sont (x1, y1) et (x2, y2), je sais que la longueur du c\u00f4t\u00e9 horizontal de mon triangle-rectangle est (x2-x1) – ou x2-x1, \u00e7a reviendra au m\u00eame – et que son c\u00f4t\u00e9 vertical a pour longueur (y2-y1). Nous connaissons donc nos deux c\u00f4t\u00e9s. Puisque nous savons que le carr\u00e9 de l’hypot\u00e9nuse est \u00e9gal \u00e0 la somme des carr\u00e9s des deux autres c\u00f4t\u00e9s, nous savons aussi que la racine carr\u00e9e de la somme des carr\u00e9s des deux autres c\u00f4t\u00e9s est \u00e9gale \u00e0 la longueur de l’hypot\u00e9nuse. Ainsi si j’invoque ma fonction de cette mani\u00e8re : distance(0, 0, 100, 100), je recevrais 141.421… comme r\u00e9sultat, car c’est la longueur de l’hypot\u00e9nuse d’un carr\u00e9 de 100×100. Toujours pour l’anecdote, sqrt(x)<\/strong> renvoie la racine carr\u00e9e de x et pow(z, 2)<\/strong> \u00e9l\u00e8ve z au carr\u00e9.
\nDans ma fonction, float <\/strong>est donc le type de variable que la fonction doit retourner. On peut dire que la r\u00e9ponse de notre fonction sera un nombre d\u00e9cimal (ou \u00ab\u00a0\u00e0 virgule flottante\u00a0\u00bb, d’o\u00f9 le \u00ab\u00a0float\u00a0\u00bb).
\nLe nom de la fonction est distance<\/strong>. Ce n’est pas un nom interne \u00e0 Processing, c’est moi qui l’invente. J’aurais pu aussi bien nommer cette fonction obtiensDistance <\/strong>ou pythagore<\/strong>.
\nLes arguments qui sont envoy\u00e9s entre parenth\u00e8ses \u00e0 ma fonction sont ici au nombre de quatre (l’abscisse du premier point, l’ordonn\u00e9e du premier point, l’abscisse du second point et l’ordonn\u00e9e du second point). Pour chaque argument, Processing doit savoir de quel type de variable il s’agit. Ici, tous les nombres qui sont envoy\u00e9s sont des d\u00e9cimales, donc ils sont pass\u00e9s, s\u00e9par\u00e9s les uns des autres par des virgules et pr\u00e9c\u00e9d\u00e9s chacun de leur type de donn\u00e9e. Si j’invoque ma fonction comme ceci : distance(1, 2, 3, 4)<\/strong>, la fonction placera le chiffre 1 dans sa variable flottante x1, le chiffre 2 dans sa variable flottante y1, le chiffre 3 dans x2 et le chiffre 3 dans y2.
\nLes deux lignes suivantes pratiquent divers calculs arithm\u00e9tiques qui sont renvoy\u00e9s par le mot return<\/strong>.<\/p>\n
Je suppose que beaucoup auront souffert avec cette page aust\u00e8re et au contenu pour le moins abstrait.
\nLa suite devrait \u00eatre plus amusante.<\/p>\n
  1.  les langages strictement typ\u00e9s sont les plus performants car ils sont plus proches de la mani\u00e8re d’ex\u00e9cuter les programmes du syst\u00e8me. C, C++ ou Java sont strictement typ\u00e9s tandis que Lingo, PHP et Javascript sont plus d\u00e9sinvoltes et donc moins performants.  [↩<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"
    Les programmeurs aguerris qui m’ont lu jusqu’ici se sont sans doute inqui\u00e9t\u00e9s : qu’est-ce que c’est que ce langage sans structure, dont les commandes sont lanc\u00e9es n’importe comment, \u00e0 la fa\u00e7on des langages interpr\u00e9t\u00e9s comme le bon vieux langage Logo, cr\u00e9\u00e9 dans les ann\u00e9es 1960 et qui servait aussi \u00e0 dessiner ? Ils peuvent se […]<\/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-2582","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2582","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=2582"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2582\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}