{"id":3357,"date":"2016-02-28T23:22:54","date_gmt":"2016-02-28T22:22:54","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3357"},"modified":"2016-11-19T15:00:37","modified_gmt":"2016-11-19T14:00:37","slug":"p5-js-p_4_3_1_01","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3357","title":{"rendered":"\/ p5.js \/ P_4_3_1_01"},"content":{"rendered":"\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/generative\/P_4_3_1_01\" width=\"700\" height=\"532\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>&#8216;S&#8217; pour sauvegarder \/ 1, 2, 3, 4, 5, 6, 7, 8, 9 pour modifier la trame + d\u00e9placement de la souris<\/p>\n<p>&nbsp;<\/p>\n<pre>var img;\r\nvar drawMode = 1;\r\nfunction preload() {\r\n img = loadImage(\"perec.jpg\");\r\n}\r\nfunction setup() {\r\n createCanvas(img.width*7, img.height*7);\r\n}\r\nfunction draw() {\r\n background(255);\r\n var mouseXFactor = map(mouseX, 0, width, 0.05, 1);\r\n var mouseYFactor = map(mouseY, 0, height, 0.05, 1);\r\n for (var gridX = 0; gridX &lt; img.width; gridX++) {\r\n for (var gridY = 0; gridY &lt; img.height; gridY++) {\r\n var tileWidth = width \/ img.width;\r\n var tileHeight = height \/ img.height;\r\n var posX = tileWidth*gridX;\r\n var posY = tileHeight*gridY;\r\n var c = img.get(gridX, gridY);\r\n var greyscale = round(red(c)*0.222+green(c)*0.707+blue(c)*0.071);\r\n switch(drawMode) {\r\n case 1:\r\n var w1 = map(greyscale, 0,255, 15,0.1);\r\n stroke(0);\r\n strokeWeight(w1 * mouseXFactor);\r\n line(posX, posY, posX+5, posY+5); \r\n break;\r\n case 2:\r\n fill(0);\r\n noStroke();\r\n var r2 = 1.1284 * sqrt(tileWidth*tileWidth*(1-greyscale\/255.0));\r\n r2 = r2 * mouseXFactor * 3;\r\n ellipse(posX, posY, r2, r2);\r\n break;\r\n case 3:\r\n var l3 = map(greyscale, 0,255, 30,0.1);\r\n l3 = l3 * mouseXFactor; \r\n stroke(0);\r\n strokeWeight(10 * mouseYFactor);\r\n line(posX, posY, posX+l3, posY+l3);\r\n break;\r\n case 4:\r\n stroke(0);\r\n var w4 = map(greyscale, 0,255, 10,0);\r\n strokeWeight(w4 * mouseXFactor + 0.1);\r\n var l4 = map(greyscale, 0,255, 35,0);\r\n l4 = l4 * mouseYFactor;\r\n push();\r\n translate(posX, posY);\r\n rotate(greyscale\/255.0 * PI);\r\n line(0, 0, 0+l4, 0+l4);\r\n pop();\r\n break;\r\n case 5:\r\n var w5 = map(greyscale,0,255,5,0.2);\r\n strokeWeight(w5 * mouseYFactor + 0.1);\r\n var c2 = img.get(min(gridX+1,img.width-1), gridY);\r\n stroke(c2);\r\n var greyscale2 = int(red(c2)*0.222 + green(c2)*0.707 + blue(c2)*0.071);\r\n var h5 = 50 * mouseXFactor;\r\n var d1 = map(greyscale, 0,255, h5,0);\r\n var d2 = map(greyscale2, 0,255, h5,0);\r\n line(posX-d1, posY+d1, posX+tileWidth-d2, posY+d2);\r\n break;\r\n case 6:\r\n var w6 = map(greyscale, 0,255, 25,0);\r\n noStroke();\r\n fill(c);\r\n ellipse(posX, posY, w6 * mouseXFactor, w6 * mouseXFactor); \r\n break;\r\n case 7:\r\n stroke(c);\r\n var w7 = map(greyscale, 0,255, 5,0.1);\r\n strokeWeight(w7);\r\n fill(255,255* mouseXFactor);\r\n push();\r\n translate(posX, posY);\r\n rotate(greyscale\/255.0 * PI* mouseYFactor);\r\n rect(0,0,15,15);\r\n pop();\r\n break;\r\n case 8:\r\n noStroke();\r\n fill(greyscale,greyscale * mouseXFactor,255* mouseYFactor);\r\n rect(posX,posY,3.5,3.5);\r\n rect(posX+4,posY,3.5,3.5);\r\n rect(posX,posY+4,3.5,3.5);\r\n rect(posX+4,posY+4,3.5,3.5);\r\n break;\r\n case 9:\r\n stroke(255,greyscale,0);\r\n noFill();\r\n push();\r\n translate(posX, posY);\r\n rotate(greyscale\/255.0 * PI);\r\n strokeWeight(1);\r\n rect(0,0,15* mouseXFactor,15* mouseYFactor);\r\n var w9 = map(greyscale, 0,255, 15,0.1);\r\n strokeWeight(w9);\r\n stroke(0,70);\r\n ellipse(0,0,10,5);\r\n pop();\r\n break;\r\n }\r\n }\r\n }\r\n}\r\n\r\nfunction keyPressed(){\r\n if (key == 's' || key == 'S') save(timestamp()+\".png\");\r\n}\r\n\r\nfunction keyTyped() {\r\n if (key == '1') drawMode = 1;\r\n if (key == '2') drawMode = 2;\r\n if (key == '3') drawMode = 3;\r\n if (key == '4') drawMode = 4;\r\n if (key == '5') drawMode = 5;\r\n if (key == '6') drawMode = 6;\r\n if (key == '7') drawMode = 7;\r\n if (key == '8') drawMode = 8;\r\n if (key == '9') drawMode = 9;\r\n}\r\n\r\nfunction timestamp() {\r\n var now = new Date();\r\n return now.toISOString();\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;S&#8217; pour sauvegarder \/ 1, 2, 3, 4, 5, 6, 7, 8, 9 pour modifier la trame + d\u00e9placement de la souris &nbsp; var img; var drawMode = 1; function preload() { img = loadImage(&#8220;perec.jpg&#8221;); } function setup()&#8230; <a class=\"read-more\" href=\"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3357\">Lire la suite&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":3359,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3357"}],"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=3357"}],"version-history":[{"count":3,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3357\/revisions"}],"predecessor-version":[{"id":3361,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3357\/revisions\/3361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/3359"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}