adds isoline rendering in point renderer

This commit is contained in:
Francisco Dans 2015-08-13 22:19:33 +02:00
parent 4ee1f38499
commit 471cd3ec19

View File

@ -275,22 +275,43 @@ var contour = require('./contour');
var activePixels = tile.timeCount[key];
var anchor = this.options.resolution/2;
// var isolines = true;
// if (isolines){
// var tileContour = this._contour(tile);
// ctx.beginPath();
// ctx.strokeStyle = 'blue';
// var initialX = tileContour[0][0] * this.options.resolution + anchor;
// var initialY = tileContour[0][1] * this.options.resolution + anchor;
// ctx.moveTo(initialX, initialY);
// for (var i = 1; i < tileContour.length; i++){
// var x = tileContour[i][0] * this.options.resolution + anchor;
// var y = tileContour[i][1] * this.options.resolution + anchor;
// ctx.lineTo(x, y);
// ctx.stroke();
// }
// }
// if (activePixels) {
if (activePixels) {
/*
Torque Isolines
To be moved somewhere else (ideally something link isolines.js within /renderer/)
*/
var isolines = true;
if (isolines) {
var grid = this._gridData(tile);
var cellsX = grid[0].length-1;
var cellsY = grid.length-1;
var contourValues = [0, 2, 4, 8, 16];
var res = this.options.resolution;
for(var c = 0; c < contourValues.length; c++){
for (var y = 0; y < cellsY; y++){
for (var x = 0; x < cellsX; x++){
var currentCell = [grid[y][x], grid[y][x+1], grid[y+1][x+1], grid[y+1][x]];
var pipe = this._getPipe(currentCell, contourValues[c]);
if (pipe){
ctx.strokeStyle = "#ffffff"
ctx.beginPath();
ctx.moveTo(x * res + anchor + res * pipe[0][0], pos.y + y * res + anchor + res * pipe[0][1]);
ctx.lineTo(x * res + anchor + res * pipe[1][0], pos.y + y * res + anchor + res * pipe[1][1]);
ctx.stroke();
if (pipe.length === 4){
ctx.beginPath();
ctx.moveTo(x * res + anchor + res * pipe[2][0], pos.y + y * res + anchor + res * pipe[2][1]);
ctx.lineTo(x * res + anchor + res * pipe[3][0], pos.y + y * res + anchor + res * pipe[3][1]);
ctx.stroke();
}
}
}
}
}
}
// var pixelIndex = tile.timeIndex[key];
// for(var p = 0; p < activePixels; ++p) {
// var posIdx = tile.renderDataPos[pixelIndex + p];
@ -307,16 +328,43 @@ var contour = require('./contour');
// }
// }
// }
// }
}
prof.end(true);
},
_getPipe: function(cell, contour){
var parsedCell = cell.map(function(cornerValue){
if (cornerValue >= contour){
return "1";
}
return "0";
}).join("");
var type = parseInt(parsedCell, 2);
var N = [this._lerp(cell[1], cell[0], contour), 0],
S = [this._lerp(cell[2], cell[3], contour), 1],
E = [1, this._lerp(cell[2], cell[1], contour)],
W = [0, this._lerp(cell[3], cell[0], contour)]
// Blank
if (type === 0 || type === 15) return null;
// W - S
if (type === 1 || type === 14) return [W, S]
// S - E
if (type === 2 || type === 13) return [S, E]
// W - E
if (type === 3 || type === 12) return [W, E]
// N - E
if (type === 4 || type === 11) return [N, E]
// N - S
if (type === 6 || type === 9) return [N, S]
// W - N
if (type === 7 || type === 8) return [W, N]
// W - N / S - E
if (type === 5) return [W, N, S, E]
// W - S / N - E
if (type === 10) return [W, S, N, E]
},
_contour: function(tile, x, y){
var tileGrid = this._gridData(tile);
tileGrid = tileGrid.reverse();
// return d3.geom.contour(function(x, y) {
// return x >= 0 && y >= 0 && x < tileGrid[0].length && y < tileGrid.length && tileGrid[y][x] === 0;
// })
_lerp: function(valueA, valueB, contourValue){
return Math.max(Math.min(1 + (-0.5) * (contourValue - valueA) / (valueB - valueA), 0.8), 0.2);
},
setBlendMode: function(b) {