Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

make masking code generic, add click mask for demonstration.

  • Loading branch information...
commit 92512f6be791c85879c56be4d3bf7442010c1519 1 parent a71006a
mpd authored
Showing with 46 additions and 24 deletions.
  1. +46 −24 heatmap.js
View
70 heatmap.js
@@ -8,7 +8,9 @@ $(function () {
renderHeat,
toHue,
hueToRGB,
- heatMask;
+ heatMask,
+ clickMask,
+ applyMask;
// mask we apply to a point that is moused over.
heatMask = [
@@ -17,40 +19,60 @@ $(function () {
[0, 1, 0]
];
+ // mask we apply to a point that is clicked.
+ clickMask = [
+ [0, 1, 1, 1, 0],
+ [1, 3, 3, 3, 1],
+ [1, 3, 5, 3, 1],
+ [1, 3, 3, 3, 1],
+ [0, 1, 1, 1, 0]
+ ];
+
canvas.attr({
width: $('#result').width(),
height: $('#result').height()
});
-
- (function () {
- var key, eventX, eventY, i, j, initialI, initialJ,
- canvasWidth = canvas.attr('width'),
- canvasHeight = canvas.attr('height');
- $('#trackme').mousemove(function (event) {
- eventX = event.pageX - this.offsetLeft;
- eventY = event.pageY - this.offsetTop;
+ applyMask = function (mask, eventX, eventY) {
+ var key, i, j, initialI, initialJ,
+ canvasWidth = canvas.attr('width'),
+ canvasHeight = canvas.attr('height'),
+ maskSeg;
- initialI = eventX - 1;
- initialJ = eventY - 1;
+ // mask segment size: (length - 1) / 2, length should be odd
+ maskSeg = Math.floor(mask.length / 2);
- for (i = initialI; i <= eventX + 1; i += 1) {
- if (i < 0 || i >= canvasWidth) {
- continue;
- }
+ initialI = eventX - maskSeg;
+ initialJ = eventY - maskSeg;
- for (j = initialJ; j <= eventY + 1; j += 1) {
- if (j < 0 || j >= canvasHeight) {
- continue;
- }
+ for (i = initialI; i <= eventX + maskSeg; i += 1) {
+ if (i < 0 || i >= canvasWidth) {
+ continue;
+ }
- key = i + "," + j;
- heat[key] = heat[key] || 0;
- heat[key] += heatMask[i - initialI][j - initialJ];
+ for (j = initialJ; j <= eventY + maskSeg; j += 1) {
+ if (j < 0 || j >= canvasHeight) {
+ continue;
}
+
+ key = i + "," + j;
+ heat[key] = heat[key] || 0;
+ heat[key] += mask[i - initialI][j - initialJ];
}
- });
- }());
+ }
+ };
+
+ $('#trackme').click(function (event) {
+ var eventX, eventY;
+ eventX = event.pageX - this.offsetLeft;
+ eventY = event.pageY - this.offsetTop;
+ applyMask(clickMask, eventX, eventY);
+ }).mousemove(function (event) {
+ var eventX, eventY;
+ eventX = event.pageX - this.offsetLeft;
+ eventY = event.pageY - this.offsetTop;
+ applyMask(heatMask, eventX, eventY);
+ });
/*
* normalize to a 0-255 range
Please sign in to comment.
Something went wrong with that request. Please try again.