{"id":2433,"date":"2016-02-11T14:18:31","date_gmt":"2016-02-11T13:18:31","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2433"},"modified":"2016-09-09T17:01:27","modified_gmt":"2016-09-09T16:01:27","slug":"p5-js-p_1_2_3_01","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2433","title":{"rendered":"\/ p5.js \/ P_1_2_3_01"},"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_1_2_3_01\" width=\"780\" height=\"780\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p style=\"text-align: left;\"><em>Cliquer dans l&#8217;animation pour activer ses fonctionnalit\u00e9s<\/em><br \/>\nTouches de 0 \u00e0 9 : cr\u00e9er une palette de couleurs sp\u00e9cifique.<br \/>\nTouche &#8220;s&#8221; : enregistrer un fichier &#8220;png&#8221;.<\/p>\n<pre style=\"text-align: left;\">\/\/ P_1_2_3_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\u00a0* generates specific color palettes \u00a0\r\n\u00a0* \r\n\u00a0* MOUSE\r\n\u00a0* position x\/y\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : row and coloum count\r\n\u00a0* \r\n\u00a0* KEYS\r\n\u00a0* 0-9\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : creates specific color palettes\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 tileCountX = 50;\r\nvar tileCountY = 10;\r\nvar hueValues =[];\r\nvar saturationValues = [];\r\nvar brightnessValues = [];\r\n\r\nfunction setup() { \r\n\u00a0 createCanvas(780,780); \r\n\u00a0 colorMode(HSB,360,100,100,100);\r\n\u00a0 noStroke();\r\n\u00a0 \/\/ init with random values\r\n\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0 hueValues[i] = random(0,360);\r\n\u00a0\u00a0\u00a0 saturationValues[i] = random(0,100);\r\n\u00a0\u00a0\u00a0 brightnessValues[i] = random(0,100);\r\n\u00a0 }\r\n} \r\n\r\nfunction draw() { \r\n\u00a0\u00a0 \/\/ white back\r\n\u00a0 background(0,0,100);\r\n\r\n\u00a0 \/\/ count every tile\r\n\u00a0 var counter = 0;\r\n\r\n\u00a0 \/\/ map mouse to grid resolution\r\n\u00a0\u00a0 var currentTileCountX = int(map(mouseX, 0,width, 1,tileCountX));\r\n\u00a0 var currentTileCountY = int(map(mouseY, 0,height, 1,tileCountY));\r\n\r\n\u00a0 var tileWidth = width \/ float(currentTileCountX);\r\n\u00a0 var tileHeight = height \/ float(currentTileCountY);\r\n\r\n\u00a0 for (var gridY=0; gridY&lt; tileCountY; gridY++) {\r\n\u00a0\u00a0\u00a0 for (var gridX=0; gridX&lt; tileCountX; gridX++) { \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var posX = float(tileWidth*gridX);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var posY = float(tileHeight*gridY);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var index = int(counter % currentTileCountX);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ get component color values\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 fill(hueValues[index],saturationValues[index],brightnessValues[index]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 rect(posX, posY, tileWidth, tileHeight);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 counter++;\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n} \r\n\r\nfunction keyTyped() { \u00a0\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_1_2_3_01.png\");\r\n\u00a0 if (key == '1') {\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(0,360));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '2') { \r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(0,360));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = 100;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '3') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(0,360));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = 100;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 } \r\n\u00a0 if (key == '4') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '5') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 195;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = 100;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '6') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 195;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = 100;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '7') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(0,180));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(80,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(50,90));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '8') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(180,360));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(80,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(50,90));\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\r\n\u00a0 if (key == '9') {\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (i%2 == 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = int(random(0,360));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = 100;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 } \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 195;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = 100;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 if (key == '0') { \u00a0\r\n\u00a0\u00a0\u00a0 for (var i=0; i&lt;tileCountX; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (i%2 == 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 192;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(10,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 } \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hueValues[i] = 273;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 saturationValues[i] = int(random(0,100));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 brightnessValues[i] = int(random(10,90));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}<\/pre>\n<p style=\"text-align: center;\">\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2434,"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\/2433"}],"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=2433"}],"version-history":[{"count":5,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2433\/revisions"}],"predecessor-version":[{"id":2439,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2433\/revisions\/2439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2434"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}