Skip to content

Instantly share code, notes, and snippets.

@jeroenvandijk
Created March 27, 2010 15:44
Show Gist options
  • Save jeroenvandijk/346165 to your computer and use it in GitHub Desktop.
Save jeroenvandijk/346165 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<body>
<canvas id="c" style="width:500px; height:500px; background-color: grey">
</canvas>
<script>
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
var width = 500;//canvas.width;
var height = 500;//canvas.height;
var grid = [];
function init_grid() {
for(var i = 0; i < width; i++) {
grid[i] = [];
for(var j = 0; j < height; j++) {
grid[i][j] = 0.0;
}
}
}
function assert_point_in_grid(x, y) {
if(x < 0 || x > width || y < 0 || y > height)
throw "Point (" + x + ", " + y + ") not in grid [" + width + " , " + height + "]";
}
var radius = 3;
// from http://homepages.inf.ed.ac.uk/rbf/HIPR2/gsmooth.htm
function _gaussian(x, y) {
stdev = 1;
return 1.0 / Math.sqrt(2 * Math.PI * stdev) * Math.exp(- (x*x + y*y) / (2 * stdev*stdev));
}
// from http://homepages.inf.ed.ac.uk/rbf/HIPR2/gsmooth.htm
function gaussian_grid(radius) {
var _gaussian_grid = [];
for(var x = -radius; x <= radius; x++) {
_gaussian_grid[x + radius] = [];
for(var y = -radius; y <= radius; y++) {
_gaussian_grid[x + radius][y + radius] = Math.round(127 * _gaussian(x, y));
}
}
return _gaussian_grid;
}
var radius = 2;
var _gaussian_grid = gaussian_grid(radius);
function gaussian(xi, yi) {
return _gaussian_grid[xi + radius][yi + radius];
}
var maximum = 0;
function apply_gaussian(x, y) {
for(var xi = -radius; xi <= radius; xi++) {
for(var yi = -radius; yi <= radius; yi++) {
var cell_value = grid[x + xi][y + yi] += gaussian(xi, yi);
maximum = Math.max(cell_value, maximum);
}
}
}
function add_point(x, y) {
assert_point_in_grid(x, y);
apply_gaussian(x, y)
}
function each_row(action) {
for(var y = 1; y <= height; y++) {
action(y);
}
}
function each_cell(action) {
each_row(function(y) {
for(var x = 1; x <= width; x++) {
action(x, y);
}
});
}
function print_grid() {
each_row(function(y) {
console.log(grid[y].join("\t") + "\n");
});
}
// Render grid translates our grid to the canvas. It ignores all points that have no value (=0)
// and gives a color to those who have, but this is depending on the maximum value
// TODO fix the color generation, it does not give a very smooth image
function render_grid() {
each_cell(function(x, y){
var value = grid[x - 1][y - 1];
// console.log(value);
if(value > 0) {
color = (value / maximum) * 255;
context.fillStyle = "rgba(200," + color + ", 0, 0.5)";
console.log("value : " + value + ", " + ", color " + color);
context.fillRect(x, y, 1, 1);
}
});
}
//TODO try to get a map such as heatmapapi (render grid above)
init_grid();
add_point(10, 10);
add_point(11, 11);
add_point(13, 14);
add_point(15, 15);
// add_point(53, 53);
// add_point(53, 54);
// add_point(53, 54);
// add_point(20, 20);
// add_point(40, 60);
// add_point(100, 100);
// print_grid();
render_grid();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment