{"id":2614,"date":"2016-01-01T00:45:11","date_gmt":"2015-12-31T23:45:11","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2614"},"modified":"2016-02-26T11:41:55","modified_gmt":"2016-02-26T10:41:55","slug":"p5-js-16-affiche-generative","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2614","title":{"rendered":"\/ p5.js \/ 16 \/ arrays"},"content":{"rendered":"

<\/p>\n

Les arrays <\/em><\/h4>\n

Une array<\/em> est une liste de variables qui portent le m\u00eame nom. Les arrays<\/em> sont pratiques car elles permettent d’utiliser beaucoup de variables sans \u00eatre oblig\u00e9 de les nommer chacune. Par exemple lorsque nous avons plusieurs dizaines d’images dans une base de donn\u00e9es.<\/p>\n

var numbers = [46,450,800];\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(900,600);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 background(0);\r\n\u00a0 stroke(255);\r\n\u00a0 numbers[0];\r\n\u00a0 line(numbers[0],0, numbers[0], height);\r\n\u00a0 line(numbers[1],0, numbers[1], height);\r\n\u00a0 line(numbers[2],0, numbers[2], height);\r\n}<\/pre>\n
Dans cet exemple nous stockons 3 variables dans notre array : <\/em>46, 450, 800
\n46 est la premi\u00e8re valeur de variables [0], 450 la deuxi\u00e8me [1] et 800 la troisi\u00e8me [2].<\/p>\n
var mouseXPositions = [];\r\nvar current = 0;\r\nvar total = 100;\r\n\r\nfunction setup() {\r\ncreateCanvas(900,600); \u00a0\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 background(0);\r\n\u00a0 stroke(255);\r\n\u00a0 for (var i=0; i<mouseXPositions.length; i++ ){\r\n\u00a0 line(mouseXPositions[i],0, mouseXPositions[i], height);\r\n\u00a0 }\r\n\u00a0 \r\n\u00a0 mouseXPositions[current] = mouseX;\r\n\u00a0 current++;\r\n\u00a0 if(current > total){\r\n\u00a0\u00a0\u00a0 current = 0;\r\n\u00a0 }\r\n}<\/pre>\n
Ici nous demandons \u00e0 l’array<\/em> de stocker la position en x de la souris.<\/p>\n
var mouseXPositions = [];<\/pre>\n
Dans la boucle for <\/em>la valeur i devient la valeur de la variable.<\/p>\n
Ma petite fabrique \u00e0 histoires<\/h4>\n
var ph1 = [\"Sur une \u00eele d\u00e9serte pas pire\",\"Dans un vaisseau spatial caboss\u00e9\",\r\n\"Dans le parc d'attraction bond\u00e9\",\"Dans une for\u00eat profonde\",\"Au p\u00f4le Nord\",\r\n\"Sur la lune\", \"Dans le m\u00e9tro\", \"Dans l'avion\", \"Dans la jungle\",\"Sur une \u00eele d\u00e9serte\", \r\n\"En for\u00eat\", \"\u00c0 l'\u00e9cole\", \"Au zoo\", \"Sur le toit\", \"Dans la cuisine\", \"Au fond de la mer\", \r\n\"\u00c0 Paris\", \"Sous la terre\", \"En ville\", \"La nuit\", \r\n\"Sur la banquise\", \"En hiver\", \"Le matin\", \"\u00c0 la t\u00e9l\u00e9\", \"Pour mon anniversaire\", \r\n\"Au jardin\", \"Dans la boue\", \"Au supermarch\u00e9\", \"Sur l'autoroute\", \"Tous les jeudis\"];\r\n\r\nvar ph2 = [\"le d\u00e9tective coquet\",\"le culturiste dijonct\u00e9\",\"le cow-boy recycl\u00e9\",\r\n\"l'astrophysicien relatif\",\"le magicien nul\",\"le plombier rutilant\",\"le martien sexy\",\r\n\"l'orage qui gronde\", \"madame Germaine\", \"Raymond l'ourang-outan\", \"le p\u00e8re No\u00ebl\", \r\n\"ma maman si gentille\", \"le requin \u00e9mouvant\", \"Jean le hardi\", \"le monstre gentil\", \r\n\"le ver luisant\", \"le pingouin \u00e9bouriff\u00e9\", \"la neige extra moelleuse\", \"le bon gros chat\", \r\n\"un basque avec un chapeau\", \"mamie Zinzin\", \"papi Lucien\", \"le cochon cochon\", \r\n\"la vendeuse\", \"le chien caract\u00e9riel\", \"un papillon incr\u00e9dule\", \"l'avocat vitamin\u00e9\",\r\n\"un boucher v\u00e9g\u00e9tarien\",\"le roi des aulnes\", \"un joueur de golf boute-en-train\"];\r\n\r\nvar ph3 = [\"mange\",\"surveille\",\"observe\",\"\u00e9tudie\",\"aide\",\"prom\u00e8ne\", \"arrose\", \r\n\"dessine\", \"imite\", \"m'offre\", \"fait cuire\", \"d\u00e9vore\", \"visite\", \"b\u00e9cote\", \"transporte\", \r\n\"\u00e9claire\", \"d\u00e9couvre\", \"fait dispara\u00eetre\",\"chatouille\", \"coiffe\", \"d\u00e9coupe\", \"cueille\",\r\n\"m\u00e2che\", \"d\u00e9core\", \"renifle\", \"survole\"];\r\n\r\nvar ph4 = [\"une \u00e9toile filante lib\u00e9r\u00e9e.\", \"les feuilles mortes ambitieuses.\", \r\n\"la carte du monde maussade.\", \"un caniche rose anxieux.\", \"un grand livre futuriste.\",\r\n\"deux croque-mitaines enrag\u00e9s.\", \"trois petites sardines.\", \r\n\"la tour Eiffel d\u00e9\u00e7ue.\", \"la sorci\u00e8re amicale.\", \"mille pens\u00e9es d\u00e9sol\u00e9es.\", \r\n\"le ciel campagnard.\", \"un bel igloo songeur.\", \"six citrouilles snobes\", \r\n\"mon papa g\u00e9n\u00e9reux.\", \"l'indien placide.\", \"quatre dindes r\u00f4ties.\",\r\n\"un bouquet de roses grognon\", \"un vieux pneu tortur\u00e9.\", \"l'\u00e9t\u00e9 impulsif.\", \r\n\"mon nez clownesque.\", \"un v\u00e9lomoteur ambitieux.\",\"une paire de monocle d\u00e9sapprobateur\",\r\n\"une chaise longue paresseuse\"];\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(windowWidth, windowHeight);\r\n\u00a0 colorMode(RGB, 255, 255, 255, 255);\r\n\u00a0 background (76,204,164);\r\n\u00a0 fill (255);\r\n\u00a0 textFont(\"Arial\");\r\n\u00a0 textSize(100);\r\n\u00a0 textAlign(CENTER);\r\n\u00a0 text(\"Ma petite fabrique\", width\/2, height\/2);\r\n\u00a0 text(\"\u00e0 histoires\", width\/2, height\/2+100);\r\n\u00a0 textSize(20);\r\n\u00a0 text(\"Utiliser la fl\u00e8che droite pour cr\u00e9er une nouvelle histoire\", width\/2, height\/2+140)\r\n\u00a0 smooth();\r\n\u00a0 fill (255);\r\n\u00a0 textSize(100);\r\n}\r\n\r\nfunction draw() {\r\n}\r\n\r\nfunction keyPressed () {\r\n\u00a0 background (76,204,164);\r\n\u00a0 if (keyCode == RIGHT_ARROW) {\r\n\u00a0\u00a0\u00a0 var lieux = int(random(0, ph1.length))\r\n\u00a0\u00a0\u00a0 var ph1Lieux =ph1[lieux] ;\r\n\u00a0\u00a0\u00a0 text(ph1Lieux, width\/2, height\/2-150);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 var perso1 = int(random(0, ph2.length))\r\n\u00a0\u00a0\u00a0 var ph2Perso1 =ph2[perso1] ;\r\n\u00a0\u00a0\u00a0 text(ph2Perso1, width\/2, height\/2-50);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 var verbe = int(random(0, ph3.length))\r\n\u00a0\u00a0\u00a0 var ph3Verbe= ph3[verbe];\r\n\u00a0\u00a0\u00a0 text(ph3Verbe, width\/2, height\/2+50);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 var perso2 = int(random(0, ph4.length))\r\n\u00a0\u00a0\u00a0 var ph4Perso2 = ph4[perso2];\r\n\u00a0\u00a0\u00a0 text(ph4Perso2, width\/2, height\/2+150);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n}\r\n<\/pre>\n
L’affiche g\u00e9n\u00e9rative<\/h4>\n
var a = 2; \/\/ nombre d'images pour l'array fond\r\nvar b = 2; \/\/ nombre d'image pour l'array motif\r\nvar c = 2; \/ nombre d'image pour l'array texte\r\n\r\nvar fond = [];\r\nvar motif = [];\r\nvar texte = [];\r\n\r\nfunction preload(){\r\n\/* preload des images de notre base de donn\u00e9es, elles sont rang\u00e9es dans le dossier \"data\". \r\nLes images pour le fond sont des \"jpg\", les autres des \"png\".\r\n\u00a0\u00a0\u00a0 for ( var i = 0; i<a; i++ ) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 fond[i] = loadImage(\"data\/\" + i +\"_fond\"+ \".jpg\" );\r\n\u00a0 }\r\n\u00a0\u00a0\u00a0 for ( var i = 0; i<b; i++ ) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 motif[i] = loadImage(\"data\/\" + i +\"_motif\"+ \".png\" );\r\n\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 for ( var i = 0; i<c; i++ ) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 texte[i] = loadImage(\"data\/\" + i +\"_texte\"+ \".png\" );\r\n\u00a0 }\r\n}\r\n\r\n\r\nfunction setup(){\r\n\u00a0 createCanvas(1000,1414); \/\/ proportion d'un A3\r\n\u00a0 background(255);\r\n\u00a0 imageMode(CENTER);\r\n\u00a0 }\r\n\r\nfunction draw(){\r\n}\r\n\r\nfunction keyTyped() {\r\n\u00a0\u00a0\u00a0 if (key == 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 save(\"affiche.png\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 background(255);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (key == 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var s = int(random(0,a));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 image (fond[s], width\/2, height\/2,width,height);\r\n\u00a0 }\r\n\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0 if (key == 2) { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var s = int(random(0,b));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var x = random(0,width);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var y = random(0,height);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 image (motif[s], x, y,100,100);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 if (key == 3) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var s = int(random(0,c));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 image (texte[s], width\/2, height\/2,width,height);\r\n\u00a0 }\r\n}<\/pre>\n
\"1_motif\"<\/a>\"1_fond\"<\/a> \"1_texte\"<\/a> \"0_texte\"<\/a> \"0_motif\"<\/a> \"0_fond\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2614"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2614"}],"version-history":[{"count":21,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2614\/revisions"}],"predecessor-version":[{"id":2647,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2614\/revisions\/2647"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}