{"id":2608,"date":"2016-02-14T22:30:14","date_gmt":"2016-02-14T21:30:14","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2608"},"modified":"2016-09-09T17:00:43","modified_gmt":"2016-09-09T16:00:43","slug":"p5-js-p_2_2_5_02","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2608","title":{"rendered":"\/ p5.js \/ P_2_2_5_02"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more-->\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/generative\/P_2_2_5_02\" width=\"780\" height=\"780\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre style=\"text-align: left;\">\/\/ P_2_2_5_02\r\n\/\/\r\n\/\/ Generative Gestaltung, ISBN: 978-3-87439-759-9\r\n\/\/ First Edition, Hermann Schmidt, Mainz, 2009\r\n\/\/ Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni\r\n\/\/ Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni\r\n\/\/\r\n\/\/ http:\/\/www.generative-gestaltung.de\r\n\/\/\r\n\/\/ Licensed under the Apache License, Version 2.0 (the \"License\");\r\n\/\/ you may not use this file except in compliance with the License.\r\n\/\/ You may obtain a copy of the License at http:\/\/www.apache.org\/licenses\/LICENSE-2.0\r\n\/\/ Unless required by applicable law or agreed to in writing, software\r\n\/\/ distributed under the License is distributed on an \"AS IS\" BASIS,\r\n\/\/ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n\/\/ See the License for the specific language governing permissions and\r\n\/\/ limitations under the License.\r\n\/**\r\n\u00a0* pack as many cirlces as possible together\r\n\u00a0* \r\n\u00a0* MOUSE\r\n\u00a0* press + position x\/y : move area of interest\r\n\u00a0* \r\n\u00a0* KEYS\r\n\u00a0* 1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : show\/hide svg modules\r\n\u00a0* 2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : show\/hide lines\r\n\u00a0* 3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : show\/hide circles\r\n\u00a0* arrow up\/down\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : resize area of interest\r\n\u00a0* f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : freeze process. on\/off\r\n\u00a0* s\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : save png\r\n\u00a0* p\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : save pdf\r\n\u00a0*\/\r\nvar freeze = false;\r\nvar maxCount = 5000; \/\/max count of the cirlces\r\nvar currentCount = 1;\r\nvar x = [maxCount];\r\nvar y = [maxCount];\r\nvar r = [maxCount]; \/\/radius\r\nvar closestIndex = [maxCount]; \/\/index\r\nvar minRadius = 3;\r\nvar maxRadius = 50;\r\n\/\/ mouse and arrow up\/down interaction\r\nvar mouseRect = 30;\r\n\/\/ style selector, hotkeys 1,2,3\r\nvar showSvg = true;\r\nvar showLine = false;\r\nvar showCircle = false;\r\n\r\nfunction preload(){\r\n\u00a0\u00a0\u00a0 module1 = loadImage(\"08.png\");\r\n\u00a0\u00a0\u00a0 module2 = loadImage(\"07.png\");\r\n}\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(780,780);\r\n\u00a0 noFill();\r\n\u00a0 smooth();\r\n\u00a0 cursor(CROSS);\r\n\r\n\u00a0 \/\/ first circle\r\n\u00a0 x[0] = 200;\r\n\u00a0 y[0] = 100;\r\n\u00a0 r[0] = 50;\r\n\u00a0 closestIndex[0] = 0;\r\n}\r\n\r\nfunction draw() {\r\n\u00a0\u00a0 imageMode(CENTER);\r\n\u00a0 ellipseMode(CENTER);\r\n\u00a0 background(255);\r\n\r\n\u00a0 for (var j = 0; j &lt; 40; j++) {\r\n\u00a0\u00a0\u00a0 \/\/ create a random position\r\n\u00a0\u00a0\u00a0 var tx = random(0+maxRadius,width-maxRadius);\r\n\u00a0\u00a0\u00a0 var ty = random(0+maxRadius,height-maxRadius);\r\n\u00a0\u00a0\u00a0 var tr = minRadius;\r\n\u00a0\u00a0\u00a0 \/\/ create a random position according to mouse position\r\n\u00a0\u00a0\u00a0 if (mouseIsPressed == true) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 tx = random(mouseX-mouseRect\/2,mouseX+mouseRect\/2);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ty = random(mouseY-mouseRect\/2,mouseY+mouseRect\/2);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 tr = 1;\r\n\u00a0\u00a0\u00a0 } \r\n\u00a0\u00a0\u00a0 var insection = true;\r\n\u00a0\u00a0\u00a0 \/\/ find a pos with no intersection with others circles\r\n\u00a0\u00a0\u00a0 for(var i=0; i &lt; currentCount; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var d = dist(tx,ty, x[i],y[i]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/println(d);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (d &gt;= (tr + r[i])) insection = false;\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 insection = true; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 \/\/ stop process by pressing hotkey 'F'\r\n\u00a0\u00a0\u00a0 if (freeze) insection = true;\r\n\u00a0\u00a0\u00a0 \/\/ no intection ... add a new circle\r\n\u00a0\u00a0\u00a0 if (insection == false) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ get closest neighbour and closest possible radius\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var tRadius = width;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 for(var i=0; i &lt; currentCount; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var d = dist(tx,ty, x[i],y[i]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (tRadius &gt; d-r[i]) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tRadius = d-r[i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 closestIndex[currentCount] = i;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (tRadius &gt; maxRadius) tRadius = maxRadius;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 x[currentCount] = tx;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 y[currentCount] = ty;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 r[currentCount] = tRadius;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 currentCount++;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 \/\/ draw them\r\n\u00a0 for (var i=0 ; i &lt; currentCount; i++) {\r\n\u00a0\u00a0\u00a0 push();\r\n\u00a0\u00a0\u00a0 translate(x[i],y[i]);\r\n\u00a0\u00a0\u00a0 \/\/ we abuse radius as random angle :)\r\n\u00a0\u00a0\u00a0 rotate(radians(r[i]));\r\n\r\n\u00a0\u00a0\u00a0 if (showSvg) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ draw SVGs\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (r[i] == maxRadius) image(module1, 0, 0, r[i]*2,r[i]*2);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else image(module2, 0, 0, r[i]*2,r[i]*2);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 if (showCircle) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ draw circles\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 stroke(0);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 strokeWeight(1.5);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ellipse(0,0, r[i]*2,r[i]*2);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 pop();\r\n\u00a0\u00a0\u00a0 if (showLine) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ draw connection-lines to the nearest neighbour\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 stroke(150);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 strokeWeight(1);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var n = closestIndex[i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 line(x[i],y[i], x[n],y[n]); \r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 } \r\n\u00a0 \/\/ visualize the random range of the new positions\r\n\u00a0 if (mouseIsPressed == true) {\r\n\u00a0\u00a0\u00a0 stroke(255,200,0);\r\n\u00a0\u00a0\u00a0 strokeWeight(2);\r\n\u00a0\u00a0\u00a0 rect(mouseX-mouseRect\/2,mouseY-mouseRect\/2,mouseRect,mouseRect);\r\n\u00a0 } \r\n\u00a0 if (currentCount &gt;= maxCount) noLoop();\r\n}\r\n\r\nfunction keyTyped() {\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_2_2_5_02.png\");\r\n\r\n\u00a0 \/\/ freeze process, toggle on\/off\r\n\u00a0 if (key == 'f' || key == 'F') freeze = !freeze;\r\n\r\n\u00a0 \/\/ skin style, toggle on\/off\r\n\u00a0 if (key == '1') showSvg = !showSvg;\r\n\u00a0 if (key == '2') showLine = !showLine;\r\n\u00a0 if (key == '3') showCircle = !showCircle;\r\n}\r\n\r\nfunction keyPressed() {\r\n\u00a0 \/\/ mouseRect ctrls arrowkeys up\/down \r\n\u00a0 if (keyCode == UP_ARROW) mouseRect += 4;\r\n\u00a0 if (keyCode == DOWN_ARROW) mouseRect -= 4; \r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2609,"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\/2608"}],"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=2608"}],"version-history":[{"count":1,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2608\/revisions"}],"predecessor-version":[{"id":2610,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2608\/revisions\/2610"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2609"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}