Refactor color sampling and processing

5 files changed, 69 insertions, 47 deletions

diff --git a/client/colors.less b/client/colors.less
index e7f1fc5..83e9006 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -123,6 +123,10 @@ body {
             height: 54px;
             width: 54px;
           }
+          canvas {
+            width: 54px;
+            height: 54px;
+          }
         }
       }
     }
diff --git a/client/effects.js b/client/effects.js
index 9e095da..f98d798 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -1,66 +1,74 @@
 Effects = (function() {
   function pixelate(id) {
     var canvas = document.getElementById('canvas-' + id);
-    paper.setup(canvas);
+    var p = new paper.PaperScope();
+    p.setup(canvas);
 
     var raster = new paper.Raster('img-' + id);
     raster.visible = false;
     var gridSize = 6;
     var gridDim = 9;
-    var colors = [];
+    var cols = [];
 
-    raster.size = new paper.Size(gridDim, gridDim);
+    raster.size = new paper.Size(153, 153); // hard coded workaround to round values
+    raster.position = p.view.center;
 
-    for (var y = 0; y < raster.height; y++) {
-      for(var x = 0; x < raster.width; x++) {
-        var color = raster.getPixel(x, y);
-        colors.push(
-          Math.round(256 * color.red),
-          Math.round(256 * color.green),
-          Math.round(256 * color.blue),
-          1 // alpha
-        );
-        var rec = new paper.Path.Rectangle({
-          point: [x * gridSize, y * gridSize],
-          size: [gridSize, gridSize],
-          strokeColor: color,
-          fillColor: color
-        });
+    raster.on('load', function() {
+      var h = Math.round(raster.height / gridDim);
+      var w = Math.round(raster.width / gridDim);
+
+      for (var y = 0; y < gridDim; y++) {
+        for(var x = 0; x < gridDim; x++) {
+
+          var color = raster.getAverageColor(new paper.Path.Rectangle({
+            point: [w*x, h*y],
+            size: [w, h]
+          }));
+
+          // console.log(w, h, x, y, color.red, color.green, color.blue);
+
+          cols.push(
+            Math.round(256 * color.red),
+            Math.round(256 * color.green),
+            Math.round(256 * color.blue),
+            1 // alpha
+          );
+          var rec = new paper.Path.Rectangle({
+            point: [x * gridSize, y * gridSize],
+            size: [gridSize, gridSize],
+            strokeColor: color,
+            fillColor: color
+          });
+        }
       }
-    }
 
-    paper.view.draw();
+      p.view.draw();
 
-    // quantize now
-    var quant = new RgbQuant({
-      colors: 2,
-      minHueCols: 2
-    });
-    quant.sample(colors);
-    var palette = quant.palette(true);
-    var newcolors = quant.reduce(colors);
+      cols = new Uint8Array(cols);
 
-    var newcolors2 = [];
-    for (var x=0; x < gridDim * gridDim; x++) {
-      newcolors2.push([newcolors[(x*4)], newcolors[(x*4)+1], newcolors[(x*4)+2]]);
-      // skip dummy alpha value (x*4)+3
-    }
+      var quant = new RgbQuant({
+        colors: 2,
+        minHueCols: 16
+      });
+      quant.sample(cols);
+      var palette = quant.palette(true);
+      var newcolors = quant.reduce(cols);
 
-    // two primary colors
-    var pc1 = new paper.Color(palette[0][0] / 256, palette[0][1] / 256, palette[0][2] / 256);
-    var pc2 = new paper.Color(palette[1][0] / 256, palette[1][1] / 256, palette[1][2] / 256);
+      var newcolors2 = [];
+      for (var x=0; x < gridDim * gridDim; x++) {
+        newcolors2.push([newcolors[(x*4)], newcolors[(x*4)+1], newcolors[(x*4)+2]]);
+        // skip dummy alpha value (x*4)+3
+      }
 
-    // save for later
-    Session.set(id + ':pc1', pc1);
-    Session.set(id + ':pc2', pc2);
-    Session.set(id + ':colors', colors);
-    Session.set(id + ':newcolors', newcolors2);
-    console.log(newcolors2);
+      Session.set(id + ':colors', cols);
+      Session.set(id + ':newcolors', newcolors2);
+    });
   }
 
   function colorize(id) {
     var canvas = document.getElementById('canvas-' + id);
-    paper.setup(canvas);
+    var p = new paper.PaperScope();
+    p.setup(canvas);
 
     // params
     var gridSize = 6;
@@ -71,8 +79,6 @@ Effects = (function() {
     var pc2 = new paper.Color(Session.get(id + ':pc2'));
     var colors = Session.get(id + ':newcolors');
 
-    console.log(colors);
-
     // sample each color, diff and color new pixels
     for (var y = 0; y < gridDim; y++) {
       for(var x = 0; x < gridDim; x++) {
@@ -90,7 +96,7 @@ Effects = (function() {
       }
     }
 
-    paper.view.draw();
+    p.view.draw();
   }
 
   return {
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 7a8f8c5..2bdc53a 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -16,6 +16,6 @@
   <div class="photo">
     <div class="title">{{date}}</div>
     <img id="img-{{id}}" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous">
-    <canvas id="canvas-{{id}}" style="display: none;"></canvas>
+    <canvas id="canvas-{{id}}" style="height: 150px; width: 150px;"></canvas>
   </div>
 </template>
diff --git a/client/rgbquant.js b/lib/rgbquant.js
index 953e6f4..953e6f4 100644
--- a/client/rgbquant.js
+++ b/lib/rgbquant.js
diff --git a/server/methods.js b/server/methods.js
index d4cbaec..967e28f 100644
--- a/server/methods.js
+++ b/server/methods.js
@@ -8,5 +8,17 @@ Meteor.methods({
         'max_timestamp': Math.round(Date.UTC(year, month) / 1000),
       }
     });
+  },
+  reduceColors: function (cols) {
+    // console.log('input', cols.slice(0,8));
+    var quant = new RgbQuant({
+      colors: 2,
+      minHueCols: 2
+    });
+    quant.sample(cols);
+    var palette = quant.palette(true);
+    console.log('palette', palette);
+    var newcolors = quant.reduce(cols);
+    return newcolors;
   }
 });