{"id":2533,"date":"2008-11-27T15:12:29","date_gmt":"2008-11-27T14:12:29","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2533"},"modified":"2012-04-10T17:01:22","modified_gmt":"2012-04-10T17:01:22","slug":"processing-sixieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2533","title":{"rendered":"Processing, sixi\u00e8me cours"},"content":{"rendered":"<p><img decoding=\"async\" class=\"imageadroite\" src=\"\/dernier\/files\/2008\/11\/hasard_carres.png\" alt=\"\" width=\"180\" height=\"180\" align=\"right\" \/><strong>Le hasard informatique<\/strong><\/p>\n<p>Le hasard informatique est une notion curieuse car par essence, l&rsquo;ordinateur ne fait jamais rien au hasard.<br \/>\n\u00c0 une question donn\u00e9e, il apportera toujours la m\u00eame r\u00e9ponse.<br \/>\nPar exemple si je demande \u00e0 un ordinateur de me dire si 10 est \u00e9gal \u00e0 10, il me r\u00e9pondra toujours oui, et si je lui demande d&rsquo;aditionner 2 et 2, il me r\u00e9pondra invariablement 4. C&rsquo;est ce que l&rsquo;on entend par la phrase <em>\u00ab<\/em><span style=\"color: #ffffff;\"><em>.<\/em><\/span><em>L&rsquo;ordinateur ne peut pas se tromper<\/em><span style=\"color: #ffffff;\"><em>.<\/em><\/span><em>\u00bb<\/em>, phrase qui a produit des contre-sens car elle a souvent \u00e9t\u00e9 comprise comme <em>\u00ab<\/em><span style=\"color: #ffffff;\"><em>.<\/em><\/span><em>L&rsquo;ordinateur sait tout<\/em><span style=\"color: #ffffff;\"><em>.<\/em><\/span><em>\u00bb<\/em>, mais c&rsquo;est une autre histoire<sup><a href=\"#footnote_1_2533\" id=\"identifier_1_2533\" class=\"footnote-link footnote-identifier-link\" title=\"Sur la question du hasard comme notion math&eacute;matique, et sur la question du hasard dans la nature (est-ce qu&rsquo;il existe, d&eacute;j&agrave; ?), je recommande le tr&egrave;s plaisant ouvrage d&rsquo;Ivar Ekeland, Au hasard, publi&eacute; en poche aux &eacute;ditions du Seuil. Ivar Ekeland est un math&eacute;maticien de haut-vol sp&eacute;cialiste du chaos, qui n&rsquo;a jamais peur de captiver son public ni de faire des aller-retours entre physique, histoire et litt&eacute;rature.\">1<\/a><\/sup> .<\/p>\n<p>Pour que l&rsquo;ordinateur change de r\u00e9ponse \u00e0 une question, il lui faut une condition ext\u00e9rieure, \u00e0 savoir l&rsquo;interactivit\u00e9, au sens large, c&rsquo;est \u00e0 dire l&rsquo;\u00e9change de donn\u00e9es avec une condition ext\u00e9rieure telle qu&rsquo;un autre ordinateur ou les informations envoy\u00e9es par un syst\u00e8me de saisie quelconque. Ainsi votre ordinateur n&rsquo;affiche pas toujours le curseur \u00e0 la m\u00eame position sur l&rsquo;\u00e9cran car il est sensible aux mouvements que vous donnez \u00e0 un p\u00e9riph\u00e9rique de saisie tel que la souris ou le pad.<br \/>\nPour obtenir un chiffre au hasard \u00e0 l&rsquo;aide d&rsquo;un ordinateur, on utilise g\u00e9n\u00e9ralement une m\u00e9thode simple et satisfaisante dans de nombreux cas, qui est de v\u00e9rifier l&rsquo;\u00e9tat de l&rsquo;horloge du syst\u00e8me au moment de l&rsquo;ex\u00e9cution du programme et de traiter le chiffre obtenu avec un algorithme gaussien ou autre. Tous les ordinateurs disposent d&rsquo;une horloge interne qui leur permet non seulement \u00e0 la machine de savoir l&rsquo;heure et la date, mais surtout de synchroniser \u00e9lectroniquement ses diff\u00e9rents composants. C&rsquo;est le seul composant de l&rsquo;ordinateur qui n&rsquo;est jamais \u00e9teint, il est aliment\u00e9 par une pile bouton.<br \/>\nAvec notre hasard bas\u00e9 sur l&rsquo;heure, on parle de chiffres pseudo-al\u00e9atoires car en th\u00e9orie, deux ordinateurs parfaitement identiques, r\u00e9gl\u00e9s sur la m\u00eame heure \u00e0 la micro-seconde pr\u00e8s et sollicit\u00e9s au m\u00eame instant devraient fournir le m\u00eame chiffre.<\/p>\n<p>Pour obtenir un chiffre pseudo-al\u00e9atoire simple avec processing, on utilise la fonction random();, qui s&rsquo;utilise avec un ou deux arguments.<br \/>\n&#8211; <strong>random(10)<\/strong> renverra un chiffre d\u00e9cimal (\u00e0 virgule) compris entre 0 et 10. Par exemple\u00a06.2434893<br \/>\n&#8211; <strong>random(10, 20)<\/strong> renverra un chiffre d\u00e9cimal compris entre 10 et 20. Par exemple\u00a019.80756<br \/>\nLa syntaxe est donc <strong>random(maximum)<\/strong> ou <strong>random(minimum, maximum)<\/strong>. La valeur minimum peut \u00eatre un chiffre n\u00e9gatif (random(-10,10) renverra un chiffre compris entre -10 et 10), en revanche elle ne peut \u00eatre un chiffre sup\u00e9rieur \u00e0 la valeur maximum : random(10,-10) renverra toujours 10.<br \/>\nEn pratique, on peut utiliser le hasard chaque fois que l&rsquo;on manipule des coordonn\u00e9es ou des valeurs telles que celles des couleurs. Dans l&rsquo;exemple qui suit, nous agissons sur les coordonn\u00e9es de lignes :<br \/>\n<img decoding=\"async\" class=\"alignnone size-medium wp-image-2541\" src=\"\/dernier\/files\/2008\/11\/random_1.png\" alt=\"\" width=\"530\" height=\"100\" srcset=\"https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/random_1.png 530w, https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/random_1-300x56.png 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><br \/>\nLe programme utilis\u00e9 ici commence par effectuer les r\u00e9glages d&rsquo;environnement d&rsquo;ex\u00e9cution : fen\u00eatre de 530&#215;100 pixels, adoucissement des lignes, traits blancs, fond noir, traits de 2 pixels d&rsquo;\u00e9paisseur. Ensuite, huit lignes sont trac\u00e9es \u00e0 l&rsquo;aide de la commande <strong>line(x1, y1, x2, y2)<\/strong>, que nous avons d\u00e9j\u00e0 \u00e9tudi\u00e9e en d\u00e9tails.<\/p>\n<div class=\"code\">\n<pre>size(530,100);smooth();stroke(255);background(0);strokeWeight(2);\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));\r\nline(0,random(100),530, random(100));<\/pre>\n<\/div>\n<p>On remarque que les param\u00e8tres de line sont ceux-ci :<br \/>\n&#8211; l&rsquo;abscisse du premier point est le chiffre 0 (z\u00e9ro).<br \/>\n&#8211; l&rsquo;abscisse du second point est le chiffre 530.<br \/>\nDonc nos lignes commencent invariablement \u00e0 gauche de l&rsquo;\u00e9cran et se terminent invariablement \u00e0 droite de l&rsquo;\u00e9cran. En revanche,<br \/>\n&#8211; l&rsquo;ordonn\u00e9e du premier point est \u00ab\u00a0random(100)\u00a0\u00bb, c&rsquo;est \u00e0 dire un chiffre quelconque entre 0 et 100, par exemple 12.01681 (les chiffres d\u00e9cimaux sont not\u00e9s \u00e0 l&rsquo;aide d&rsquo;un point (<strong>.<\/strong>) et non \u00e0 l&rsquo;aide d&rsquo;une virgule (<strong>,<\/strong>))<br \/>\n&#8211; l&rsquo;ordonn\u00e9e du second point est aussi \u00ab\u00a0random(100)\u00a0\u00bb, c&rsquo;est \u00e0 dire un autre chiffre quelconque entre 0 et 100.<\/p>\n<p>\u00e0 pr\u00e9sent, si je remplace l&rsquo;ordonn\u00e9e du premier point par un hasard d\u00e9limit\u00e9 comme random(5,50) et que je remplace l&rsquo;ordonn\u00e9e du second point par random(50,95), j&rsquo;obtiendrais un r\u00e9sultat tel que celui-ci :<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-2544\" src=\"\/dernier\/files\/2008\/11\/random_2.png\" alt=\"\" width=\"530\" height=\"100\" srcset=\"https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/random_2.png 530w, https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/random_2-300x56.png 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/p>\n<p>M\u00eame si le r\u00e9sultat sera diff\u00e9rent \u00e0 chaque ex\u00e9cution du programme, nous obtenons une apparence d&rsquo;ordre un peu plus grande que dans le cas pr\u00e9c\u00e9dent, car le premier point sera toujours plus haut ou \u00e9gal (dans le cas rare ou nous obtiendrions le chiffre 50) au second.<br \/>\nIci la commande r\u00e9p\u00e9t\u00e9e huit fois, \u00e9tait donc<\/p>\n<div class=\"code\">\n<pre>line(0,random(50),530, random(100));<\/pre>\n<\/div>\n<p>On peut adapter le hasard \u00e0 de nombreux cas.<br \/>\n&#8211; <strong>background(random(255)<\/strong><strong>);<\/strong> peindra la fen\u00eatre d&rsquo;affichage dans une valeur de gris comprise entre le noir (0) et le blanc (255).<br \/>\n&#8211;\u00a0<strong>background(random(255),\u00a0random(255),\u00a0random(255));<\/strong> peindra la fen\u00eatre d&rsquo;affichage dans une couleur quelconque parmi les\u00a016 777 216\u00a0de couleurs (256 niveaux de rouge x 256 niveaux de vert x 256 niveaux de bleu) que sait afficher la carte graphique d&rsquo;un ordinateur typique.<br \/>\n&#8211; <strong>stroke (255 , 255, random(255));<\/strong> fera que les traits auront une couleur comprise entre le jaune (255,255,0) et le blanc (255,255,255).<br \/>\n&#8211; <strong>fill (random(200,255), random(100,150), 0);<\/strong> d\u00e9cidera que les remplissages de formes auront une teinte plus ou moins orang\u00e9e (beaucoup de rouge, un peu de vert, pas de bleu du tout).<br \/>\n&#8211; <strong>ellipse (100,100, random(10), random(10));<\/strong> dessinera une ellipse dont le centre sera le point (100,100) et dont le diam\u00e8tre vertical comme le diam\u00e8tre horizontal seront des chiffres compris entre 0 et 10.<br \/>\n&#8211; les points, rectangles, triangles, etc., peuvent \u00eatre affich\u00e9s avec des coordonn\u00e9es au hasard.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-2549\" src=\"\/dernier\/files\/2008\/11\/hasard_ellipses.png\" alt=\"\" width=\"530\" height=\"100\" srcset=\"https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/hasard_ellipses.png 530w, https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/hasard_ellipses-300x56.png 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/p>\n<p>L&rsquo;image qui est affich\u00e9e ci-dessus utilise deux notions que nous n&rsquo;avons pas encore abord\u00e9 :<br \/>\n&#8211; les boucles (ou it\u00e9rations) qui permettent d&rsquo;ex\u00e9cuter une action de mani\u00e8re r\u00e9p\u00e9titive et progressive. Dans le cas pr\u00e9sent, il s&rsquo;agit de dessiner une ellipse tous les dix pixels.<br \/>\n&#8211; les variables, qui permettent de stocker une valeur. Je les emploie ici pour donner \u00e0 l&rsquo;ellipse un diam\u00e8tre \u00e9gal dans sa largeur et dans sa hauteur, afin que ces ellipses soient des cercles.<\/p>\n<p>Gr\u00e2ce aux boucles et aux variables, je peux, avec quelques lignes de code seulement, dessiner 53 x 10 cercles (soit 530 cercles, vous pouvez les compter) d&rsquo;un diam\u00e8tre de 1 \u00e0 10 pixels, remplis avec une couleur choisie au hasard dans une gamme orang\u00e9e :<\/p>\n<div class=\"code\">\n<pre>size(530, 100);background(255); noStroke(); smooth();\r\nfor(int a=0; a&lt;53;a++){\r\n   for(int b=0; b&lt;10;b++){\r\n     fill(random(200,255), random(50,150),0);\r\n     float diametre = random(1,10);\r\n     ellipse(a*10+5, b*10+5, diametre, diametre);\r\n  }\r\n }<\/pre>\n<\/div>\n<p>Les boucles feront l&rsquo;objet du prochain article.<\/p>\n<p>Sur le hasard, il faut encore savoir qu&rsquo;il existe une alternative \u00e0 la commande <strong>random()<\/strong>, qui est la commande <strong>noise();<\/strong>. Cette commande utilise le \u00ab\u00a0bruit de Perlin\u00a0\u00bb (d&rsquo;apr\u00e8s le nom de son inventeur, Ken Perlin), qui permet d&rsquo;obtenir un hasard un peu mieux distribu\u00e9 que celui que produit la commande <strong>random();<\/strong>. Cette mani\u00e8re de g\u00e9n\u00e9rer du hasard informatique est tr\u00e8s utilis\u00e9e pour les calculs de textures par exemple.<br \/>\nL&rsquo;utilisation de noise est assez diff\u00e9rente de celle de random, car noise renvoie un chiffre compris entre 0 et 1<sup><a href=\"#footnote_2_2533\" id=\"identifier_2_2533\" class=\"footnote-link footnote-identifier-link\" title=\"Dans de nombreux langages, la commande random renvoie un chiffre compris entre 0 et 1. Par exemple avec le langage Javascript on &eacute;crira Math.random()*100 pour obtenir un chiffre entre 0 et 100. Et Math.random()*50+50 pour obtenir un chiffre compris entre 50 et 100. &nbsp;\">2<\/a><\/sup> . De plus noise est invoqu\u00e9 avec un, deux ou trois param\u00e8tres et chaque fois que l&rsquo;on demande la valeur de noise pour un param\u00e8tre pr\u00e9cis, la commande renverra le m\u00eame r\u00e9sultat. C&rsquo;est \u00e0 dire que si je demande \u00e0 voir la valeur de noise(1) \u00e0 un moment donn\u00e9 et que je la redemande un peu plus tard (mais sans red\u00e9marrer le programme), j&rsquo;obtiendrais chaque fois le m\u00eame r\u00e9sultat. L&rsquo;essai qui suit utilise les deux formes de hasard, avec les m\u00eames contraintes de minimum\/maximum, pour les couleurs de remplissage et pour les tailles de rectangles.<br \/>\n\u00c0 gauche, noise(), et \u00e0 droite, random().<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-2553\" src=\"\/dernier\/files\/2008\/11\/hasard_perlin_random.png\" alt=\"\" width=\"530\" height=\"130\" srcset=\"https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/hasard_perlin_random.png 530w, https:\/\/hyperbate.fr\/dernier\/files\/2008\/11\/hasard_perlin_random-300x73.png 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/p>\n<p><strong>noise();<\/strong> n&rsquo;est pas tr\u00e8s compliqu\u00e9 \u00e0 utiliser mais <strong>random();<\/strong> est suffisant dans la plupart des cas, nous pouvons nous y tenir.<\/p>\n<ol class=\"footnotes\"><li id=\"footnote_1_2533\" class=\"footnote\"> Sur la question du hasard comme notion math\u00e9matique, et sur la question du hasard dans la nature (est-ce qu&rsquo;il existe, d\u00e9j\u00e0 ?), je recommande le tr\u00e8s plaisant ouvrage d&rsquo;Ivar Ekeland, <em><a href=\"http:\/\/www.amazon.fr\/gp\/product\/2020400642?ie=UTF8&amp;tag=lederniblog-21&amp;linkCode=as2&amp;camp=1642&amp;creative=6746&amp;creativeASIN=2020400642\">Au hasard<\/a><img decoding=\"async\" style=\"border: none !important;margin: 0px !important\" src=\"http:\/\/www.assoc-amazon.fr\/e\/ir?t=lederniblog-21&amp;l=as2&amp;o=8&amp;a=2020400642\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/><\/em>, publi\u00e9 en poche aux \u00e9ditions du Seuil. Ivar Ekeland est un math\u00e9maticien de haut-vol sp\u00e9cialiste du chaos, qui n&rsquo;a jamais peur de captiver son public ni de faire des aller-retours entre physique, histoire et litt\u00e9rature. <span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_1_2533\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><li id=\"footnote_2_2533\" class=\"footnote\"> Dans de nombreux langages, la commande random renvoie un chiffre compris entre 0 et 1. Par exemple avec le langage Javascript on \u00e9crira Math.random()*100 pour obtenir un chiffre entre 0 et 100. Et Math.random()*50+50 pour obtenir un chiffre compris entre 50 et 100. \u00a0<span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_2_2533\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Le hasard informatique Le hasard informatique est une notion curieuse car par essence, l&rsquo;ordinateur ne fait jamais rien au hasard. \u00c0 une question donn\u00e9e, il apportera toujours la m\u00eame r\u00e9ponse. Par exemple si je demande \u00e0 un ordinateur de me dire si 10 est \u00e9gal \u00e0 10, il me r\u00e9pondra toujours oui, et si je [&hellip;]<\/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-2533","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2533","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=2533"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2533\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}