Average color is working

3 files changed, 41 insertions, 2 deletions

diff --git a/client/button.js b/client/button.js
index 357faa9..370ccdb 100644
--- a/client/button.js
+++ b/client/button.js
@@ -54,6 +54,9 @@ Template.photos.events({
       Effects.colorize(x.id);
       $('#canvas-'+x.id).show()
     })
+  },
+  'click button.average': function (event) {
+    Effects.average();
   }
 })
 
diff --git a/client/effects.js b/client/effects.js
index f98d798..2496266 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -54,6 +54,11 @@ Effects = (function() {
       var palette = quant.palette(true);
       var newcolors = quant.reduce(cols);
 
+      // if (window.gb === undefined)
+      //   window.gb = [];
+      // window.gb.push(palette[0][0], palette[0][1], palette[0][2], 0.16);
+      // window.gb.push(palette[1][0], palette[1][1], palette[1][2], 0.16);
+
       var newcolors2 = [];
       for (var x=0; x < gridDim * gridDim; x++) {
         newcolors2.push([newcolors[(x*4)], newcolors[(x*4)+1], newcolors[(x*4)+2]]);
@@ -99,9 +104,38 @@ Effects = (function() {
     p.view.draw();
   }
 
+  function average() {
+    var canvas = document.getElementById('canvas-all');
+    var p = new paper.PaperScope();
+    p.setup(canvas);
+
+    var i = 0;
+    var photos = $('.instagram-photo');
+    canvas.width = 150;
+    canvas.style.width = 150;
+
+    _.each(photos, function(x) {
+      var raster = new paper.Raster(x);
+      raster.position = new paper.Size(75, 75);
+      raster.opacity = 1 / photos.length;
+    })
+
+    p.view.draw();
+
+    var quant = new RgbQuant({
+      colors: 2,
+      minHueCols: 16
+    });
+    quant.sample(canvas);
+    var palette = quant.palette(true);
+
+    console.log(palette);
+  }
+
   return {
     pixelate: pixelate,
-    colorize: colorize
+    colorize: colorize,
+    average: average
   }
 
 })();
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 2d841e5..98f6d99 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -4,18 +4,20 @@
     <h2>Processing...</h2>
     <button class="pixelate btn btn-default">Pixelate</button>
     <button class="color btn btn-default">Color</button>
+    <button class="average btn btn-default">Average</button>
     <div class="photos">
       {{#each photos}}
         {{> photo}}
       {{/each}}
     </div>
+    <canvas id="canvas-all" style="height: 150px; width: 150px;"></canvas>
   </div>
 </template>
 
 <template name="photo">
   <div class="photo">
     <div class="title">{{date}}</div>
-    <img id="img-{{id}}" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous">
+    <img id="img-{{id}}" class="instagram-photo" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous">
     <canvas id="canvas-{{id}}" style="height: 150px; width: 150px;"></canvas>
   </div>
 </template>