Refactor color sampling and processing

1 files changed, 52 insertions, 46 deletions

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 {