cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adds heatmap functionality to renderer

Browse Source
This commit is contained in:
Francisco Dans 2015-04-29 16:20:34 +02:00
parent f3e9e2e3f2
commit bd479fc507
2 changed files with 59 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
lib/torque/renderer/ball.js
View File

@ -101,6 +101,7 @@ BallRenderer.prototype = {
if (!dataArray){
if (this.isoplethLayer) dataArray = this.isoplethLayer;
else if (this.contourLayer) dataArray = this.contourLayer;
else if (this.heatmapLayer) dataArray = this.heatmapLayer;
else dataArray = this.pointLayer;
}
if(!this.imageData) this.imageData = this.ctx.createImageData(this.width, this.height);
@ -126,13 +127,19 @@ BallRenderer.prototype = {
},
invalidate: function(full){
var reductionFactor = 10;
if(full){
for (var i = 0; i< this.pointLayer.length; i+=4){
this.pointLayer[i + 3] -= reductionFactor;
// if(!transit){
for (var i = 0, len = this.pointLayer.length; i< len; i+=4){
this.pointLayer[i + 3] -= 20;
}
// }
// else{
// this.pointLayer = new Uint8ClampedArray(this.size * 4);
// }
if(this.heatmapLayer){
this.heatmapLayer = new Uint8ClampedArray(this.size * 4);
}
if(this.contourLayer){
else if(this.contourLayer){
this.contourLayer = new Uint8ClampedArray(this.size * 4);
if(this.isoplethLayer){
this.isoplethLayer = new Uint8ClampedArray(this.size * 4);
@ -193,10 +200,10 @@ BallRenderer.prototype = {
for (var i = 0; i< this.pointLayer.length; i+=4){
if(this.pointLayer[i+3] === 0) continue;
var currentAlpha = this.pointLayer[i+3];
this.contourLayer[i+3] = gradient[currentAlpha*4+3]*2;
this.contourLayer[i+2] = gradient[255];
this.contourLayer[i+1] = gradient[255];
this.contourLayer[i+0] = gradient[255];
this.contourLayer[i+3] = gradient[currentAlpha*4+3];
this.contourLayer[i+2] = 180;
this.contourLayer[i+1] = 105;
this.contourLayer[i+0] = 255;
}
},
isopleth: function(){
@ -232,14 +239,47 @@ BallRenderer.prototype = {
}
this.isoplethLayer = iso;
},
colorize: function (pixels, gradient) {
for (var i = 3, len = pixels.length, j; i < len; i += 4) {
j = pixels[i] * 4; // get gradient color from opacity value
if (j) {
pixels[i - 3] = gradient[j];
pixels[i - 2] = gradient[j + 1];
pixels[i - 1] = gradient[j + 2];
heatmap: function (gradient){
if(!gradient) gradient = {
0.4: 'blue',
0.6: 'cyan',
0.7: 'lightgreen',
0.8: 'yellow',
1.0: 'red'
};
if(JSON.stringify(this.gradient) !== JSON.stringify(gradient)){
this.gradient = gradient;
// create a 256x1 gradient that we'll use to turn a grayscale heatmap into a colored one
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
gradientColours = ctx.createLinearGradient(0, 0, 0, 256);
canvas.width = 1;
canvas.height = 256;
for (var i in gradient) {
gradientColours.addColorStop(+i, gradient[i]);
}
ctx.fillStyle = gradientColours;
ctx.fillRect(0, 0, 1, 256);
this.gradientData = ctx.getImageData(0, 0, 1, 256).data;
}
this.colorize();
},
colorize: function () {
var alpha, grad = this.gradientData;
if(!this.heatmapLayer) this.heatmapLayer = new Uint8ClampedArray(this.size * 4);
for (var i = 0, len = this.pointLayer.length; i< len; i+=4){
alpha = this.pointLayer[i+3] * 4; // get gradient color from opacity value
if (alpha) {
this.heatmapLayer[i] = grad[alpha]; // R
this.heatmapLayer[i + 1] = grad[alpha + 1]; // G
this.heatmapLayer[i + 2] = grad[alpha + 2]; // B
this.heatmapLayer[i + 3] = alpha; // A
}
}
}

5
lib/torque/renderer/point.js
View File

@ -399,10 +399,11 @@ var ballRenderer = require('./ball.js');
flush: function(full){
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
if(!this.ballRenderer) return;
this.ballRenderer.contour(5);
// this.ballRenderer.contour(7);
// this.ballRenderer.isopleth();
this.ballRenderer.heatmap();
this.ballRenderer.draw();
this.ballRenderer.invalidate(true);
this.ballRenderer.invalidate();
}
});