Revert "instead of doing the gaussian blur ourselves, we will use an …

…svg filter instead, which makes this much, much faster." Have to revert because only FF is showing any success with this method. suck. Still going to do this w/ FF though. So damn fast. This reverts commit 1a9d8d9.
xxx · Jul 27, 2010 · e910f17 · e910f17
1 parent 1a9d8d9
commit e910f17
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 23 deletions.
diff --git a/heatmap.html b/heatmap.html
@@ -1,23 +1,19 @@
 <!doctype html>
 <html>
-  <head>
-    <title>heatmap</title>
-    <style>
-      .blurred { filter: url("#fuzzy"); }
-    </style>
-  </head>
+  <head><title>heatmap</title></head>
+
   <body>
     <div style="position: relative; display: inline-block;">
       <img id="trackme" src="img.jpg" />
-      <canvas class="blurred" id="overlay" style="position: absolute; top: 0; left: 0; display: none;">This requires canvas support, which your browser does not have.</canvas>
+      <canvas id="overlay" style="opacity: 0.5; position: absolute; top: 0; left: 0; display: none;">This requires canvas support, which your browser does not have.</canvas>
     </div>
     <div style="display: inline-block;">
       <textarea id="data-output" cols=40 rows=20>Data Dumps Here</textarea>
     </div>
 
     <div>
     <button type="button" class="render-button" id="do-render">render with smoothing</button>
-    <button type="button" class="render-button" id="do-render-without-smoothing">render without smoothing</button>
+    <button type="button" class="render-button" id="do-render-without-smoothing">render without smoothing (faster)</button>
     <button type="button" id="collect-data" disabled="disabled">collect data</button>
     <button type="button" id="import-data">import data</button>
     <button type="button" id="dump-data">dump data</button>
@@ -31,11 +27,5 @@
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="heatmap.js"></script>
-    <svg>
-      <defs>
-        <filter id="fuzzy"><feGaussianBlur stdDeviation="1.0" ></feGaussianBlur></filter>
-      </defs>
-    </svg>
-
   </body>
 </html>
diff --git a/heatmap.js b/heatmap.js
@@ -216,13 +216,7 @@ $(function () {
     $('button').attr('disabled', true);
     $('#trackme').addClass('disabled');
     renderStartTime = new Date().getTime();
-    if (this.id === 'do-render') {
-      $('#overlay').addClass('blurred');
-    } else {
-      $('#overlay').removeClass('blurred');
-    }
-
-    worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight}));
+    worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight, smoothing: this.id === 'do-render'}));
   });
 
   $('#clear-data').click(function (e) {

diff --git a/render_worker.js b/render_worker.js
@@ -1,12 +1,68 @@
 (function () {
-  var normalizeHeat;
+  var smoothHeat, normalizeHeat, canvasWidth, canvasHeight;
 
   onmessage = function (event) {
     var data = JSON.parse(event.data), result;
-    result = normalizeHeat(data.heat);
+    canvasWidth = data.width;
+    canvasHeight = data.height;
+    result = data.smoothing ? normalizeHeat(smoothHeat(data.heat)) : normalizeHeat(data.heat);
     postMessage(JSON.stringify({heat: result}));
   };
 
+
+  (function () {
+    var gaussian, smoothedHeat, x, y, splitKey,
+        i, j, result, heatVal;
+
+    gaussian = [
+      [2,  4,  5,  4, 2],
+      [4,  9, 12,  9, 4],
+      [5, 12, 15, 12, 5],
+      [4,  9, 12,  9, 4],
+      [2,  4,  5,  4, 2]
+    ];
+
+    /*
+     * smooth out the edges with a (pseudo) gaussian blur
+     * kernel taken from http://www.bv2.co.uk/?p=511
+     * so I don't have to tool around with that right now.
+     * replace with your own at your leisure.
+     */
+    smoothHeat = function (heat) {
+      smoothedHeat = {};
+
+      for (x = 0; x < canvasWidth; x += 1) {
+        for (y = 0; y < canvasHeight; y += 1) {
+          result = 0;
+          // assume a 5x5 gaussian kernel here
+          for (i = x - 2; i <= x + 2; i += 1) {
+            if (i < 0 || i >= canvasWidth) {
+              continue;
+            }
+
+            for (j = y - 2; j <= y + 2; j += 1) {
+              if (j < 0 || j >= canvasHeight) {
+                continue;
+              }
+
+              heatVal = heat[i + "," + j] || 0;
+              result += heatVal * gaussian[i - (x - 2)][j - (y - 2)];
+            }
+          }
+
+          // multiply by reciprocal of sum of the gaussian kernel
+          // or divide by sum, as we do here.
+          if (result > 0) {
+            result /= 159;
+            smoothedHeat[x + "," + y] = result;
+          }
+        }
+      }
+
+      return smoothedHeat;
+    };
+  }());
+
   /*
    * normalize to a 0-255 range
    */