adds isoline rendering in point renderer
This commit is contained in:
parent
4ee1f38499
commit
471cd3ec19
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user