calculates grid globally
This commit is contained in:
Francisco Dans
parent
42b4f4a645
commit
3f6d0d9671
@ -61,6 +61,7 @@ var contour = require('./contour');
|
||||
this._gradients = {};
|
||||
|
||||
this._forcePoints = false;
|
||||
this.globalGrid = [];
|
||||
}
|
||||
|
||||
torque.extend(PointRenderer.prototype, torque.Event, {
|
||||
@ -175,6 +176,9 @@ var contour = require('./contour');
|
||||
// renders all the layers (and frames for each layer) from cartocss
|
||||
//
|
||||
renderTile: function(tile, key, pos) {
|
||||
if(tile && !this.firstTileCoords){
|
||||
this.firstTileCoords = tile.coord;
|
||||
}
|
||||
if (this._iconsToLoad > 0) {
|
||||
this.on('allIconsLoaded', function() {
|
||||
this.renderTile.apply(this, [tile, key, callback]);
|
||||
@ -287,30 +291,6 @@ var contour = require('./contour');
|
||||
// ctx.fill();
|
||||
// }
|
||||
// }
|
||||
var cellsX = grid[0].length-1;
|
||||
var cellsY = grid.length-1;
|
||||
var contourValues = [0, 4, 8, 16];
|
||||
ctx.strokeStyle = "white";
|
||||
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.beginPath();
|
||||
ctx.moveTo(x * res + anchor + res * pipe[0][0], y * res + anchor + res * pipe[0][1]);
|
||||
ctx.lineTo(x * res + anchor + res * pipe[1][0], y * res + anchor + res * pipe[1][1]);
|
||||
ctx.stroke();
|
||||
if (pipe.length === 4){
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x * res + anchor + res * pipe[2][0], y * res + anchor + res * pipe[2][1]);
|
||||
ctx.lineTo(x * res + anchor + res * pipe[3][0], y * res + anchor + res * pipe[3][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// var pixelIndex = tile.timeIndex[key];
|
||||
@ -334,21 +314,23 @@ var contour = require('./contour');
|
||||
},
|
||||
|
||||
_gridData: function(tile){
|
||||
var res = this.options.resolution;
|
||||
var grid = new Array(256/res);
|
||||
for(var i =0; i<grid.length; i ++){
|
||||
grid[i] = new Array(256/res);
|
||||
for(var j =0; j < grid[i].length; j++){
|
||||
grid[i][j] = 0;
|
||||
}
|
||||
var valsPerTile = this.TILE_SIZE/this.options.resolution;
|
||||
var baseIndex = {
|
||||
x: (tile.coord.x - this.firstTileCoords.x) * valsPerTile,
|
||||
y: (tile.coord.y - this.firstTileCoords.y) * valsPerTile
|
||||
}
|
||||
|
||||
if(!this.globalGrid){
|
||||
this.globalGrid = [];
|
||||
}
|
||||
// to do invert
|
||||
for(var i =0; i < tile.renderData.length; i++){
|
||||
var x = tile.x[i], y = tile.y[i];
|
||||
grid[y/res][x/res] = tile.renderData[i];
|
||||
if(!this.globalGrid[baseIndex.y + y/this.options.resolution]){
|
||||
this.globalGrid[baseIndex.y + y/this.options.resolution] = [];
|
||||
}
|
||||
this.globalGrid[baseIndex.y + y/this.options.resolution][baseIndex.y + x/this.options.resolution] = tile.renderData[i];
|
||||
}
|
||||
|
||||
return grid.reverse(); // Torque tiles have an inverted y axis!
|
||||
},
|
||||
|
||||
_getPipe: function(cell, contour){
|
||||
@ -512,43 +494,78 @@ var contour = require('./contour');
|
||||
},
|
||||
|
||||
applyFilters: function(){
|
||||
if(this._style){
|
||||
if(this._style['image-filters']){
|
||||
function gradientKey(imf){
|
||||
var hash = ""
|
||||
for(var i = 0; i < imf.args.length; i++){
|
||||
var rgb = imf.args[i].rgb;
|
||||
hash += rgb[0] + ":" + rgb[1] + ":" + rgb[2];
|
||||
}
|
||||
return hash;
|
||||
if(this.globalGrid.length > 0){
|
||||
for (var i = 0, c = 0; i < this.globalGrid.length; i++){
|
||||
if (this.globalGrid[i] && this.globalGrid[i].length > c){
|
||||
c = this.globalGrid[i].length;
|
||||
}
|
||||
var gradient = this._gradients[gradientKey(this._style['image-filters'])];
|
||||
if(!gradient){
|
||||
function componentToHex(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
}
|
||||
var cellsY = this.globalGrid.length-1;
|
||||
var contourValues = [0, 4, 8, 16];
|
||||
var ctx = this._ctx;
|
||||
var res = this.options.resolution;
|
||||
var anchor = this.options.resolution/2;
|
||||
ctx.strokeStyle = "white";
|
||||
for(var c = 0; c < contourValues.length; c++){
|
||||
for (var y = 0; y < cellsY; y++){
|
||||
if(this.globalGrid[y]){
|
||||
for (var x = 0; x < this.globalGrid[y].length-1; x++){
|
||||
var currentCell = [this.globalGrid[y][x], this.globalGrid[y][x+1], this.globalGrid[y+1][x+1], this.globalGrid[y+1][x]];
|
||||
var pipe = this._getPipe(currentCell, contourValues[c]);
|
||||
if (pipe){
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x * res + anchor + res * pipe[0][0], y * res + anchor + res * pipe[0][1]);
|
||||
ctx.lineTo(x * res + anchor + res * pipe[1][0], y * res + anchor + res * pipe[1][1]);
|
||||
ctx.stroke();
|
||||
if (pipe.length === 4){
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x * res + anchor + res * pipe[2][0], y * res + anchor + res * pipe[2][1]);
|
||||
ctx.lineTo(x * res + anchor + res * pipe[3][0], y * res + anchor + res * pipe[3][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function rgbToHex(r, g, b) {
|
||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
}
|
||||
gradient = {};
|
||||
var colorize = this._style['image-filters'].args;
|
||||
|
||||
var increment = 1/colorize.length;
|
||||
for (var i = 0; i < colorize.length; i++){
|
||||
var key = increment * i + increment;
|
||||
var rgb = colorize[i].rgb;
|
||||
var formattedColor = rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
gradient[key] = formattedColor;
|
||||
}
|
||||
this._gradients[gradientKey(this._style['image-filters'])] = gradient;
|
||||
}
|
||||
this._filters.gradient(gradient);
|
||||
this._filters.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
// if(this._style){
|
||||
// if(this._style['image-filters']){
|
||||
// function gradientKey(imf){
|
||||
// var hash = ""
|
||||
// for(var i = 0; i < imf.args.length; i++){
|
||||
// var rgb = imf.args[i].rgb;
|
||||
// hash += rgb[0] + ":" + rgb[1] + ":" + rgb[2];
|
||||
// }
|
||||
// return hash;
|
||||
// }
|
||||
// var gradient = this._gradients[gradientKey(this._style['image-filters'])];
|
||||
// if(!gradient){
|
||||
// function componentToHex(c) {
|
||||
// var hex = c.toString(16);
|
||||
// return hex.length == 1 ? "0" + hex : hex;
|
||||
// }
|
||||
|
||||
// function rgbToHex(r, g, b) {
|
||||
// return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
// }
|
||||
// gradient = {};
|
||||
// var colorize = this._style['image-filters'].args;
|
||||
|
||||
// var increment = 1/colorize.length;
|
||||
// for (var i = 0; i < colorize.length; i++){
|
||||
// var key = increment * i + increment;
|
||||
// var rgb = colorize[i].rgb;
|
||||
// var formattedColor = rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
// gradient[key] = formattedColor;
|
||||
// }
|
||||
// this._gradients[gradientKey(this._style['image-filters'])] = gradient;
|
||||
// }
|
||||
// this._filters.gradient(gradient);
|
||||
// this._filters.draw();
|
||||
// }
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user