shitass refactor
This commit is contained in:
parent
ea4445ab8d
commit
1dfd2c6bf1
@ -12,9 +12,8 @@ function BallRenderer(torqueLayer){
|
|||||||
this.chWidth = this.canvas.width * 4;
|
this.chWidth = this.canvas.width * 4;
|
||||||
this.height = this.canvas.height;
|
this.height = this.canvas.height;
|
||||||
this.size = this.width * this.height;
|
this.size = this.width * this.height;
|
||||||
this.pointLayer = new Uint8ClampedArray(this.size * 4);
|
this.pointLayer = new Uint8ClampedArray(this.size);
|
||||||
this.drawnTemp = {};
|
this.drawnTemp = {};
|
||||||
this.prof = 0;
|
|
||||||
this.gradient = {};
|
this.gradient = {};
|
||||||
this.ballsSoFar = 0;
|
this.ballsSoFar = 0;
|
||||||
this.balls = 0;
|
this.balls = 0;
|
||||||
@ -22,6 +21,7 @@ function BallRenderer(torqueLayer){
|
|||||||
this.availableWorkers = 10;
|
this.availableWorkers = 10;
|
||||||
this.mode = "heat";
|
this.mode = "heat";
|
||||||
this.cachedBalls = [];
|
this.cachedBalls = [];
|
||||||
|
this.isoplethLayer = new Uint8Array(this.size);
|
||||||
this.initialize();
|
this.initialize();
|
||||||
}
|
}
|
||||||
BallRenderer.prototype = {
|
BallRenderer.prototype = {
|
||||||
@ -40,23 +40,22 @@ BallRenderer.prototype = {
|
|||||||
},
|
},
|
||||||
addBall: function(x0, y0, st){
|
addBall: function(x0, y0, st){
|
||||||
this.radius = st["marker-width"];
|
this.radius = st["marker-width"];
|
||||||
this.RW4 = this.radius * this.width *4;
|
|
||||||
if(this.cachedBalls[this.radius]){
|
if(this.cachedBalls[this.radius]){
|
||||||
if(x0 < 0 || y0 < 0 || x0 > this.width || y0 > this.height) return;
|
if(x0 < 0 || y0 < 0 || x0 > this.width || y0 > this.height) return;
|
||||||
var startingPoint = this.getRIndexPos(x0, y0) - this.RW4 - this.radius*4;
|
var startingPoint = this.getRIndexPos(x0, y0) - this.size - this.radius;
|
||||||
var i = 0,
|
var i = 0,
|
||||||
pointer = startingPoint,
|
pointer = startingPoint,
|
||||||
ballWidth = (this.radius*2)*4
|
ballWidth = (this.radius*2),
|
||||||
linemax = startingPoint + 2 * this.radius*4,
|
linemax = startingPoint + 2 * this.radius,
|
||||||
endPoint = this.getRIndexPos(x0, y0) + this.RW4 + this.radius;
|
endPoint = this.getRIndexPos(x0, y0) - this.cachedBalls[this.radius].length - this.radius
|
||||||
while (pointer <= endPoint){
|
while (pointer <= endPoint){
|
||||||
while (pointer <= linemax){
|
while (pointer <= linemax){
|
||||||
this.pointLayer[pointer+3] += this.cachedBalls[this.radius][i+3];
|
this.pointLayer[pointer] += this.cachedBalls[this.radius][i];
|
||||||
i+=4;
|
i++;
|
||||||
pointer+=4;
|
pointer++;
|
||||||
}
|
}
|
||||||
linemax += this.width * 4;
|
linemax += this.width;
|
||||||
pointer += this.width * 4 - ballWidth -4;
|
pointer += this.width - ballWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
@ -64,7 +63,7 @@ BallRenderer.prototype = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
precacheBall: function(x0, y0){
|
precacheBall: function(x0, y0){
|
||||||
this.cachedBalls[this.radius] = new Uint8ClampedArray(Math.pow(2 * this.radius + 1, 2)*4);
|
this.cachedBalls[this.radius] = new Uint8ClampedArray(Math.pow(2 * this.radius + 1, 2));
|
||||||
x0 = this.radius;
|
x0 = this.radius;
|
||||||
y0 = this.radius;
|
y0 = this.radius;
|
||||||
var orad = this.radius;
|
var orad = this.radius;
|
||||||
@ -96,12 +95,12 @@ BallRenderer.prototype = {
|
|||||||
this.addPoint(xi, yi, 50 - ((50 * this.lineDistance(xi, yi,x0,y0)) / this.radius));
|
this.addPoint(xi, yi, 50 - ((50 * this.lineDistance(xi, yi,x0,y0)) / this.radius));
|
||||||
++xi;
|
++xi;
|
||||||
}
|
}
|
||||||
this.drawnTemp[yi]=true;
|
this.drawnTemp[yi] = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
addPoint: function(x, y, alpha){
|
addPoint: function(x, y, alpha){
|
||||||
var indexPos = (y*(this.radius*2+1)+x)*4;
|
var indexPos = y*(this.radius*2+1)+x;
|
||||||
this.cachedBalls[this.radius][indexPos + 3] += alpha;
|
this.cachedBalls[this.radius][indexPos] += alpha;
|
||||||
},
|
},
|
||||||
map_range: function(value, low1, high1, low2, high2) {
|
map_range: function(value, low1, high1, low2, high2) {
|
||||||
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
|
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
|
||||||
@ -113,10 +112,11 @@ BallRenderer.prototype = {
|
|||||||
},
|
},
|
||||||
draw: function(modeData, dataArray){
|
draw: function(modeData, dataArray){
|
||||||
if(this.mode === "contour"){
|
if(this.mode === "contour"){
|
||||||
this.contour();
|
this.contour(5);
|
||||||
|
dataArray = this.fillLayer(this.contourLayer);
|
||||||
}
|
}
|
||||||
else if(this.mode === "isopleth"){
|
else if(this.mode === "isopleth"){
|
||||||
this.contour(3);
|
this.contour(10);
|
||||||
this.isopleth();
|
this.isopleth();
|
||||||
}
|
}
|
||||||
else if(this.mode === "heat"){
|
else if(this.mode === "heat"){
|
||||||
@ -124,7 +124,7 @@ BallRenderer.prototype = {
|
|||||||
}
|
}
|
||||||
if (!dataArray){
|
if (!dataArray){
|
||||||
if (this.isoplethLayer) dataArray = this.isoplethLayer;
|
if (this.isoplethLayer) dataArray = this.isoplethLayer;
|
||||||
else if (this.contourLayer) dataArray = this.contourLayer;
|
else if (this.contourLayer) dataArray = this.fillLayer(this.contourLayer);
|
||||||
else if (this.heatmapLayer) dataArray = this.heatmapLayer;
|
else if (this.heatmapLayer) dataArray = this.heatmapLayer;
|
||||||
else dataArray = this.pointLayer;
|
else dataArray = this.pointLayer;
|
||||||
}
|
}
|
||||||
@ -132,6 +132,13 @@ BallRenderer.prototype = {
|
|||||||
this.imageData.data.set(dataArray);
|
this.imageData.data.set(dataArray);
|
||||||
this.ctx.putImageData(this.imageData, 0, 0);
|
this.ctx.putImageData(this.imageData, 0, 0);
|
||||||
},
|
},
|
||||||
|
fillLayer: function(layer){
|
||||||
|
var tempList = new Uint8Array(layer.length * 4);
|
||||||
|
for(i = 0; i<layer.length; i++){
|
||||||
|
tempList[i*4 + 3] = layer[i];
|
||||||
|
}
|
||||||
|
return tempList;
|
||||||
|
},
|
||||||
mergeLayers: function(from, to){
|
mergeLayers: function(from, to){
|
||||||
if (from.length !== to.length) throw("layers aren't of the same size"); return;
|
if (from.length !== to.length) throw("layers aren't of the same size"); return;
|
||||||
for (var i = 0; i<to.length; i++){
|
for (var i = 0; i<to.length; i++){
|
||||||
@ -146,28 +153,28 @@ BallRenderer.prototype = {
|
|||||||
},
|
},
|
||||||
invalidate: function(){
|
invalidate: function(){
|
||||||
if(this.torqueLayer.options.steps > 1){
|
if(this.torqueLayer.options.steps > 1){
|
||||||
for (var i = 0, len = this.pointLayer.length; i< len; i+=4){
|
for (var i = 0, len = this.pointLayer.length; i< len; i++){
|
||||||
this.pointLayer[i + 3] -= 10;
|
this.pointLayer[i] -= 10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
this.pointLayer = new Uint8ClampedArray(this.size * 4);
|
this.pointLayer = new Uint8ClampedArray(this.size);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(typeof this.isoplethLayer !== 'undefined'){
|
if(typeof this.isoplethLayer !== 'undefined'){
|
||||||
this.contourLayer = new Uint8ClampedArray(this.size * 4);
|
this.contourLayer = new Uint8Array(this.size);
|
||||||
this.isoplethLayer = new Uint8Array(this.size * 4);
|
this.isoplethLayer = new Uint8Array(this.size);
|
||||||
}
|
}
|
||||||
else if(typeof this.contourLayer !== 'undefined'){
|
else if(typeof this.contourLayer !== 'undefined'){
|
||||||
this.contourLayer = new Uint8ClampedArray(this.size * 4);
|
this.contourLayer = new Uint8Array(this.size);
|
||||||
}
|
}
|
||||||
else if(typeof this.heatmapLayer !== 'undefined'){
|
else if(typeof this.heatmapLayer !== 'undefined'){
|
||||||
this.heatmapLayer = new Uint8ClampedArray(this.size * 4);
|
this.heatmapLayer = new Uint8Array(this.size * 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
getRIndexPos: function(x,y){
|
getRIndexPos: function(x,y){
|
||||||
var rIndexPos = (y*this.width+x)*4;
|
var rIndexPos = y*this.width+x;
|
||||||
return rIndexPos;
|
return rIndexPos;
|
||||||
},
|
},
|
||||||
getXYFromRIndex: function(index){
|
getXYFromRIndex: function(index){
|
||||||
@ -212,22 +219,18 @@ BallRenderer.prototype = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
var gradient = this.contourGradient;
|
var gradient = this.contourGradient;
|
||||||
if(!this.contourLayer) this.contourLayer = new Uint8ClampedArray(this.size * 4);
|
if(!this.contourLayer) this.contourLayer = new Uint8Array(this.size);
|
||||||
for (var i = this.pointLayer.length-4, alpha; i>=0; i-=4){
|
for (var i = 0, len = this.pointLayer.length, alpha; i<len; i++){
|
||||||
if(this.pointLayer[i+3] > 0){
|
if(this.pointLayer[i] > 0){
|
||||||
var currentAlpha = this.pointLayer[i+3];
|
var alpha = this.pointLayer[i];
|
||||||
this.contourLayer[i+0] = 255;
|
this.contourLayer[i] = gradient[alpha*4+3];
|
||||||
this.contourLayer[i+1] = 105;
|
|
||||||
this.contourLayer[i+2] = 180;
|
|
||||||
this.contourLayer[i+3] = gradient[currentAlpha*4+3];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isopleth: function(){
|
isopleth: function(){
|
||||||
if(typeof this.isoplethLayer === 'undefined') this.isoplethLayer = new Uint8Array(this.size * 4);
|
|
||||||
for (var i = 0, len = this.contourLayer.length; i<len; i+=4){
|
for (var i = 0, len = this.contourLayer.length; i<len; i+=4){
|
||||||
var alpha = this.contourLayer[i + 3];
|
var alpha = this.contourLayer[i + 3];
|
||||||
if (alpha > 20 && alpha < 255){
|
if (alpha > 100 && alpha < 120){
|
||||||
var n = i - this.chWidth,
|
var n = i - this.chWidth,
|
||||||
s = i + this.chWidth,
|
s = i + this.chWidth,
|
||||||
neighbors = [n, n + 4, i + 4, s + 4, s, s - 4, i - 4, n -4];
|
neighbors = [n, n + 4, i + 4, s + 4, s, s - 4, i - 4, n -4];
|
||||||
|
Loading…
Reference in New Issue
Block a user