Add pixelation

1 files changed, 63 insertions, 1 deletions

diff --git a/client/button.js b/client/button.js
index d298ef7..fefabaa 100644
--- a/client/button.js
+++ b/client/button.js
@@ -1,3 +1,57 @@
+function pixelateImage(id) {
+  var canvas = document.getElementById('canvas-' + id);
+  paper.setup(canvas);
+
+  var raster = new paper.Raster('img-' + id);
+  raster.visible = false;
+  var gridSize = 20;
+  var gridDim = 9;
+  var colors = [];
+
+  raster.size = new paper.Size(gridDim, gridDim);
+
+  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)
+      ]);
+      var rec = new paper.Path.Rectangle({
+        point: [x * gridSize, y * gridSize],
+        size: [gridSize, gridSize],
+        strokeColor: color,
+        fillColor: color
+      });
+      paper.view.draw();
+    }
+  }
+
+  var quant = MMCQ.quantize(colors, 2);
+  var palette = quant.palette();
+
+  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 c1 = new paper.Path.Rectangle({
+    point: [0, gridDim * gridSize],
+    size: [gridSize * gridDim / 2, 50],
+    strokeColor: pc1,
+    fillColor: pc1
+  });
+
+  var c2 = new paper.Path.Rectangle({
+    point: [gridSize * gridDim / 2, gridDim * gridSize],
+    size: [gridSize * gridDim / 2, 50],
+    strokeColor: pc2,
+    fillColor: pc2
+  });
+
+  paper.view.draw();
+}
+
+
 Template.layout.events({
   'click .logout': function (event) {
     Meteor.logout();
@@ -24,8 +78,8 @@ Template.dates.events({
         console.log('Instagram response', results.data)
         Session.set('photos', results.data.data);
       });
+      Router.go('photos');
     }
-    Router.go('photos');
     return false;
   }
 })
@@ -35,6 +89,14 @@ Template.dates.helpers({
   years: _.range(2012, 2016)
 })
 
+Template.photos.events({
+  'click button.pixelate': function (event) {
+    _.each(Session.get('photos'), function(x) {
+      pixelateImage(x.id);
+    })
+  }
+})
+
 Template.photos.helpers({
   photos: function () {
     return Session.get('photos');