Permalink
Browse files

add gaussian smoothing of the heat before rendering so it looks much …

…better than before. may need to tool around with the kernel at some point. not today.
  • Loading branch information...
1 parent 79dda70 commit 3cd1400c9cf17510650d32139396d9c03c52dd18 mpd committed May 12, 2010
Showing with 58 additions and 27 deletions.
  1. +2 −2 heatmap.html
  2. +56 −25 heatmap.js
  3. BIN img.jpg
View
@@ -4,11 +4,11 @@
<body>
<div>
- <img id="trackme" src="http://i.imgur.com/T3Zox.jpg" />
+ <img id="trackme" src="img.jpg" />
</div>
<div id="result_container" style="position: relative;">
- <img id="result" src="http://i.imgur.com/T3Zox.jpg" />
+ <img id="result" src="img.jpg" />
<canvas id="overlay" style="opacity: 0.5; position: absolute; top: 0; left: 0;"></canvas>
</div>
View
@@ -55,8 +55,10 @@ $(function () {
}());
setInterval(function () {
-// renderHeat(normalizeHeat(smoothHeat(heat)));
- renderHeat(normalizeHeat(heat));
+ renderHeat(normalizeHeat(smoothHeat(heat)));
+
+ // run with no smoothing. faster, but ugly as hell.
+// renderHeat(normalizeHeat(heat));
}, 500);
// normalize to a 0-255 range
@@ -84,29 +86,47 @@ $(function () {
return normalizedHeat;
};
- /*
- * smooth out the edges with a gaussian blur
- * kernel taken from http://www.bv2.co.uk/?p=511
- * so I don't have to tool around with that right now.
-
- 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
- */
- smoothHeat = function (heat) {
- var smoothedHeat = {}, x, y, splitKey;
-
- $.each(heat, function (key, value) {
- splitKey = key.split(',');
- x = splitKey[0];
- y = splitKey[1];
- });
-
- return smoothedHeat;
-
- };
+
+ (function () {
+ var 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 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) {
+ var smoothedHeat = {}, x, y, splitKey;
+
+ $.each(heat, function (key, value) {
+ var i, j, result = 0, heatVal;
+ splitKey = key.split(',');
+ x = parseInt(splitKey[0], 10);
+ y = parseInt(splitKey[1], 10);
+
+ // assume a 5x5 gaussian kernel here
+ for (i = x - 2; i <= x + 2; i += 1) {
+ for (j = y - 2; j <= y + 2; j += 1) {
+ 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.
+ smoothedHeat[key] = value + ((value * result) / 159);
+ });
+
+ return smoothedHeat;
+ };
+ }());
renderHeat = function (heat) {
var x, y, splitKey, rgb;
@@ -123,7 +143,18 @@ $(function () {
});
};
+ window.renderHeat = function () {
+ renderHeat(normalizeHeat(smoothHeat(heat)));
+ };
+
+ window.renderHeat2 = function () {
+ renderHeat(normalizeHeat(heat));
+ };
+
// take normalized heat value from above and
+ // convert it to a 0 (red, hot) - 240 (blue, cold) range.
+ // we assume the passed normalized values are
+ // 0 (cold) - 255 (hot)
toHue = function (value) {
var hue;
if (cache.toHue[value]) {
View
BIN img.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3cd1400

Please sign in to comment.