Average is working

2 files changed, 62 insertions, 3 deletions

diff --git a/client/effects.js b/client/effects.js
index 2496266..2eb9fb6 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -66,6 +66,7 @@ Effects = (function() {
       }
 
       Session.set(id + ':colors', cols);
+      Session.set(id + ':palette', palette);
       Session.set(id + ':newcolors', newcolors2);
     });
   }
@@ -127,9 +128,67 @@ Effects = (function() {
       minHueCols: 16
     });
     quant.sample(canvas);
-    var palette = quant.palette(true);
+    var g_palette = quant.palette(true);
+    var g_p1 = new paper.Color(g_palette[0][0] / 256, g_palette[0][1] / 256, g_palette[0][2] / 256);
+    var g_p2 = new paper.Color(g_palette[1][0] / 256, g_palette[1][1] / 256, g_palette[1][2] / 256);
+
+    console.log(g_palette);
+
+    _.each(photos, function(x) {
+      var id = x.id.split('-')[1];
+      var cols = Session.get(id + ':newcolors');
+      var palette = Session.get(id + ':palette');
+
+      var canvas = document.getElementById('canvas-' + id);
+      var p = new paper.PaperScope();
+      p.setup(canvas);
+
+      // params
+      var gridSize = 6;
+      var gridDim = 9;
+
+      var p1 = new paper.Color(palette[0][0] / 256, palette[0][1] / 256, palette[0][2] / 256);
+      var p2 = new paper.Color(palette[1][0] / 256, palette[1][1] / 256, palette[1][2] / 256);
+
+      var d1 = Math.abs(p1.red - g_p1.red) + Math.abs(p1.green - g_p1.green) + Math.abs(p1.blue - g_p1.blue);
+      var d2 = Math.abs(p2.red - g_p1.red) + Math.abs(p2.green - g_p1.green) + Math.abs(p2.blue - g_p1.blue);
+      var d3 = Math.abs(p1.red - g_p2.red) + Math.abs(p1.green - g_p2.green) + Math.abs(p1.blue - g_p2.blue);
+      var d4 = Math.abs(p2.red - g_p2.red) + Math.abs(p2.green - g_p2.green) + Math.abs(p2.blue - g_p2.blue);
+
+
+      var flipped = false;
+
+      if (d1+d4 > d2+d3) {
+        var t = p2;
+        p2 = p1;
+        p1 = t;
+        flipped = true;
+      }
+
+      for (var y = 0; y < gridDim; y++) {
+        for(var x = 0; x < gridDim; x++) {
+          var c = cols[(y * gridDim) + x];
+
+          var nc;
+          if (c[0] == palette[0][0] && c[1] == palette[0][1] && palette[0][2]) {
+            nc = flipped ? g_p2 : g_p1;
+          } else {
+            nc = flipped ? g_p1 : g_p2;
+          }
+
+          var rec = new paper.Path.Rectangle({
+            point: [x * gridSize, y * gridSize],
+            size: [gridSize, gridSize],
+            strokeColor: nc,
+            fillColor: nc
+          });
+        }
+      }
+
+      p.view.draw();
+
+    });
 
-    console.log(palette);
   }
 
   return {
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 98f6d99..6c77de9 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -10,7 +10,7 @@
         {{> photo}}
       {{/each}}
     </div>
-    <canvas id="canvas-all" style="height: 150px; width: 150px;"></canvas>
+    <canvas id="canvas-all" style="display: none; height: 150px; width: 150px;"></canvas>
   </div>
 </template>