generative-design · b-g · Oct 22, 2015 · Oct 22, 2015 · Oct 22, 2015 · Oct 22, 2015
diff --git a/01_P/P_1_1_1_01/P_1_1_1_01.png b/01_P/P_1_1_1_01/P_1_1_1_01.png
diff --git a/01_P/P_1_1_1_01/index.html b/01_P/P_1_1_1_01/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="../../libraries/p5/p5.js" type="text/javascript"></script>
+
+    <script src="../../libraries/p5/p5.dom.js" type="text/javascript"></script>
+    <script src="../../libraries/generativedesign/generativedesign.js" type="text/javascript"></script>
+
+    <script src="sketch.js" type="text/javascript"></script>
+
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/01_P/P_1_1_1_01/sketch.js b/01_P/P_1_1_1_01/sketch.js
@@ -0,0 +1,53 @@
+// P_1_1_1_01.pde
+// 
+// Generative Gestaltung, ISBN: 978-3-87439-759-9
+// First Edition, Hermann Schmidt, Mainz, 2009
+// Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+// Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+//
+// http://www.generative-gestaltung.de
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * draw the color spectrum by moving the mouse
+ * 	 
+ * MOUSE
+ * position x/y        : resolution
+ * 
+ * KEYS
+ * s                   : save png
+ */
+
+var stepX;
+var stepY;
+
+function setup() {
+  createCanvas(800, 400);
+  background(0);
+}
+
+function draw() {
+  noStroke();
+  colorMode(HSB, width, height, 100);
+
+  stepX = mouseX+2;
+  stepY = mouseY+2;
+  for (var gridY=0; gridY<height; gridY+=stepY){
+    for (var gridX=0; gridX<width; gridX+=stepX){
+      fill(gridX, height-gridY, 100);
+      rect(gridX, gridY, stepX, stepY);
+    }
+  }
+}
+
+function keyPressed() {
+  if (key=='s' || key=='S') saveCanvas(gd.timestamp(), 'png');
+}
diff --git a/01_P/P_1_2_1_01/P_1_2_1_01.png b/01_P/P_1_2_1_01/P_1_2_1_01.png
diff --git a/01_P/P_1_2_1_01/index.html b/01_P/P_1_2_1_01/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="../../libraries/p5/p5.js" type="text/javascript"></script>
+
+    <script src="../../libraries/p5/p5.dom.js" type="text/javascript"></script>
+    <script src="../../libraries/generativedesign/generativedesign.js" type="text/javascript"></script>
+
+    <script src="sketch.js" type="text/javascript"></script>
+
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/01_P/P_1_2_1_01/sketch.js b/01_P/P_1_2_1_01/sketch.js
@@ -0,0 +1,96 @@
+// P_1_2_1_01.pde
+// 
+// Generative Gestaltung, ISBN: 978-3-87439-759-9
+// First Edition, Hermann Schmidt, Mainz, 2009
+// Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+// Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+//
+// http://www.generative-gestaltung.de
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * shows how to interpolate colors in different styles/ color modes
+ * 
+ * MOUSE
+ * left click          : new random color set
+ * position x          : interpolation resolution
+ * position y          : row count
+ * 
+ * KEYS
+ * 1-2                 : switch interpolation style
+ * s                   : save png
+ */
+
+var tileCountX = 2;
+var tileCountY = 10;
+
+var colorsLeft = []
+var colorsRight = [];
+
+var interpolateShortest = true;
+
+function setup() {
+  createCanvas(800, 800);
+  colorMode(HSB);
+  noStroke();
+  shakeColors();
+  console.log(color(0));
+}
+
+function draw() {
+  tileCountX = int(map(mouseX,0,width,2,100));
+  tileCountY = int(map(mouseY,0,height,2,10));
+  var tileWidth = width / tileCountX;
+  var tileHeight = height / tileCountY;
+  var interCol;
+
+  for (var gridY=0; gridY< tileCountY; gridY++) {
+    var col1 = colorsLeft[gridY];
+    var col2 = colorsRight[gridY];
+
+    for (var gridX=0; gridX< tileCountX ; gridX++) { 
+      var amount = map(gridX,0,tileCountX-1,0,1);
+
+      if (interpolateShortest) {
+        // switch to rgb
+        colorMode(RGB);
+        interCol = lerpColor(col1,col2, amount); 
+        // switch back
+        colorMode(HSB);
+      } else {
+        interCol = lerpColor(col1,col2, amount); 
+      }
+
+      fill(interCol);
+
+      var posX = tileWidth*gridX;
+      var posY = tileHeight*gridY;      
+      rect(posX, posY, tileWidth, tileHeight); 
+    }
+  }
+}
+
+function shakeColors() {
+  for (var i=0; i<tileCountY; i++) {
+    colorsLeft[i] = color(random(0,60), random(0,100), 100);
+    colorsRight[i] = color(random(160,190), 100, random(0,100));
+  }
+}
+
+function mouseReleased() {
+  shakeColors();
+}
+
+function keyPressed() {
+  if (key=='s' || key=='S') saveCanvas(gd.timestamp(), 'png');
+  if (key == '1') interpolateShortest = true;
+  if (key == '2') interpolateShortest = false;
+}
diff --git a/01_P/P_1_2_3_01/P_1_2_3_01.png b/01_P/P_1_2_3_01/P_1_2_3_01.png
diff --git a/01_P/P_1_2_3_01/index.html b/01_P/P_1_2_3_01/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="../../libraries/p5/p5.js" type="text/javascript"></script>
+
+    <script src="../../libraries/p5/p5.dom.js" type="text/javascript"></script>
+    <script src="../../libraries/generativedesign/generativedesign.js" type="text/javascript"></script>
+
+    <script src="sketch.js" type="text/javascript"></script>
+
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/01_P/P_1_2_3_01/sketch.js b/01_P/P_1_2_3_01/sketch.js
@@ -0,0 +1,173 @@
+// P_1_2_3_01.pde
+// 
+// Generative Gestaltung, ISBN: 978-3-87439-759-9
+// First Edition, Hermann Schmidt, Mainz, 2009
+// Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+// Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
+//
+// http://www.generative-gestaltung.de
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * generates specific color palettes  
+ * 
+ * MOUSE
+ * position x/y        : row and coloum count
+ * 
+ * KEYS
+ * 0-9                 : creates specific color palettes
+ * s                   : save png
+ */
+
+var tileCountX = 50;
+var tileCountY = 10;
+
+// arrays for color components values
+var hueValues = [];
+var saturationValues = [];
+var brightnessValues = [];
+
+function setup() {
+  createCanvas(800, 800);
+  colorMode(HSB,360,100,100,100);
+  noStroke();
+
+  // init with random values
+  for (var i=0; i<tileCountX; i++) {
+    hueValues[i] = int(random(0,360));
+    saturationValues[i] = int(random(0,100));
+    brightnessValues[i] = int(random(0,100));
+  }
+}
+
+function draw() {
+  // white back
+  background(0,0,100);
+
+  // limit mouse coordinates to canvas
+  var mX = constrain(mouseX,0,width);
+  var mY = constrain(mouseY,0,height);
+
+  // tile counter
+  var counter = 0;
+
+  // map mouse to grid resolution
+  var currentTileCountX = int( map(mX, 0,width, 1,tileCountX) );
+  var currentTileCountY = int( map(mY, 0,height, 1,tileCountY) );
+  var tileWidth = width / currentTileCountX;
+  var tileHeight = height / currentTileCountY;
+
+  for (var gridY=0; gridY< tileCountY; gridY++) {
+    for (var gridX=0; gridX< tileCountX; gridX++) {  
+      var posX = tileWidth*gridX;
+      var posY = tileHeight*gridY;
+      var index = counter % currentTileCountX;
+
+      // get component color values
+      fill(hueValues[index],saturationValues[index],brightnessValues[index]);
+      rect(posX, posY, tileWidth, tileHeight);
+      counter++;
+    }
+  }
+}
+
+function keyPressed() {
+  if (key=='s' || key=='S') saveCanvas(gd.timestamp(), 'png');
+
+  if (key == '1') {
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = int( random(0,360) );
+      saturationValues[i] = int( random(0,100) );
+      brightnessValues[i] = int( random(0,100) );
+    }
+  }
+  if (key == '2') { 
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = int( random(0,360) );
+      saturationValues[i] = int( random(0,100) );
+      brightnessValues[i] = 100;
+    }
+  }
+  if (key == '3') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = int( random(0,360) );
+      saturationValues[i] = 100;
+      brightnessValues[i] = int( random(0,100) );
+    }
+  } 
+
+  if (key == '4') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = 0;
+      saturationValues[i] = 0;
+      brightnessValues[i] = int( random(0,100) );
+    }
+  }
+  if (key == '5') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = 195;
+      saturationValues[i] = 100;
+      brightnessValues[i] = int( random(0,100) );
+    }
+  }
+  if (key == '6') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = 195;
+      saturationValues[i] = int( random(0,100) );
+      brightnessValues[i] = 100;
+    }
+  }
+
+  if (key == '7') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = int( random(0,180) );
+      saturationValues[i] = int( random(80,100) );
+      brightnessValues[i] = int( random(50,90) );
+    }
+  }
+  if (key == '8') {  
+    for (var i=0; i<tileCountX; i++) {
+      hueValues[i] = int( random(180,360) );
+      saturationValues[i] = int( random(80,100) );
+      brightnessValues[i] = int( random(50,90) );
+    }
+  }
+
+  if (key == '9') {
+    for (var i=0; i<tileCountX; i++) {
+      if (i%2 == 0) {
+        hueValues[i] = int( random(0,360) );
+        saturationValues[i] = 100;
+        brightnessValues[i] = int( random(0,100) );
+      } 
+      else {
+        hueValues[i] = 195;
+        saturationValues[i] = int( random(0,100) );
+        brightnessValues[i] = 100;
+      }
+    }
+  }
+  if (key == '0') {  
+    for (var i=0; i<tileCountX; i++) {
+      if (i%2 == 0) {
+        hueValues[i] = 192;
+        saturationValues[i] = int( random(0,100) );
+        brightnessValues[i] = int( random(10,100) );
+      } 
+      else {
+        hueValues[i] = 273;
+        saturationValues[i] = int( random(0,100) );
+        brightnessValues[i] = int( random(10,90) );
+      }
+    }
+  }
+
+}