Permalink
Browse files

better option handling and command-line demo

  • Loading branch information...
1 parent e477477 commit adebfaee1620992651545c291b9f1771d9b5311b @substack committed Jul 29, 2011
Showing with 42 additions and 21 deletions.
  1. +11 −11 ex.js
  2. +5 −0 index.html
  3. +25 −7 index.js
  4. +1 −3 main.js
View
22 ex.js
@@ -1,15 +1,15 @@
var fs = require('fs');
var heatmap = require('./');
-var heat = heatmap(500,500);
-heat
- .addPoint(100, 100)
- .addPoint(400, 200)
- .addPoint(400, 250)
- .addPoint(410, 240)
- .addPoint(415, 240)
- .addPoint(418, 240)
- .addPoint(440, 200)
- .draw()
-;
+var heat = heatmap(500, 500, { radius : 50 });
+for (var i = 0; i < 1000; i++) {
+ var rho = Math.random() * 2 * Math.PI;
+ var z = Math.pow(Math.random(), 2) * 250;
+
+ var x = 250 + Math.cos(rho) * z;
+ var y = 250 + Math.sin(rho) * z;
+
+ heat.addPoint(x, y);
+}
+heat.draw();
fs.writeFileSync('out.png', heat.canvas.toBuffer());
View
@@ -2,6 +2,11 @@
<head>
<title>heatmap demo</title>
<script type="text/javascript" src="/browserify.js"></script>
+ <style type="text/css">
+ body {
+ background-color: black;
+ }
+ </style>
</head>
<body>
</body>
View
@@ -17,20 +17,38 @@ function createCanvas (width, height) {
}
var exports = module.exports = function (canvas) {
+ var opts = {};
+
if (typeof canvas !== 'object') {
canvas = createCanvas(arguments[0], arguments[1]);
+ opts = arguments[2] || {};
+ }
+ else if (!canvas) {
+ canvas = createCanvas(500, 500);
+ }
+ else if (Object.getPrototypeOf(canvas) === Object.prototype) {
+ opts = canvas;
+ if (opts.canvas) {
+ canvas = opts.canvas;
+ }
+ else if (opts.width && opts.height) {
+ canvas = createCanvas(opts.width, opts.height);
+ }
}
- return new Heat(canvas)
+ return new Heat(canvas, opts)
};
-function Heat (canvas) {
+function Heat (canvas, opts) {
+ if (!opts) opts = {};
+
this.canvas = canvas;
this.alphaCanvas = createCanvas(canvas.width, canvas.height);
+ this.radius = opts.radius || 20;
}
-Heat.prototype.addPoint = function (x, y) {
+Heat.prototype.addPoint = function (x, y, radius) {
var ctx = this.alphaCanvas.getContext('2d');
- var radius = 20;
+ if (!radius) radius = this.radius;
var g = ctx.createRadialGradient(x, y, 0, x, y, radius);
var a = 1 / 10;
@@ -60,16 +78,16 @@ Heat.prototype.draw = function () {
heat.data[i] = rgb[0];
heat.data[i+1] = rgb[1];
heat.data[i+2] = rgb[2];
- heat.data[i+3] = 255;
+ heat.data[i+3] = v;
}
}
- this.clear();
+ this.clearCanvas();
this.canvas.getContext('2d').putImageData(heat, 0, 0);
return this;
};
-Heat.prototype.clear = function () {
+Heat.prototype.clearCanvas = function () {
var ctx = this.canvas.getContext('2d');
ctx.fillStyle = null;
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
View
@@ -2,16 +2,14 @@ var $ = require('jquery-browserify');
var heatmap = require('./');
$(window).ready(function () {
- $(document.body).css('background-color', 'black');
-
var canvas = $('<canvas>').attr({
width : 500,
height : 500
}).appendTo(document.body);
var heat = heatmap(canvas.get(0));
- for (var i = 0; i < 1000; i++) {
+ for (var i = 0; i < 5000; i++) {
var rho = Math.random() * 2 * Math.PI;
var z = Math.pow(Math.random(), 2) * 250;

0 comments on commit adebfae

Please sign in to comment.