{"id":2469,"date":"2016-02-11T22:42:43","date_gmt":"2016-02-11T21:42:43","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2469"},"modified":"2016-09-09T17:01:26","modified_gmt":"2016-09-09T16:01:26","slug":"p5-js-p_2_1_1_04","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2469","title":{"rendered":"\/ p5.js \/ P_2_1_1_04"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/generative\/P_2_1_1_04\" width=\"780\" height=\"780\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre style=\"text-align: left;\">\/\/ P_2_1_1_04\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\/**\r\n\u00a0* shapes in a grid, that are always facing the mouse\r\n\u00a0* \u00a0\u00a0 \u00a0 \r\n\u00a0* MOUSE\r\n\u00a0* position x\/y\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : position to face\r\n\u00a0* \r\n\u00a0* KEYS\r\n\u00a0* 1-7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : choose shapes\r\n\u00a0* arrow up\/down\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : scale of shapes\r\n\u00a0* arrow left\/right\u00a0\u00a0\u00a0 : additional rotation of shapes\r\n\u00a0* d\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : toggle. size depending on distance\r\n\u00a0* g\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : toggle. grid resolution\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\u00a0*\/\r\n\r\nvar tileCount = 10;\r\nvar tileWidth, tileHeight;\r\nvar shapeSize = 50;\r\nvar newShapeSize = shapeSize;\r\nvar shapeAngle = 0;\r\nvar maxDist;\r\nvar currentShape;\r\nvar fillMode = 0;\r\nvar sizeMode = 0;\r\n\r\nfunction preload(){ \r\n\u00a0 currentShape = loadImage(\"data\/module_1.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_2.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_3.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_4.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_5.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_6.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_7.svg\");\r\n\u00a0 currentShape = loadImage(\"data\/module_1.svg\");\r\n}\r\n\r\nfunction setup(){\r\n\u00a0 createCanvas(600, 600);\r\n\u00a0 background(255);\r\n\u00a0 smooth();\r\n\u00a0 tileWidth = width\/float(tileCount);\r\n\u00a0 tileHeight = height\/float(tileCount);\r\n\u00a0 maxDist = sqrt(sq(width)+sq(height));\r\n} \r\n\r\n\r\nfunction draw(){\r\n\u00a0 background(255);\r\n\u00a0 smooth();\r\n\u00a0 for (var gridY=0; gridY&lt;tileCount; gridY++) {\r\n\u00a0\u00a0\u00a0 for (var gridX=0; gridX&lt;tileCount; gridX++) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var posX = tileWidth*gridX + tileWidth\/2;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var posY = tileHeight*gridY + tileWidth\/2;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ calculate angle between mouse position and actual position of the shape\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var angle = atan2(mouseY-posY, mouseX-posX) + radians(shapeAngle);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (sizeMode == 0) {newShapeSize = shapeSize;}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (sizeMode == 1) {newShapeSize = shapeSize*1.5-map(dist(mouseX,mouseY,posX,posY),0,500,5,shapeSize);}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (sizeMode == 2) {newShapeSize = map(dist(mouseX,mouseY,posX,posY),0,500,5,shapeSize);}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 push();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 translate(posX, posY);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 rotate (angle);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 imageMode (CENTER);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 scale(newShapeSize\/100,newShapeSize\/100);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 noStroke();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 shape(currentShape, 0,0, newShapeSize,newShapeSize);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 pop();\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}\r\n\r\nfunction shape(currentShape, x,y, newShapeSize,newShapeSize){\r\n\u00a0 image(currentShape,0,0);\r\n\u00a0 x=0;\r\n\u00a0 y=0;\r\n}\r\n\r\nfunction keyTyped() {\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_2_1_1_04.png\");\r\n\u00a0 if (key == 'd' || key == 'D') sizeMode = (sizeMode+1) % 3;\r\n\u00a0 if (key == 'g' || key == 'G') {\r\n\u00a0\u00a0\u00a0 tileCount = tileCount+5;\r\n\u00a0\u00a0\u00a0 if (tileCount &gt; 20) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 tileCount = 10;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 tileWidth = width\/float(tileCount);\r\n\u00a0\u00a0\u00a0 tileHeight = height\/float(tileCount);\r\n\u00a0 }\r\n\u00a0 if (key == '1') currentShape = loadImage(\"data\/module_1.svg\");\r\n\u00a0 if (key == '2') currentShape = loadImage(\"data\/module_2.svg\");\r\n\u00a0 if (key == '3') currentShape = loadImage(\"data\/module_3.svg\");\r\n\u00a0 if (key == '4') currentShape = loadImage(\"data\/module_4.svg\");\r\n\u00a0 if (key == '5') currentShape = loadImage(\"data\/module_5.svg\");\r\n\u00a0 if (key == '6') currentShape = loadImage(\"data\/module_6.svg\");\r\n\u00a0 if (key == '7') currentShape = loadImage(\"data\/module_7.svg\");\r\n}\r\n\u00a0 \r\nfunction keyPressed(){\r\n\u00a0 if (keyCode == UP_ARROW) shapeSize +=5;\r\n\u00a0 if (keyCode == DOWN_ARROW) shapeSize = max(shapeSize-5, 5);\r\n\u00a0 if (keyCode == LEFT_ARROW) shapeAngle -=5;\r\n\u00a0 if (keyCode == RIGHT_ARROW) shapeAngle +=5;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2470,"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\/2469"}],"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=2469"}],"version-history":[{"count":2,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2469\/revisions"}],"predecessor-version":[{"id":2514,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2469\/revisions\/2514"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2470"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}