testling - automated browser tests
browserling - interactive browser testing
commit ea304843bf73913163e548f43fea1aff20b2eca0
Author: James Halliday
Date: Fri Jul 29 16:12:58 2011 +0000

Introducing node-heatmap, a nifty node.js module for making pretty heatmaps.

You can even use node-heatmap in the browser with browserify.

Here's an example of using heatmap in node with some random values biased towards the center of the canvas:

var heatmap = require('heatmap');

var heat = heatmap(500, 500, { radius : 30 });
for (var i = 0; i < 5000; i++) {
    var rho = Math.random() * 2 * Math.PI;
    var z = Math.pow(Math.random(), 2) * 200;

    var x = 250 + Math.cos(rho) * z;
    var y = 250 + Math.sin(rho) * z;

    heat.addPoint(x, y);
}
heat.draw();

var fs = require('fs');
fs.writeFileSync('blob.png', heat.canvas.toBuffer());

When the example calls .addPoint(x,y), heatmap draws a rectangle with a radial gradient and outwardly diminishing alpha mask so that the alpha values can pile up as nearby points are added. With Canvas this is surprisingly easy to do:

Heat.prototype.addPoint = function (x, y, radius) {
    var ctx = this.alphaCanvas.getContext('2d');

    var g = ctx.createRadialGradient(x, y, 0, x, y, radius);
    var a = 1 / 10;

    g.addColorStop(0, 'rgba(255,255,255,' + a + ')');
    g.addColorStop(1, 'rgba(255,255,255,0)');

    ctx.fillStyle = g;
    ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
};

I got the idea to use a secondary canvas's alpha channel with radial gradients from heatmap.js, which is yet another heatmap module which may be of interest.

Later when it comes time to .draw() onto the primary canvas, I just use color-convert to convert an HSL coordinate to rgb. HSL is super neat because the hue is just an angle, so a loop of i += 30 from 0 to 360 degrees hits all the rainbow colors along the way. All .draw() needs to do is map the composite alpha value as the HSL hue at every pixel onto the RGB of the primary canvas. Easy!

And here's what the final product from the example code at the start looks like:

Radical. Check out the code on github and npm install heatmap!

Mr. Color approves of this module.

more
git clone http://substack.net/blog.git