{"id":2557,"date":"2008-11-27T18:01:40","date_gmt":"2008-11-27T17:01:40","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2557"},"modified":"2008-11-27T18:01:40","modified_gmt":"2008-11-27T17:01:40","slug":"processing-septieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2557","title":{"rendered":"Processing, septi\u00e8me cours"},"content":{"rendered":"

\"\"Le fonctionnement (et l’int\u00e9r\u00eat) des ordinateurs repose sur assez peu de fonctions, finalement : effectuer des calculs num\u00e9riques, acc\u00e9der \u00e0 des valeurs (\u00e9crire, lire, modifier), tester des conditions et enfin r\u00e9p\u00eater des actions. Tout le reste, ce qu’on nomme l’algorithmie (la combinaison de ces fonctions), en d\u00e9coule.
\nNous allons donc \u00e0 pr\u00e9sent nous pencher sur les boucles (loop en anglais), ou it\u00e9rations, qui permettent donc de r\u00e9p\u00e9ter une action.
\nProcessing en conna\u00eet manipule deux types, les boucles conditionnelles et les boucles it\u00e9ratives.<\/p>\n

Les boucles conditionnelles<\/strong><\/p>\n

La syntaxe d’une boucle conditionnelle, qui sera famili\u00e8re \u00e0 tous les programmeurs (C, C++, Java, Actionscript,…), est la suivante : while (condition) { instructions }<\/strong>, o\u00f9 \u00ab\u00a0condition\u00a0\u00bb est la propri\u00e9t\u00e9 \u00e0 tester et \u00ab\u00a0instructions\u00a0\u00bb est l’ensemble de commandes. C’est, typiquement, avec ce genre de commande mal invoqu\u00e9e que l’on bloque un programme. Par exemple si j’\u00e9cris while(1==1){ print(\u00ab\u00a0ok\u00a0\u00bb); }<\/strong>, l’ex\u00e9cution du programme n’aura aucune raison de quitter la boucle puisque la condition test\u00e9e (est-ce que 1 est \u00e9gal \u00e0 1 ?) ne deviendra jamais fausse. Avec Processing, ce genre de boucle infernale n’est pas fatale et impose, au pire, de quitter le programme, mais la plupart du temps, lorsque l’ordinateur \u00ab\u00a0plante\u00a0\u00bb, c’est qu’un de ses programmes importants est tomb\u00e9 sur une boucle infinie de ce type.
\nVoici une boucle au r\u00e9sultat al\u00e9atoire mais, a priori, contr\u00f4l\u00e9 :<\/p>\n

\n
while(random(100)<95){\n   point(random(100),random(100));\n}<\/pre>\n<\/div>\n
Ce qui, en clair, signifie que nous alons tirer un nombre au hasard entre 0 et 100. Si ce nombre est inf\u00e9rieur \u00e0 95, le programme dessinera un point n’importe o\u00f9 dans la fen\u00eatre d’affichage, puis refera un tirage au hasard entre 0 et 100. Il est tout \u00e0 fait possible que le premier nombre tir\u00e9 soit, par exemple, 96. Dans un tel cas, la condition qui nous permet de quitter la boucle sera remplie d\u00e8s le d\u00e9part et l’instruction (dessiner un point n’importe o\u00f9) ne sera pas ex\u00e9cut\u00e9e. Il est aussi possible que l’ordinateur, taquin, ne veuille jamais produire le moindre nombre au hasard qui exc\u00e8de 94.9999… ce qui aurait pour r\u00e9sultat de nous laisser coinc\u00e9s dans notre boucle. Heureusement, les probabilit\u00e9s, m\u00eame avec le hasard tr\u00e8s imparfait de l’ordinateur, font que nous avons une chance sur 20 de d\u00e9passer le nombre 95 et donc, de quitter la boucle. Voici le r\u00e9sultat de cinq lancements diff\u00e9rents du programme :<\/p>\n
\"\"<\/p>\n
Les boucles it\u00e9ratives<\/strong><\/p>\n
La syntaxe des boucles int\u00e9ratives est un peu barbare de prime abord et nous force \u00e0 nous pencher sur les variables. Voici un exemple typique de boucle it\u00e9rative :<\/p>\n
\n
for(int a=0; a<100; a+=4){\n   line (a,0,a,100);\n}<\/pre>\n<\/div>\n
\"\"Le r\u00e9sultat est l’image que vous voyez \u00e0 droite : une ligne a \u00e9t\u00e9 trac\u00e9e tous les quatre pixels.
\nOn peut traduire notre boucle ainsi :
\n1) D\u00e9part : Cr\u00e9er une variable nomm\u00e9e a<\/strong> et dont la valeur de d\u00e9part est 0 (z\u00e9ro). Je lui ai donn\u00e9 le nom a<\/strong> car tel est mon bon plaisir, mais elle aurait aussi bien pu se nommer\u00a0ornithorynque<\/strong>.
\n2) Boucle : Si la valeur de a<\/strong> est inf\u00e9rieure \u00e0 100, alors
\n-a) dessiner une ligne entre les points (a,0) et (a,100)
\n-b) incr\u00e9menter a<\/strong> de 4 (a+=4 signifie que a doit devenir \u00e9gal \u00e0 a+4)
\n3) Revenir au d\u00e9but de la boucle si sa condition (a<100) est remplie. Sinon, le programme est termin\u00e9.<\/p>\n
Dans notre cas, a prend les valeurs successives de\u00a00, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92 et 96.<\/p>\n
La syntaxe pr\u00e9cise est donc :
\nfor ( d\u00e9part ; condition pour rester dans la boucle ; it\u00e9ration ) { instructions }<\/strong>
\nCe n’est pas tr\u00e8s beau \u00e0 lire, d’autant que c’est le seul cas o\u00f9 on utilise des points-virgule pour autre chose que pour terminer une commande, mais on s’y fait car la syntaxe est la m\u00eame dans un grand nombre de langages de programmation.<\/p>\n
On peut par ailleurs imbriquer des boucles dans les boucles, ce qui est particuli\u00e8rement int\u00e9ressant pour dessiner des images, qui sont en deux dimensions. Si je veux parcourir tous les pixels de mon image un a un et, par exemple, y dessiner un point d’une couleur tir\u00e9e au hasard, je peux le faire avec des boucles imbriqu\u00e9es. Cette fois, au lieu d’utiliser des variables nomm\u00e9es a<\/strong>, b<\/strong>, c<\/strong> ou\u00a0ornithorynque<\/strong>, je vais utiliser des variables nomm\u00e9es d’une mani\u00e8re qui refl\u00e8te leur usage, \u00e0 savoir colonne <\/strong>et rangee <\/strong>(sans accent).<\/p>\n
\n
for(int colonne=0; colonne <100; colonne++){\n \u00a0for(int rangee=0; rangee <100;\u00a0rangee++){\n     stroke(random(255));\n     point(colonne, rangee);\u00a0\n  }\n}<\/pre>\n<\/div>\n
\"\"La premi\u00e8re boucle s’applique \u00e0 une variable nomm\u00e9e colonne qui va avoir toutes les valeurs possibles entre 0 et 100. Pour chacun de ces \u00e9tats, une seconde boucle s’appliquera \u00e0 une variable nomm\u00e9e rangee qui aura elle aussi toutes les valeurs possibles entre 0 et 100.
\nCeci fait que la commande stroke <\/strong>(changer la couleur du trait) et la commande point <\/strong>(dessiner un point) seront ex\u00e9cut\u00e9es 100 x 100 fois, c’est \u00e0 dire 10 000 fois. Dans l’exemple ci-contre, la couleur appliqu\u00e9e aux pixels de l’image est un niveau de gris.
\nL’\u00e9trange ++<\/strong> signifie que l’on augmente la variable de 1. Ainsi, \u00ab\u00a0a++\u00a0\u00bb est\u00a0synonyme\u00a0de \u00ab\u00a0a=a+1\u00a0\u00bb, et r\u00e9ciproquement on peut \u00e9crire \u00ab\u00a0a–\u00a0\u00bb mais aussi \u00ab\u00a0a-=1\u00a0\u00bb au lieu de \u00ab\u00a0a=a-1\u00a0\u00bb. La notation des op\u00e9rations arithm\u00e9tiques sur des variables peut \u00eatre un peu d\u00e9routante de prime abord. On s’y fait rapidement :<\/p>\n
    \n
  • a++ : augmenter a de 1<\/li>\n
  • a+=1 : augmenter a de 1<\/li>\n
  • a=a+1 : augmenter a de 1<\/li>\n
  • a-– : d\u00e9cr\u00e9menter a de 1<\/li>\n
  • a-=1 : d\u00e9cr\u00e9menter a de 1<\/li>\n
  • a=a-1 : d\u00e9cr\u00e9menter a de 1<\/li>\n
  • a*=2 (ou a=a*2) : multiplier a par 2<\/li>\n
  • a\/=5 (ou a=a\/5) : diviser a par 5<\/li>\n<\/ul>\n
    Les boucles ne sont pas ce que les d\u00e9butants en programmation comprennent le mieux, ni ce que j’explique le mieux. Il s’agit n\u00e9anmoins d’un outil extr\u00e8mement pratique.
    \nSupposez que vous vouliez r\u00e9aliser un motif de 530×120 pixels o\u00f9 un petit cercle blanc est dessin\u00e9 tous les 10 pixels, comme ceci :<\/p>\n
    \"\"<\/p>\n
    … Avec un logiciel de dessin comme Gimp ou Photoshop, c’est tout \u00e0 fait possible, par un jeu de copier-coller laborieux. Une erreur est vite faite et c’est tout de m\u00eame assez long. Pour Processing, ce programme suffit :<\/p>\n
    \n
    size(530, 120);smooth();noStroke();fill(255);\nbackground(0);\n for(int x=0;x<53;x++){\n  for(int y=0;y<12;y++){\n    ellipse(5+x*10,5+y*10, 4, 4);\n  }\n}<\/pre>\n<\/div>\n
    Mais \u00e0 pr\u00e9sent, imaginez que vous vouliez obtenir ce m\u00eame motif en appliquant \u00e0 chacun de vos petits cercles de 4 pixels un d\u00e9calage al\u00e9atoire de plus ou moins un pixel, comme ceci :<\/p>\n
    \"\"<\/p>\n
    L’impression d’irr\u00e9gularit\u00e9 ordonn\u00e9e serait difficile \u00e0 obtenir manuellement, une fois encore.
    \nCette fois, le programme sera :<\/p>\n
    \n
    size(530, 120);smooth();noStroke();fill(255);\nbackground(0);\n for(int x=0;x<53;x++){\n  for(int y=0;y<12;y++){\n    ellipse(5+x*10+random(-1,1),5+y*10+random(-1,1), 4, 4);\n  }\n}<\/pre>\n<\/div>\n
    L’utilit\u00e9 permanente des boucles fait que nous les reverrons souvent dans les articles ult\u00e9rieurs. Nous verrons aussi une autre forme de boucle, la boucle temporelle, qui nous permet d’ex\u00e9cuter une action n fois par seconde.<\/p>\n
    Notez que pour s’extraire d’une boucle avant qu’elle ait fini de s’ex\u00e9cuter, on \u00e9crit ceci : break;<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    Le fonctionnement (et l’int\u00e9r\u00eat) des ordinateurs repose sur assez peu de fonctions, finalement : effectuer des calculs num\u00e9riques, acc\u00e9der \u00e0 des valeurs (\u00e9crire, lire, modifier), tester des conditions et enfin r\u00e9p\u00eater des actions. Tout le reste, ce qu’on nomme l’algorithmie (la combinaison de ces fonctions), en d\u00e9coule. Nous allons donc \u00e0 pr\u00e9sent nous pencher sur […]<\/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-2557","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2557","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=2557"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2557\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}