Merge pull request #170 from generative-design/dev-updates

Dev updates
generative-design · Nov 26, 2018 · c40b36e · c40b36e
2 parents df73cc6 + fec8bdf
commit c40b36e
Show file tree

Hide file tree

Showing 125 changed files with 57,050 additions and 46,280 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+libraries/*
+styles/*
+p5.js
+*.min.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,56 @@
+{
+    "env": {
+        "browser": true
+    },
+    "rules": {
+        "semi": "error",
+        "no-eval": "error",
+        "indent": [
+            "error",
+            2
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "no-multiple-empty-lines": [
+            "error",
+            {
+                "max": 1,
+                "maxEOF": 1,
+                "maxBOF": 0
+            }
+        ],
+        "no-mixed-spaces-and-tabs": "error",
+        "no-tabs": "error",
+        "no-trailing-spaces": "error",
+        "semi-style": [
+            "error",
+            "last"
+        ],
+        "spaced-comment": "error",
+        "switch-colon-spacing": [
+            "error",
+            {
+                "after": true,
+                "before": false
+            }
+        ],
+        "space-infix-ops": "error",
+        "no-multi-spaces": "error",
+        "space-in-parens": [
+            "error",
+            "never"
+        ],
+        "space-unary-ops": "error",
+        "brace-style": "error",
+        "eol-last": "error",
+        "comma-dangle": [
+            "error",
+            "never"
+        ],
+        "func-call-spacing": "error",
+        "key-spacing": "error",
+        "keyword-spacing": "error"
+    }
+}
diff --git a/01_P/P_1_2_1_01/sketch.js b/01_P/P_1_2_1_01/sketch.js
@@ -35,7 +35,7 @@
 var tileCountX = 2;
 var tileCountY = 10;
 
-var colorsLeft = []
+var colorsLeft = [];
 var colorsRight = [];
 var colors = [];
 
@@ -97,7 +97,7 @@ function mouseReleased() {
 }
 
 function keyPressed() {
-  if (key == 'c' || key == 'C') writeFile([gd.ase.encode( colors )], gd.timestamp(), 'ase');
+  if (key == 'c' || key == 'C') writeFile([gd.ase.encode(colors)], gd.timestamp(), 'ase');
   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_2_01/sketch.js b/01_P/P_1_2_2_01/sketch.js
@@ -40,7 +40,7 @@ var colors = [];
 var sortMode = null;
 
 function preload() {
-  img = loadImage('data/pic1.jpg');
+  loadImage('data/pic1.jpg', setImage);
 }
 
 function setup() {
@@ -82,14 +82,18 @@ function keyReleased() {
   if (key == 'c' || key == 'C') writeFile([gd.ase.encode(colors)], gd.timestamp(), 'ase');
   if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
 
-  if (key == '1') img = loadImage('data/pic1.jpg');
-  if (key == '2') img = loadImage('data/pic2.jpg');
-  if (key == '3') img = loadImage('data/pic3.jpg');
-  if (key == '4') img = loadImage('data/pic4.jpg');
+  if (key == '1') loadImage('data/pic1.jpg', setImage);
+  if (key == '2') loadImage('data/pic2.jpg', setImage);
+  if (key == '3') loadImage('data/pic3.jpg', setImage);
+  if (key == '4') loadImage('data/pic4.jpg', setImage);
 
   if (key == '5') sortMode = null;
   if (key == '6') sortMode = gd.HUE;
   if (key == '7') sortMode = gd.SATURATION;
   if (key == '8') sortMode = gd.BRIGHTNESS;
   if (key == '9') sortMode = gd.GRAYSCALE;
 }
+
+function setImage(loadedImageFile) {
+  img = loadedImageFile;
+}
diff --git a/01_P/P_1_2_3_03/sketch.js b/01_P/P_1_2_3_03/sketch.js
@@ -34,7 +34,7 @@ var hueValues = [];
 var saturationValues = [];
 var brightnessValues = [];
 var actRandomSeed = 0;
-var alphaValue = 27;
+var alphaValue = 75;
 
 function setup() {
   createCanvas(windowWidth, windowHeight);
@@ -119,8 +119,8 @@ function gradient(x, y, w, h, c1, c2) {
   var grd = ctx.createLinearGradient(x, y, x, y + h);
   grd.addColorStop(0, c1.toString());
   grd.addColorStop(1, c2.toString());
-	ctx.fillStyle = grd;
-	ctx.fillRect(x, y, w, h);
+  ctx.fillStyle = grd;
+  ctx.fillRect(x, y, w, h);
 }
 
 function mouseReleased() {

diff --git a/01_P/P_1_2_3_04/sketch.js b/01_P/P_1_2_3_04/sketch.js
@@ -34,7 +34,7 @@ var hueValues = [];
 var saturationValues = [];
 var brightnessValues = [];
 var actRandomSeed = 0;
-var alphaValue = 27;
+var alphaValue = 75;
 
 function setup() {
   createCanvas(windowWidth, windowHeight);
@@ -121,8 +121,8 @@ function gradient(x, y, w, h, c1, c2) {
   var grd = ctx.createLinearGradient(x, y, x, y + h);
   grd.addColorStop(0, c1.toString());
   grd.addColorStop(1, c2.toString());
-	ctx.fillStyle = grd;
-	ctx.fillRect(x, y, w, h);
+  ctx.fillStyle = grd;
+  ctx.fillRect(x, y, w, h);
 }
 
 function mouseReleased() {

diff --git a/01_P/P_1_2_3_05/sketch.js b/01_P/P_1_2_3_05/sketch.js
@@ -101,7 +101,7 @@ function draw() {
 
       if (random() < 0.45) {
         var w = map(parts[ii], 0, sumPartsTotal, 0, width);
-        var h = rowHeight * 1.5
+        var h = rowHeight * 1.5;
         var px1 = map(sumPartsNow, 0, sumPartsTotal, 0, width);
         var px2 = px1 + w;
         var py1 = rowHeight * i;
@@ -126,8 +126,8 @@ function centerGradient(x1, y1, r1, x2, y2, r2, c1, c2) {
   var grd = ctx.createRadialGradient(cx, cy, r1, cx, cy, r2);
   grd.addColorStop(0, c1.toString());
   grd.addColorStop(1, c2.toString());
-	ctx.fillStyle = grd;
-	ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+  ctx.fillStyle = grd;
+  ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
 }
 
 function mouseReleased() {

diff --git a/01_P/P_2_0_01/sketch.js b/01_P/P_2_0_01/sketch.js
@@ -32,15 +32,14 @@
 function setup() {
   createCanvas(550, 550);
   strokeCap(SQUARE);
-  noFill();
 }
 
 function draw() {
   background(255);
   translate(width / 2, height / 2);
 
-  var circleResolution = map(mouseY, 0, height, 2, 80);
-  var radius = mouseX - width / 2 + 0.5;
+  var circleResolution = int(map(mouseY, 0, height, 2, 80));
+  var radius = mouseX - width / 2;
   var angle = TAU / circleResolution;
 
   strokeWeight(mouseY / 20);

diff --git a/01_P/P_2_0_02/sketch.js b/01_P/P_2_0_02/sketch.js
@@ -45,7 +45,7 @@ function draw() {
     translate(width / 2, height / 2);
 
     var circleResolution = int(map(mouseY + 100, 0, height, 2, 10));
-    var radius = mouseX - width / 2 + 0.5;
+    var radius = mouseX - width / 2;
     var angle = TAU / circleResolution;
 
     beginShape();
@@ -55,6 +55,7 @@ function draw() {
       vertex(x, y);
     }
     endShape();
+
     pop();
   }
 }

diff --git a/01_P/P_2_0_03/sketch.js b/01_P/P_2_0_03/sketch.js
@@ -69,7 +69,7 @@ function keyReleased() {
   if (keyCode == DELETE || keyCode == BACKSPACE) background(0, 0, 100);
   if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
 
-  if (key == '1') strokeColor = color(0, 0, 0, 10);
+  if (key == '1') strokeColor = color(0, 10);
   if (key == '2') strokeColor = color(192, 100, 64, 10);
   if (key == '3') strokeColor = color(52, 100, 71, 10);
 }
diff --git a/01_P/P_2_1_1_04/data/module_2.svg b/01_P/P_2_1_1_04/data/module_2.svg
diff --git a/01_P/P_2_1_1_04/sketch.js b/01_P/P_2_1_1_04/sketch.js
@@ -37,9 +37,9 @@ var tileCount = 10;
 
 var tileWidth;
 var tileHeight;
-var shapeSize = 50.0;
+var shapeSize = 50;
 var newShapeSize = shapeSize;
-var shapeAngle = 0.0;
+var shapeAngle = 0;
 var maxDist;
 var currentShape;
 var shapes;
@@ -48,17 +48,18 @@ var sizeMode = 0;
 
 function preload() {
   shapes = [];
-  shapes.push(loadImage("data/module_1.svg"));
-  shapes.push(loadImage("data/module_2.svg"));
-  shapes.push(loadImage("data/module_3.svg"));
-  shapes.push(loadImage("data/module_4.svg"));
-  shapes.push(loadImage("data/module_5.svg"));
-  shapes.push(loadImage("data/module_6.svg"));
-  shapes.push(loadImage("data/module_7.svg"));
+  shapes.push(loadImage('data/module_1.svg'));
+  shapes.push(loadImage('data/module_2.svg'));
+  shapes.push(loadImage('data/module_3.svg'));
+  shapes.push(loadImage('data/module_4.svg'));
+  shapes.push(loadImage('data/module_5.svg'));
+  shapes.push(loadImage('data/module_6.svg'));
+  shapes.push(loadImage('data/module_7.svg'));
 }
 
 function setup() {
   createCanvas(600, 600);
+  imageMode(CENTER);
   // set the current shape to the first in the array
   currentShape = shapes[0];
   tileWidth = width / tileCount;

diff --git a/01_P/P_2_1_2_02/sketch.js b/01_P/P_2_1_2_02/sketch.js
@@ -71,8 +71,8 @@ function draw() {
       var posX = width / tileCount * gridX;
       var posY = height / tileCount * gridY;
 
-      var shiftX =  random(-1, 1) * mouseX / 20;
-      var shiftY =  random(-1, 1) * mouseY / 20;
+      var shiftX = random(-1, 1) * mouseX / 20;
+      var shiftY = random(-1, 1) * mouseY / 20;
 
       fill(moduleColorBackground);
       ellipse(posX + shiftX, posY + shiftY, moduleRadiusBackground, moduleRadiusBackground);
@@ -139,8 +139,8 @@ function keyReleased() {
   }
 
   if (key == '0') {
-    moduleRadiusBackground = 20;
-    moduleRadiusForeground = 10;
+    moduleRadiusBackground = 30;
+    moduleRadiusForeground = 15;
     moduleAlphaBackground = 100;
     moduleAlphaForeground = 100;
     moduleColorBackground = color(0, 0, 0, moduleAlphaBackground);

diff --git a/01_P/P_2_1_2_03/sketch.js b/01_P/P_2_1_2_03/sketch.js
@@ -29,7 +29,6 @@
 'use strict';
 
 var tileCount = 20;
-var actRandomSeed = 0;
 
 var moduleColor;
 var moduleAlpha = 180;
@@ -45,8 +44,6 @@ function setup() {
 function draw() {
   clear();
 
-  randomSeed(actRandomSeed);
-
   stroke(moduleColor);
 
   for (var gridY = 0; gridY < width; gridY += 25) {
@@ -55,16 +52,12 @@ function draw() {
       diameter = diameter / maxDistance * 40;
       push();
       translate(gridX, gridY, diameter * 5);
-      rect(0, 0, diameter, diameter);    // also nice: ellipse(...)
+      rect(0, 0, diameter, diameter); // also nice: ellipse(...)
       pop();
     }
   }
 }
 
-function mousePressed() {
-  actRandomSeed = random(100000);
-}
-
 function keyReleased() {
   if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
 }
diff --git a/01_P/P_2_1_3_01/sketch.js b/01_P/P_2_1_3_01/sketch.js
@@ -33,7 +33,7 @@
 var count = 0;
 var tileCountX = 10;
 var tileCountY = 10;
-var tileWidth  = 0;
+var tileWidth = 0;
 var tileHeight = 0;
 
 var colorStep = 15;