Permalink
Browse files

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.
  • Loading branch information...
1 parent 1a9d8d9 commit e910f17d58a47056ce940c24960d21bce8eff77a mpd committed Jul 27, 2010
Showing with 63 additions and 23 deletions.
  1. +4 −14 heatmap.html
  2. +1 −7 heatmap.js
  3. +58 −2 render_worker.js
View
@@ -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>
View
@@ -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) {
View
@@ -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
*/

0 comments on commit e910f17

Please sign in to comment.