adjusted parameters

yangsu · May 30, 2013 · 10e52c9 · 10e52c9
1 parent 92a90de
commit 10e52c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/js/canvas.js b/js/canvas.js
@@ -35,13 +35,15 @@
     return (Math.max(Math.min(x, this.width - 1), 0) + this.width * Math.max(Math.min(y, this.height - 1), 0));
   };
 
-  Canvas.prototype.drawImage = function (image, x, y) {
-    this.ctx.drawImage(image, x, y);
-    this.imageData = this.ctx.getImageData(0, 0, this.width, this.height);
-    this.imageDataBuffer = this.ctx.getImageData(0, 0, this.width, this.height);
+  Canvas.prototype.drawImage = function (image, x, y, width, height) {
+    var w = width || this.width,
+      h = height || this.height;
+    this.ctx.drawImage(image, x, y, w, h);
+    this.imageData = this.ctx.getImageData(0, 0, w, h);
+    this.imageDataBuffer = this.ctx.getImageData(0, 0, w, h);
     this.subPixels = this.imageData.data;
     this.subPixelsBuffer = this.imageDataBuffer.data;
-    this.pixels = new Array(this.width * this.height);
+    this.pixels = new Array(w * h);
 
     this.computeOriginalPixels();
   };

diff --git a/js/mosaic.js b/js/mosaic.js
@@ -4,7 +4,7 @@
 var
 //Constants
   gTotalCount = 0,
-  gSize = 256,
+  gSize = 100,
   gSizeSQ = gSize * gSize,
   $imgContainer = $('#imgContainer'),
   $state = $('#state'),
@@ -67,7 +67,7 @@ var generateNextImage = function () {
 
 $('#pixelate').click(function () {
   var start = Date.now();
-  var s = 8,
+  var s = 5,
     w = s,
     h = s;
   var regions = gCanvas.regions(w, h),
@@ -111,8 +111,9 @@ $('#pixelate').click(function () {
   // gCanvas.paintRegions(regions, w, h);
   $timer.html(Date.now() - start);
 });
-$('#next').click(function () { generateNextImage(); });
 
+$('#next').click(function () { generateNextImage(); });
+$('#reset').click(function () { gCanvas.reset(); });
 
 $(document).ready(function () {
   var counter = 0,
@@ -130,7 +131,7 @@ $(document).ready(function () {
     var i, filename, result, img;
     for (i = data.length - 1; i >= 0; i -= 1) {
       filename = data[i].image.match(/(s\d{2,3}[a-zA-Z0-9\-_.]+)/)[0];
-      data[i].image = 'data/icons/' + filename.replace(/(s\d{2,3})/, 's' + gSize);
+      data[i].image = 'data/icons/' + filename.replace(/(s\d{2,3})/, 's' + 256 || gSize);
       data[i].number = counter++;
       img = $(gImgTemplate(_.extend(data[i], { width: gSize, height: gSize }))).load(checkLoaded).error(checkLoaded);
       gImageMap[data[i].image] = img[0];
@@ -140,7 +141,7 @@ $(document).ready(function () {
     var c = 0;
     _.each(data, function (category, key) {
       c += 1;
-      if (c > 0) {
+      if (c > 5) {
         return;
       }
       gTotalCount += _.chain(category).pluck('image').compact().value().length;

diff --git a/mosaic.html b/mosaic.html
@@ -28,7 +28,7 @@
   <div role="main" id="content">
     <div id="imgContainer" class="container"></div>
     <div id="canvasContainer" class="container">
-      <canvas id="canvas" width="256" height="256"></canvas>
+      <canvas id="canvas" width="100" height="100"></canvas>
     </div>
   </div>
   <footer>