{"id":2674,"date":"2016-02-28T22:43:58","date_gmt":"2016-02-28T21:43:58","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2674"},"modified":"2016-09-09T16:58:05","modified_gmt":"2016-09-09T15:58:05","slug":"p5-js-p_4_1_1_01","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2674","title":{"rendered":"\/ p5.js \/ P_4_1_1_01"},"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_4_1_1_01\" 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_4_1_1_01\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* cutting and multiplying an area of the image\r\n\u00a0* \r\n\u00a0* MOUSE\r\n\u00a0* position x\/y\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : area position\r\n\u00a0* left click\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : multiply the area\r\n\u00a0* \r\n\u00a0* KEYS\r\n\u00a0* 1-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : area size\r\n\u00a0* r\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : toggle random area\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*\/\r\n\r\nvar tileCountX = 4;\r\nvar tileCountY = 4;\r\nvar tileCount = tileCountX*tileCountY;\r\nvar imageTiles = [tileCount];\r\nvar tileWidth, tileHeight;\r\nvar cropX = 0;\r\nvar cropY = 0;\r\nvar selectMode = true;\r\nvar randomMode = false; \r\n\r\nfunction preload(){\r\n\u00a0\u00a0\u00a0 img = loadImage(\"data\/queneau.png\");\r\n}\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(1033, 666); \r\n\u00a0 image(img, 0, 0);\r\n\u00a0 noCursor();\r\n\r\n\u00a0 tileWidth = width\/tileCountY;\r\n\u00a0 tileHeight = height\/tileCountX;\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 if (selectMode == true) {\r\n\u00a0\u00a0\u00a0 \/\/ in selection mode, a white selection rectangle is drawn over the image\r\n\u00a0\u00a0\u00a0 cropX = constrain(mouseX, 0, width-tileWidth);\r\n\u00a0\u00a0\u00a0 cropY = constrain(mouseY, 0, height-tileHeight);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 image(img, 0, 0);\r\n\u00a0\u00a0\u00a0 noFill();\r\n\u00a0\u00a0\u00a0 stroke(255);\r\n\u00a0\u00a0\u00a0 rect(cropX, cropY, tileWidth, tileHeight);\r\n\u00a0 } \r\n\u00a0 else {\r\n\u00a0\u00a0\u00a0 \/\/ reassemble image\r\n\u00a0\u00a0\u00a0 var i = 0;\r\n\u00a0\u00a0\u00a0 for (var gridY = 0; gridY &lt; tileCountY; gridY++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 for (var gridX = 0; gridX &lt; tileCountX; gridX++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 image(imageTiles[i], gridX*tileWidth, gridY*tileHeight);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 i++;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}\r\n\r\nfunction cropTiles() {\r\n\u00a0 tileWidth = width\/tileCountY;\r\n\u00a0 tileHeight = height\/tileCountX;\r\n\u00a0 tileCount = tileCountX * tileCountY;\r\n\u00a0 imageTiles = [tileCount];\r\n\u00a0 var i = 0;\r\n\u00a0 for (var gridY = 0; gridY &lt; tileCountY; gridY++){\r\n\u00a0\u00a0\u00a0 for (var gridX = 0; gridX &lt; tileCountX; gridX++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (randomMode){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cropX = int(random(mouseX-tileWidth\/2, mouseX+tileWidth\/2));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cropY = int(random(mouseY-tileHeight\/2, mouseY+tileHeight\/2));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 cropX = constrain(cropX, 0, width-tileWidth);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 cropY = constrain(cropY, 0, height-tileHeight);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 imageTiles[i++] = img.get(cropX, cropY, tileWidth, tileHeight);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}\r\n\r\nfunction mouseMoved() {\r\n\u00a0 selectMode = true;\r\n}\r\n\r\nfunction mousePressed(){\r\n\u00a0 selectMode = false; \r\n\u00a0 cropTiles();\r\n}\r\n\r\nfunction keyTyped(){\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_4_1_1_01.png\");\r\n\r\n\u00a0 if (key == 'r' || key == 'R') {\r\n\u00a0\u00a0\u00a0 randomMode = !randomMode;\r\n\u00a0\u00a0\u00a0 cropTiles();\r\n\u00a0 }\r\n\r\n\u00a0 if (key == '1'){\r\n\u00a0\u00a0\u00a0 tileCountY = 4;\r\n\u00a0\u00a0\u00a0 tileCountX = 4;\r\n\u00a0\u00a0\u00a0 cropTiles();\r\n\u00a0 }\r\n\u00a0 if (key == '2'){\r\n\u00a0\u00a0\u00a0 tileCountY = 10;\r\n\u00a0\u00a0\u00a0 tileCountX = 10;\r\n\u00a0\u00a0\u00a0 cropTiles();\r\n\u00a0 }\r\n\u00a0 if (key == '3'){\r\n\u00a0\u00a0\u00a0 tileCountY = 20;\r\n\u00a0\u00a0\u00a0 tileCountX = 20;\r\n\u00a0\u00a0\u00a0 cropTiles();\r\n\u00a0 }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2676,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2674"}],"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=2674"}],"version-history":[{"count":1,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2674\/revisions"}],"predecessor-version":[{"id":2677,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2674\/revisions\/2677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2676"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}