Final matrix almost works

4 files changed, 60 insertions, 4 deletions

diff --git a/client/button.js b/client/button.js
index 62e27e3..8741666 100644
--- a/client/button.js
+++ b/client/button.js
@@ -77,6 +77,16 @@ function animate() {
     });
   }, delay + 2000);
 
+  delay += 400 * photos.length;
+  delay += 2000;
+
+  _.delay(function() {
+    $('h4.step').text('(Step 5)');
+    $('div.photos').hide();
+    $('div.final').show()
+
+    Effects.drawFinal();
+  }, delay + 2000);
 }
 
 Template.layout.events({
diff --git a/client/colors.less b/client/colors.less
index 031ad52..6699df8 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -147,6 +147,9 @@ body {
           }
         }
       }
+      div.final {
+        text-align: center;
+      }
     }
   }
 }
diff --git a/client/effects.js b/client/effects.js
index d2eeb74..56adef7 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -36,7 +36,7 @@ Effects = (function() {
           var rec = new paper.Path.Rectangle({
             point: [x * gridSize, y * gridSize],
             size: [gridSize, gridSize],
-            strokeColor: color,
+            strokeWidth: 0,
             fillColor: color
           });
         }
@@ -96,7 +96,7 @@ Effects = (function() {
         var rec = new paper.Path.Rectangle({
           point: [x * gridSize, y * gridSize],
           size: [gridSize, gridSize],
-          strokeColor: nc,
+          strokeWidth: 0,
           fillColor: nc
         });
       }
@@ -171,6 +171,8 @@ Effects = (function() {
       flipped = true;
     }
 
+    var finalcols = [];
+
     for (var y = 0; y < gridDim; y++) {
       for(var x = 0; x < gridDim; x++) {
         var c = cols[(y * gridDim) + x];
@@ -182,23 +184,61 @@ Effects = (function() {
           nc = flipped ? g_p1 : g_p2;
         }
 
+        finalcols.push(nc);
+
         var rec = new paper.Path.Rectangle({
           point: [x * gridSize, y * gridSize],
           size: [gridSize, gridSize],
-          strokeColor: nc,
+          strokeWidth: 0,
           fillColor: nc
         });
       }
     }
 
     p.view.draw();
+
+    Session.set(id + ':finalcols', finalcols);
+  }
+
+  function drawFinal() {
+    var canvas = document.getElementById('canvas-final');
+    var p = new paper.PaperScope();
+    p.setup(canvas);
+
+    var gridSize = 35;
+    var gridDim = 9;
+
+    _.each(Session.get('photos'), function (x) {
+      var id = x.id;
+      _.delay(function () {
+        var cols = Session.get(id + ':finalcols');
+        for (var y = 0; y < gridDim; y++) {
+          for(var x = 0; x < gridDim; x++) {
+            var c = cols[(y * gridDim) + x];
+
+            var nc = new paper.Color(c[0], c[1], c[2], 0.5);
+
+            console.log(x, y, nc);
+
+            var rec = new paper.Path.Rectangle({
+              point: [x * gridSize, y * gridSize],
+              size: [gridSize, gridSize],
+              strokeWidth: 0,
+              fillColor: nc
+            });
+          }
+        }
+        p.view.draw();
+      }, 1000)
+    })
   }
 
   return {
     pixelate: pixelate,
     colorize: colorize,
     average: average,
-    averageColor: averageColor
+    averageColor: averageColor,
+    drawFinal: drawFinal
   }
 
 })();
diff --git a/client/templates/photos.html b/client/templates/photos.html
index e844b44..d5a1286 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -22,6 +22,9 @@
         <h5>#AABBCC</h5>
       </div>
     </div>
+    <div class="final" style="display: none">
+      <canvas id="canvas-final" style="height: 315px; width: 315px;"></canvas>
+    </div>
     <canvas id="canvas-all" style="display: none; height: 150px; width: 150px;"></canvas>
   </div>
 </template>