{"id":2591,"date":"2016-02-13T22:52:23","date_gmt":"2016-02-13T21:52:23","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2591"},"modified":"2016-09-09T17:00:43","modified_gmt":"2016-09-09T16:00:43","slug":"p5-js-p_2_2_3_02","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2591","title":{"rendered":"\/ p5.js \/ P_2_2_3_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_3_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_3_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* form mophing process by connected random agents\r\n\u00a0* two forms: circle and line\r\n\u00a0* \r\n\u00a0* MOUSE\r\n\u00a0* click\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : start a new circe\r\n\u00a0* position x\/y\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : direction and speed of floating\r\n\u00a0* \r\n\u00a0* KEYS\r\n\u00a0* 1-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : fill styles\r\n\u00a0* 3-4\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : form styles circle\/line\r\n\u00a0* arrow up\/down\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : step size +\/-\r\n\u00a0* f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : freeze. loop on\/off\r\n\u00a0* Delete\/Backspace\u00a0\u00a0\u00a0 : clear display\r\n\u00a0* s\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : save png\r\n\u00a0*\/\r\n\r\nvar formResolution = 15;\r\nvar stepSize = 2;\r\nvar distortionFactor = 1;\r\nvar initRadius = 150;\r\nvar centerX, centerY;\r\nvar x = [];\r\nvar y = [];\r\n\r\nvar filled = false;\r\nvar freeze = false;\r\nvar mode = 0;\r\n\r\n\r\nfunction setup(){\r\n\u00a0 \/\/ use fullscreen size \r\n\u00a0 createCanvas(780, 780);\r\n\u00a0 smooth();\r\n\r\n\u00a0 \/\/ init form\r\n\u00a0 centerX = width\/2; \r\n\u00a0 centerY = height\/2;\r\n\u00a0 var angle = radians(360\/float(formResolution));\r\n\u00a0 for (var i=0; i&lt;formResolution; i++){\r\n\u00a0\u00a0\u00a0 x[i] = cos(angle*i) * initRadius;\r\n\u00a0\u00a0\u00a0 y[i] = sin(angle*i) * initRadius; \u00a0\r\n\u00a0 }\r\n\r\n\u00a0 stroke(0, 50);\r\n\u00a0 background(255);\r\n}\r\n\r\n\r\nfunction draw(){\r\n\u00a0 \/\/ floating towards mouse position\r\n\u00a0 if (mouseX != 0 || mouseY != 0) {\r\n\u00a0\u00a0\u00a0 centerX += (mouseX-centerX) * 0.01;\r\n\u00a0\u00a0\u00a0 centerY += (mouseY-centerY) * 0.01;\r\n\u00a0 }\r\n\r\n\u00a0 \/\/ calculate new points\r\n\u00a0 for (var i=0; i&lt;formResolution; i++){\r\n\u00a0\u00a0\u00a0 x[i] += random(-stepSize,stepSize);\r\n\u00a0\u00a0\u00a0 y[i] += random(-stepSize,stepSize);\r\n\u00a0\u00a0\u00a0 \/\/ ellipse(x[i], y[i], 5, 5);\r\n\u00a0 }\r\n\r\n\u00a0 strokeWeight(0.75);\r\n\u00a0 if (filled) fill(random(255));\r\n\u00a0 else noFill();\r\n\r\n\u00a0 if (mode == 0) {\r\n\u00a0\u00a0\u00a0 beginShape();\r\n\u00a0\u00a0\u00a0 \/\/ start controlpoint\r\n\u00a0\u00a0\u00a0 curveVertex(x[formResolution-1]+centerX, y[formResolution-1]+centerY);\r\n\r\n\u00a0\u00a0\u00a0 \/\/ only these points are drawn\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;formResolution; i++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 curveVertex(x[i]+centerX, y[i]+centerY);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 curveVertex(x[0]+centerX, y[0]+centerY);\r\n\r\n\u00a0\u00a0\u00a0 \/\/ end controlpoint\r\n\u00a0\u00a0\u00a0 curveVertex(x[1]+centerX, y[1]+centerY);\r\n\u00a0\u00a0\u00a0 endShape();\r\n\u00a0 }\r\n\r\n\u00a0 if (mode == 1) {\r\n\u00a0\u00a0\u00a0 beginShape();\r\n\u00a0\u00a0\u00a0 \/\/ start controlpoint\r\n\u00a0\u00a0\u00a0 curveVertex(x[0]+centerX, y[0]+centerY);\r\n\r\n\u00a0\u00a0\u00a0 \/\/ only these points are drawn\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;formResolution; i++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 curveVertex(x[i]+centerX, y[i]+centerY);\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ end controlpoint\r\n\u00a0\u00a0\u00a0 curveVertex(x[formResolution-1]+centerX, y[formResolution-1]+centerY);\r\n\u00a0\u00a0\u00a0 endShape();\r\n\u00a0 }\r\n\r\n}\r\n\r\nfunction mousePressed() {\r\n\u00a0 \/\/ init forms on mouse position\r\n\u00a0 centerX = mouseX; \r\n\u00a0 centerY = mouseY;\r\n\r\n\u00a0 \/\/ circle\r\n\u00a0 if (mode == 0) {\r\n\u00a0\u00a0\u00a0 centerX = mouseX;\r\n\u00a0\u00a0\u00a0 centerY = mouseY;\r\n\u00a0\u00a0\u00a0 var angle = radians(360\/float(formResolution));\r\n\u00a0\u00a0\u00a0 var radius = initRadius * random(0.5,1.0);\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;formResolution; i++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 x[i] = cos(angle*i) * radius;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 y[i] = sin(angle*i) * radius;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 } \r\n\r\n\u00a0 \/\/ line\r\n\u00a0 if (mode == 1) {\r\n\u00a0\u00a0\u00a0 centerX = mouseX;\r\n\u00a0\u00a0\u00a0 centerY = mouseY;\r\n\u00a0\u00a0\u00a0 var radius = initRadius * random(0.5,5.0);\r\n\u00a0\u00a0\u00a0 var angle = random(PI);\r\n\u00a0\u00a0\u00a0 radius = initRadius*4;\r\n\u00a0\u00a0\u00a0 angle = 0;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 var x1 = cos(angle) * radius;\r\n\u00a0\u00a0\u00a0 var y1 = sin(angle) * radius;\r\n\u00a0\u00a0\u00a0 var x2 = cos(angle-PI) * radius;\r\n\u00a0\u00a0\u00a0 var y2 = sin(angle-PI) * radius;\r\n\u00a0\u00a0\u00a0 for(var i=0; i&lt;formResolution; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 x[i] = lerp(x1, x2, i\/float(formResolution));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 y[i] = lerp(y1, y2, i\/float(formResolution));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}\r\n\r\n\r\nfunction keyPressed() {\r\n\u00a0 if (keyCode == UP_ARROW) stepSize++;\r\n\u00a0 if (keyCode == DOWN_ARROW) stepSize--;\r\n\u00a0 stepSize = max(stepSize, 1);\r\n\u00a0 println(\"stepSize: \" + stepSize);\r\n\u00a0\u00a0\u00a0 if (keyCode == DELETE || keyCode == BACKSPACE) background(255);\r\n}\r\n\r\nfunction keyTyped() {\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_2_2_3_02.png\");\r\n\r\n\u00a0 if (key == '1') filled = false;\r\n\u00a0 if (key == '2') filled = true;\r\n\u00a0 if (key == '3') mode = 0;\r\n\u00a0 if (key == '4') mode = 1;\r\n\u00a0 \/\/ switch draw loop on\/off\r\n\u00a0 if (key == 'f' || key == 'F') freeze = !freeze;\r\n\u00a0 if (freeze == true) noLoop();\r\n\u00a0 else loop();\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2596,"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\/2591"}],"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=2591"}],"version-history":[{"count":2,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2591\/revisions"}],"predecessor-version":[{"id":2595,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2591\/revisions\/2595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2596"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}