From e910f17d58a47056ce940c24960d21bce8eff77a Mon Sep 17 00:00:00 2001 From: mpd Date: Tue, 27 Jul 2010 16:57:16 -0700 Subject: [PATCH] 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 1a9d8d925ef584d6558dd058a92fc8b24a5650f4. --- heatmap.html | 18 ++++----------- heatmap.js | 8 +------ render_worker.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 63 insertions(+), 23 deletions(-) diff --git a/heatmap.html b/heatmap.html index 910682b..49ba7e5 100644 --- a/heatmap.html +++ b/heatmap.html @@ -1,15 +1,11 @@ - - heatmap - - + heatmap +
- +
@@ -17,7 +13,7 @@
- + @@ -31,11 +27,5 @@ - - - - - - diff --git a/heatmap.js b/heatmap.js index 0772da1..abe3eac 100644 --- 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 index ce228a1..9b5583f 100644 --- 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 */