Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

instead of doing the gaussian blur ourselves, we will use an svg filt…

…er instead, which makes this much, much faster.
  • Loading branch information...
commit 1a9d8d925ef584d6558dd058a92fc8b24a5650f4 1 parent 2d35e93
mpd authored
Showing with 23 additions and 63 deletions.
  1. +14 −4 heatmap.html
  2. +7 −1 heatmap.js
  3. +2 −58 render_worker.js
View
18 heatmap.html
@@ -1,11 +1,15 @@
<!doctype html>
<html>
- <head><title>heatmap</title></head>
-
+ <head>
+ <title>heatmap</title>
+ <style>
+ .blurred { filter: url("#fuzzy"); }
+ </style>
+ </head>
<body>
<div style="position: relative; display: inline-block;">
<img id="trackme" src="img.jpg" />
- <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>
+ <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>
</div>
<div style="display: inline-block;">
<textarea id="data-output" cols=40 rows=20>Data Dumps Here</textarea>
@@ -13,7 +17,7 @@
<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 (faster)</button>
+ <button type="button" class="render-button" id="do-render-without-smoothing">render without smoothing</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>
@@ -27,5 +31,11 @@
<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
8 heatmap.js
@@ -216,7 +216,13 @@ $(function () {
$('button').attr('disabled', true);
$('#trackme').addClass('disabled');
renderStartTime = new Date().getTime();
- worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight, smoothing: this.id === 'do-render'}));
+ if (this.id === 'do-render') {
+ $('#overlay').addClass('blurred');
+ } else {
+ $('#overlay').removeClass('blurred');
+ }
+
+ worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight}));
});
$('#clear-data').click(function (e) {
View
60 render_worker.js
@@ -1,68 +1,12 @@
(function () {
- var smoothHeat, normalizeHeat, canvasWidth, canvasHeight;
+ var normalizeHeat;
onmessage = function (event) {
var data = JSON.parse(event.data), result;
- canvasWidth = data.width;
- canvasHeight = data.height;
- result = data.smoothing ? normalizeHeat(smoothHeat(data.heat)) : normalizeHeat(data.heat);
+ result = 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
*/
Please sign in to comment.
Something went wrong with that request. Please try again.