shitass refactor

examples/navy_leaflet.html

@@ -16,11 +16,12 @@
       // define the torque layer style using cartocss
       var CARTOCSS = [
           'Map {',
-          '-torque-time-attribute: "date";',
+          '-torque-time-attribute: "postedtime";',
           '-torque-aggregation-function: "count(cartodb_id)";',
-          '-torque-frame-count: 760;',
-          '-torque-animation-duration: 15;',
+          '-torque-frame-count: 1024;',
+          '-torque-animation-duration: 30;',
           '-torque-resolution: 2',
+          //'-torque-data-aggregation:cumulative;',
           '}',
           '#layer {',
           '  marker-width: 3;',
@@ -33,16 +34,14 @@
           '  [value > 5] { marker-fill: #CC4C02; }',
           '  [value > 6] { marker-fill: #993404; }',
           '  [value > 7] { marker-fill: #662506; }',
-          '  [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}',
-          '  [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
           '}'
       ].join('\n');
 
         
       var map = new L.Map('map', {
         zoomControl: true,
-        center: [40, 0],
-        zoom: 3
+        center: [54.1109429427243, -2.724609375],
+        zoom: 6
       });
 
       L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
@@ -50,8 +49,8 @@
       }).addTo(map);
 
       var torqueLayer = new L.TorqueLayer({
-        user       : 'viz2',
-        table      : 'ow',
+        user       : 'fdansv',
+        table      : 'twitter_jeremyclarkson_clarksonsacked_',
         cartocss: CARTOCSS
       });
       torqueLayer.error(function(err){
@@ -60,7 +59,7 @@
         }
       });
       torqueLayer.addTo(map);
-      torqueLayer.play()
+      torqueLayer.play();
     </script>
   </body>
 </html>

lib/torque/leaflet/torque.js

@@ -60,6 +60,8 @@ L.TorqueLayer = L.CanvasLayer.extend({
     this.setDuration = this.animator.duration.bind(this.animator);
     this.isRunning = this.animator.isRunning.bind(this.animator);
 
+    this.lastStep = 0;
+
 
     L.CanvasLayer.prototype.initialize.call(this, options);
 
@@ -212,7 +214,9 @@ L.TorqueLayer = L.CanvasLayer.extend({
     var canvas = this.getCanvas();
     this.renderer.clearCanvas();
     var ctx = canvas.getContext('2d');
+    var brrr = false;
 
+    
     for(t in this._tiles) {
       tile = this._tiles[t];
       if (tile) {
@@ -228,12 +232,17 @@ L.TorqueLayer = L.CanvasLayer.extend({
           // when the tile has a cached image just render it and avoid to render
           // all the points
           this.renderer._ctx.drawImage(tile._tileCache, 0, 0);
+          brrr = true;
         } else {
-          this.renderer.renderTile(tile, this.key);
+          this.renderer.renderTile(tile, this.key, pos);
+          brrr = false;
         }
       }
     }
-    this.renderer.applyFilters();
+    var full = this.getStep() < this.lastStep;
+    this.lastStep = this.getStep();
+    if(!brrr) this.renderer.flush(full);
+    //this.renderer.applyFilters();
 
     // prepare caches if the animation is not running
     // don't cache if the key has just changed, this avoids to cache

lib/torque/renderer/ball.js

@@ -0,0 +1,300 @@
+//////////////////////////////////
+// Torque BallRenderer          //
+// CartoDB, 2015                //
+// developed by Francisco Dans  //
+//////////////////////////////////
+
+function BallRenderer(torqueLayer){
+	this.torqueLayer = torqueLayer;
+	this.canvas = torqueLayer.renderer._canvas;
+	this.ctx = this.canvas.getContext("2d");
+	this.width = this.canvas.width;
+	this.chWidth = this.canvas.width * 4;
+	this.height = this.canvas.height;
+	this.size = this.width * this.height;
+	this.pointLayer = new Uint8ClampedArray(this.size);
+	this.drawnTemp = {};
+	this.gradient = {};
+	this.ballsSoFar = 0;
+	this.balls = 0;
+	this.cumulative = true;
+	this.availableWorkers = 10;
+	this.mode = "heat";
+	this.cachedBalls = [];
+	this.isoplethLayer = new Uint8Array(this.size);
+	this.initialize();
+}
+BallRenderer.prototype = {
+	initialize: function(){
+		var self = this;
+		this.torqueLayer._map.on("movestart", function(){ 
+			self.transit = true
+		});
+		this.torqueLayer._map.on("moveend", function(){ 
+			self.transit = false
+		});
+	},
+	getBallIndices: function(x, y){
+		var indices = new Int8Array(2*r+1);
+		return indices;
+	},
+	addBall: function(x0, y0, st){
+		this.radius = st["marker-width"];
+		if(this.cachedBalls[this.radius]){
+			if(x0 < 0 || y0 < 0 || x0 > this.width || y0 > this.height) return;
+			var startingPoint = this.getRIndexPos(x0, y0) - this.size - this.radius;
+			var i = 0, 
+			pointer = startingPoint, 
+			ballWidth = (this.radius*2),
+			linemax = startingPoint + 2 * this.radius,
+			endPoint = this.getRIndexPos(x0, y0) - this.cachedBalls[this.radius].length - this.radius
+			while (pointer <= endPoint){
+				while (pointer <= linemax){
+					this.pointLayer[pointer] += this.cachedBalls[this.radius][i];
+					i++;
+					pointer++;
+				}
+				linemax += this.width;
+				pointer += this.width - ballWidth;
+			}
+		}
+		else{
+			this.precacheBall(x0,y0);
+		}
+	},
+	precacheBall: function(x0, y0){
+		this.cachedBalls[this.radius]  = new Uint8ClampedArray(Math.pow(2 * this.radius + 1, 2));
+		x0 = this.radius;
+		y0 = this.radius;
+		var orad = this.radius;
+        var x = this.radius;
+        var y = 0;
+        var radiusError = 1 - x;
+        while (x >= y){
+        	// Try not to touch the following, it's a pain in the ass to write
+            this.horizontalLine(-x + x0, x + x0, y + y0, x0, y0);
+            this.horizontalLine(-y + x0, y + x0, -x + y0, x0, y0);
+            this.horizontalLine(-x + x0, x + x0, -y + y0, x0, y0);
+            this.horizontalLine(-y + x0, y + x0, x + y0, x0, y0);
+            ++y;
+            if (radiusError<0){
+                radiusError += 2 * y + 1;
+            }
+            else{
+                --x;
+                radiusError += 2 * (y - x) + 1;
+            }
+        }
+        this.drawnTemp = {};
+        
+	},
+	horizontalLine: function(xi, xf, yi, x0, y0){
+		// Assumes xi is on the left and xf is on the right
+		if(typeof this.drawnTemp[yi] === "undefined"){
+			while (xi <= xf){
+				this.addPoint(xi, yi, 50 - ((50 * this.lineDistance(xi, yi,x0,y0)) / this.radius));
+				++xi;
+			}
+			this.drawnTemp[yi] = true;
+		}
+	},
+	addPoint: function(x, y, alpha){
+		var indexPos = y*(this.radius*2+1)+x;
+		this.cachedBalls[this.radius][indexPos] += alpha;
+	},
+	map_range: function(value, low1, high1, low2, high2) {
+        return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
+    },
+    lineDistance: function(x,y,x0,y0){
+		  var xs = Math.pow(x - x0, 2);
+		  var ys = Math.pow(y - y0, 2);
+		  return Math.sqrt( xs + ys );
+	},
+	draw: function(modeData, dataArray){
+		if(this.mode === "contour"){
+			this.contour(5);
+			dataArray = this.fillLayer(this.contourLayer);
+		}
+		else if(this.mode === "isopleth"){
+			this.contour(10);
+			this.isopleth();
+		}
+		else if(this.mode === "heat"){
+				this.heatmap();
+		}
+		if (!dataArray){
+			if (this.isoplethLayer) dataArray = this.isoplethLayer;
+			else if (this.contourLayer) dataArray = this.fillLayer(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);
+	    this.imageData.data.set(dataArray);
+	    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){
+		if (from.length !== to.length) throw("layers aren't of the same size"); return;
+		for (var i = 0; i<to.length; i++){
+			if(from[i+3]>0){
+				// There's a better way of doing this but I was lazy.
+				to[i] = from[i];
+				to[i+1] = from[i+1];
+				to[i+2] = from[i+2];
+				to[i+3] = from[i+3];
+			}
+		}
+	},
+	invalidate: function(){
+		if(this.torqueLayer.options.steps > 1){
+			for (var i = 0, len = this.pointLayer.length; i< len; i++){
+				this.pointLayer[i] -= 10;
+			}
+		}
+		else{
+			this.pointLayer = new Uint8ClampedArray(this.size);
+		}
+
+		if(typeof this.isoplethLayer !== 'undefined'){
+			this.contourLayer = new Uint8Array(this.size);
+			this.isoplethLayer = new Uint8Array(this.size);
+		}
+		else if(typeof this.contourLayer !== 'undefined'){
+			this.contourLayer = new Uint8Array(this.size);
+		} 
+		else if(typeof this.heatmapLayer !== 'undefined'){
+		  this.heatmapLayer =  new Uint8Array(this.size * 4);
+		}
+		
+	},
+	getRIndexPos: function(x,y){
+		var rIndexPos = y*this.width+x;
+		return rIndexPos;
+	},
+	getXYFromRIndex: function(index){
+		var x = (index % (this.width*4))/4;
+		var y = (index - 4 * x) / (4 * this.width);
+		return [x,y];
+	},
+    isEmpty: function(layer) {
+    	for (var i = 0; i<layer.length; i+=4){
+    		if(layer[i+3] > 0) return false;
+    	}
+    	return true;
+    },
+    isInvalid: function(layer) {
+    	for (var i = 0; i<layer.length; i+=4){
+    		if(layer[i+3]!==0 && !layer[i+3]) return true;
+    	}
+    	return false;
+    },
+    createArray: function(){
+    	return new Uint8ClampedArray(this.size * 4);
+    },
+    contour: function(granularity){
+		if(!this.contourGradient){
+			var step = 255/granularity;
+			var i = 0, a = new Uint8ClampedArray(granularity+1), c=0;
+			while (i<255){
+				a[c] = i;
+				i += step;
+				c++;
+			}
+			a[a.length-1] = 255;
+			var l = -step/2;
+			this.contourGradient = new Uint8ClampedArray(1024);
+			for(var i = 0; i<a.length; i++){
+				var y = Math.round(i*step);
+				var thisAlpha = a[i];
+				while(y<step*(i+1)){
+					this.contourGradient[y*4+3] = thisAlpha;
+					y++;
+				}
+			}
+		}
+		var gradient = this.contourGradient;
+		if(!this.contourLayer) this.contourLayer = new Uint8Array(this.size);
+		for (var i = 0, len = this.pointLayer.length, alpha; i<len; i++){
+			if(this.pointLayer[i] > 0){
+				var alpha = this.pointLayer[i];
+				this.contourLayer[i] = gradient[alpha*4+3];
+			}
+		}
+	},
+    isopleth: function(){
+    	for (var i = 0, len = this.contourLayer.length; i<len; i+=4){
+    		var alpha = this.contourLayer[i + 3];
+    		if (alpha > 100 && alpha < 120){
+    			var n = i - this.chWidth,
+					s = i + this.chWidth,
+    				neighbors = [n, n + 4, i + 4, s + 4, s, s - 4, i - 4, n -4];
+    			for (var n = 0, ln = neighbors.length; n<ln; ++n){
+    				var index = neighbors[n];
+    				if(index>0 && (this.contourLayer[index+3] === 0 || this.contourLayer[index+3] !== this.contourLayer[i+3])){
+    					this.isoplethLayer[index + 3] = Math.min(this.contourLayer[i+3],255);
+    				}
+    			}
+	    	}
+    	}
+    },
+
+    heatmap: function (gradient){
+    	if(!gradient) gradient = {
+	        0.4: 'blue',
+	        0.6: 'cyan',
+	        0.7: 'lightgreen',
+	        0.9: '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 grad = this.gradientData;
+    	if(!this.heatmapLayer) this.heatmapLayer = new Uint8ClampedArray(this.size * 4);
+        for (var i = this.pointLayer.length-4, alpha; i>=0; i-=4){
+            alpha = this.pointLayer[i+3] * 4; // get gradient color from opacity value
+
+            if (alpha>0) {
+                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
+            }
+        }
+    },
+
+    initColorWorkers: function(){
+    	var workerCount = 3
+    	this.colorWorkers = [];
+	    for (var i = 0; i < workerCount; i++) {
+	        this.colorWorkers.push(work(require('./colorWorker.js')));
+	    }
+    }
+}
+
+module.exports = BallRenderer;

lib/torque/renderer/colorWorker.js

@@ -0,0 +1,13 @@
+onmessage = function(e){
+	var cutoff = e.data[1];
+	var subset = e.data[0].slice(b,f);
+	for (var i = subset.length-4, alpha; i>=0; i-=4){
+        alpha = subset[i+3] * 4; // get gradient color from opacity value
+        if (alpha>0) {
+            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
+        }
+	}
+}

lib/torque/renderer/point.js

@@ -2,7 +2,8 @@ var torque = require('../');
 var cartocss = require('./cartocss_render');
 var Profiler = require('../profiler');
 var carto = global.carto || require('carto');
-var Filters = require('./torque_filters');
+var filters = require('./torque_filters');
+var ballRenderer = require('./ball.js');
 
   var TAU = Math.PI * 2;
   var DEFAULT_CARTOCSS = [
@@ -51,8 +52,7 @@ var Filters = require('./torque_filters');
     this._sprites = []; // sprites per layer
     this._shader = null;
     this._icons = {};
-    this._iconsToLoad = 0;
-    this._filters = new Filters(this._canvas, {canvasClass: options.canvasClass});
+    this._filters = filters(this._canvas);
     this.setCartoCSS(this.options.cartocss || DEFAULT_CARTOCSS);
     this.TILE_SIZE = 256;
     this._style = null;
@@ -129,6 +129,8 @@ var Filters = require('./torque_filters');
       }
 
       var canvas = this._createCanvas();
+      // take into account the exterior ring to calculate the size
+      var canvasSize = (st['marker-line-width'] || 0) + pointSize*2;
       var ctx = canvas.getContext('2d');
 
       var markerFile = st["marker-file"] || st["point-file"];
@@ -151,7 +153,6 @@ var Filters = require('./torque_filters');
         var canvasSize = (st['marker-line-width'] || 0) + pointSize*2;
         var w = ctx.width = canvas.width = ctx.height = canvas.height = Math.ceil(canvasSize);
         ctx.translate(w/2, w/2);
-
         var mt = st['marker-type'];
         if (mt && mt === 'rectangle') {
           cartocss.renderRectangle(ctx, st);
@@ -172,13 +173,11 @@ var Filters = require('./torque_filters');
     //
     // renders all the layers (and frames for each layer) from cartocss
     //
-    renderTile: function(tile, key, callback) {
-      if (this._iconsToLoad > 0) {
-          this.on('allIconsLoaded', function() {
-              this.renderTile.apply(this, [tile, key, callback]);
-          });
-          return false;
+    renderTile: function(tile, key,pos) {
+      if(typeof this.ballRenderer === "undefined"){
+        this.ballRenderer = new ballRenderer(this._canvas);
       }
+      // this._renderTile(tile, key, 0, null, null, null, pos);
       var prof = Profiler.metric('torque.renderer.point.renderLayers').start();
       var layers = this._shader.getLayers();
       for(var i = 0, n = layers.length; i < n; ++i ) {
@@ -189,14 +188,12 @@ var Filters = require('./torque_filters');
           for(var fr = 0; fr < layer.frames().length; ++fr) {
             var frame = layer.frames()[fr];
             var fr_sprites = sprites[frame] || (sprites[frame] = []);
-            this._renderTile(tile, key - frame, frame, fr_sprites, layer);
+            this._renderTile(tile, key - frame, frame, fr_sprites, layer, null, pos);
           }
         }
       }
       
-      prof.end(true);
-
-      return callback && callback(null);
+      // prof.end(true);
     },
 
     _createCanvas: function() {
@@ -210,21 +207,6 @@ var Filters = require('./torque_filters');
         ? new this.options.imageClass()
         : new Image();
     },
-
-    _setImageSrc: function(img, url, callback) {
-      if (this.options.setImageSrc) {
-        this.options.setImageSrc(img, url, callback);
-      } else {
-        img.onload = function(){
-            callback(null);
-        };
-        img.onerror = function(){
-            callback(new Error('Could not load image'));
-        };
-        img.src = url;
-      }
-    },
-
     _qualifyURL: function(url) {
       if (typeof this.options.qualifyURL !== "undefined"){
         return this.options.qualifyURL(url);
@@ -240,42 +222,47 @@ var Filters = require('./torque_filters');
     // renders a tile in the canvas for key defined in 
     // the torque tile
     //
-    _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
+    _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars, pos) {
+      shaderVars = shaderVars || { zoom: tile.z, 'frame-offset': frame_offset }
       if (!this._canvas) return;
 
       var prof = Profiler.metric('torque.renderer.point.renderTile').start();
       var ctx = this._ctx;
-      var blendMode = compop2canvas(shader.eval('comp-op')) || this.options.blendmode;
-      if (blendMode) {
-        ctx.globalCompositeOperation = blendMode;
-      }
+      // var blendMode = compop2canvas(shader.eval('comp-op')) || this.options.blendmode;
+      // if (blendMode) {
+      //   ctx.globalCompositeOperation = blendMode;
+      // }
       if (this.options.cumulative && key > tile.maxDate) {
         //TODO: precache because this tile is not going to change
         key = tile.maxDate;
       }
       var tileMax = this.options.resolution * (this.TILE_SIZE/this.options.resolution - 1)
       var activePixels = tile.timeCount[key];
-      var anchor = this.options.resolution/2;
       if (activePixels) {
         var pixelIndex = tile.timeIndex[key];
         for(var p = 0; p < activePixels; ++p) {
           var posIdx = tile.renderDataPos[pixelIndex + p];
           var c = tile.renderData[pixelIndex + p];
           if (c) {
-           var sp = sprites[c];
-           if (sp === undefined) {
-             sp = sprites[c] = this.generateSprite(shader, c, torque.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
-           }
-           if (sp) {
-             var x = tile.x[posIdx]- (sp.width >> 1) + anchor;
-             var y = tileMax - tile.y[posIdx] + anchor; // flip mercator
-             ctx.drawImage(sp, x, y - (sp.height >> 1));
-           }
+            var x = tile.x[posIdx];
+            var y = tileMax - tile.y[posIdx]; // flip mercator
+            var st = shader.getStyle({
+              value: c
+            }, shaderVars);
+            this.ballRenderer.addBall(pos.x + x, pos.y + y, st);
+            // var sp = sprites[c];
+            // if (sp === undefined) {
+            //   sp = sprites[c] = this.generateSprite(shader, c, torque.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
+            // }
+            // if (sp) {
+            //   var x = tile.x[posIdx]- (sp.width >> 1);
+            //   var y = tileMax - tile.y[posIdx]; // flip mercator
+            //   ctx.drawImage(sp, x, y - (sp.height >> 1));
+            // }
           }
         }
       }
       
-
       prof.end(true);
     },
 
@@ -347,62 +334,46 @@ var Filters = require('./torque_filters');
       }
       return null;
     },
-
-    _preloadIcons: function(img_names) {
+    _preloadIcons: function(img_names){
       var self = this;
-
-      if (img_names.length > 0 && !this._forcePoints) {
-
-        var qualifiedImageUrlSet = Object.keys(img_names.reduce(function(imgNamesMap, imgName) {
-            var qualifiedUrl = self._qualifyURL(imgName);
-            if (!self._icons[qualifiedUrl]) {
-                imgNamesMap[qualifiedUrl] = true;
-            }
-            return imgNamesMap;
-        }, {}));
-
-        var filtered = self._shader.getLayers().some(function(layer) {
-          return typeof layer.shader["image-filters"] !== "undefined";
-        });
-
-        this._iconsToLoad += qualifiedImageUrlSet.length;
-
-        qualifiedImageUrlSet.forEach(function(qualifiedImageUrl) {
-          self._icons[qualifiedImageUrl] = null;
-
-          var img = self._createImage();
-
-          if (filtered) {
-            img.crossOrigin = 'Anonymous';
+      this._icons = {};
+      if (img_names.length > 0 && !this._forcePoints){
+        for (var i = 0; i<img_names.length; i++){
+          var new_img = this._createImage();
+          this._icons[this._qualifyURL(img_names[i])] = null;
+          if (typeof self._icons.itemsToLoad === 'undefined'){
+            this._icons.itemsToLoad = img_names.length;
           }
-
-          self._setImageSrc(img, qualifiedImageUrl, function(err) {
-            if (err) {
-              self._forcePoints = true;
-              self.clearSpriteCache();
-              self._iconsToLoad = 0;
-              self.fire("allIconsLoaded");
-              if(filtered) {
-                console.info("Only CORS-enabled, or same domain image-files can be used in combination with image-filters");
-              }
-              console.error("Couldn't get marker-file " + qualifiedImageUrl);
-            } else {
-              self._icons[qualifiedImageUrl] = img;
-              self._iconsToLoad--;
-
-              if (self._iconsToLoad <= 0){
+          var filtered = self._shader.getLayers().some(function(layer){return typeof layer.shader["image-filters"] !== "undefined"});
+          if (filtered){
+            new_img.crossOrigin = 'Anonymous';
+          }
+          new_img.onload = function(e){
+            self._icons[this.src] = this;
+            if (Object.keys(self._icons).length === img_names.length + 1){
+              self._icons.itemsToLoad--;
+              if (self._icons.itemsToLoad <= 0){
                 self.clearSpriteCache();
                 self.fire("allIconsLoaded");
               }
             }
-          });
-        });
-      } else {
-          this.fire("allIconsLoaded");
+          };
+          new_img.onerror = function(){
+            self._forcePoints = true;
+            self.clearSpriteCache();
+            if(filtered){
+              console.info("Only CORS-enabled, or same domain image-files can be used in combination with image-filters");
+            }
+            console.error("Couldn't get marker-file " + this.src);
+          };
+          this.itemsToLoad++;
+          new_img.src = img_names[i];
+        }
       }
-  },
 
+  },
   applyFilters: function(){
+    return;
     if(this._style){
       if(this._style['image-filters']){
         function gradientKey(imf){
@@ -439,6 +410,13 @@ var Filters = require('./torque_filters');
         this._filters.draw();
       }
     }
+  },
+  flush: function(full){
+    this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+    if(!this.ballRenderer) return;
+    this.ballRenderer.mode = "isopleth";
+    this.ballRenderer.draw();
+    this.ballRenderer.invalidate();
   }
 });
 

package.json

@@ -1,46 +1,49 @@
 {
-    "name": "torque.js",
-    "version": "2.11.1",
-    "description": "Torque javascript library",
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/CartoDB/torque.git"
-    },
-    "author": {
-        "name": "CartoDB",
-        "url": "http://cartodb.com/",
-        "email": "wadus@cartodb.com"
-    },
-    "contributors": [
-        "Andrew Hill <andrew@vizzuality.com>",
-        "Simon Tokumine <tokumine@google.com>",
-        "Javier Alvarez <jmedina@vizzuality.com>",
-        "Javier Arce <javierarce@vizzuality.com>",
-        "Javier Santana <jsantana@vizzuality.com>",
-        "Raúl Ochoa <rochoa@cartodb.com>",
-        "Nicklas Gummesson <nicklas@cartodb.com>",
-        "Francisco Dans <francisco@cartodb.com>"
-    ],
-    "licenses": [{
+  "name": "torque.js",
+  "version": "2.11.1",
+  "description": "Torque javascript library",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/CartoDB/torque.git"
+  },
+  "author": {
+    "name": "CartoDB",
+    "url": "http://cartodb.com/",
+    "email": "wadus@cartodb.com"
+  },
+  "contributors": [
+    "Andrew Hill <andrew@vizzuality.com>",
+    "Simon Tokumine <tokumine@google.com>",
+    "Javier Alvarez <jmedina@vizzuality.com>",
+    "Javier Arce <javierarce@vizzuality.com>",
+    "Javier Santana <jsantana@vizzuality.com>",
+    "Raúl Ochoa <rochoa@cartodb.com>",
+    "Nicklas Gummesson <nicklas@cartodb.com>",
+    "Francisco Dans <francisco@cartodb.com>"
+  ],
+  "licenses": [
+    {
       "type": "BSD"
-    }],
-    "dependencies": {
-        "carto": "https://github.com/CartoDB/carto/archive/master.tar.gz"
-    },
-    "devDependencies": {
-      "leaflet": "0.7.3",
-      "underscore": "^1.6.0",
-      "node-qunit-phantomjs": "^1.0.0",
-      "browserify": "^7.0.0",
-      "mapnik": "https://github.com/CartoDB/node-mapnik/tarball/1.4.15-cdb1",
-      "canvas": "~1.2.1",
-      "request": "^2.53.0",
-      "qunit": "~0.7.5",
-      "qunitjs": "1.x",
-      "uglify-js": "1.3.3"
-    },
-    "scripts": {
-        "test": "make test-all"
-    },
-    "main": "./lib/torque/index.js"
+    }
+  ],
+  "dependencies": {
+    "carto": "https://github.com/CartoDB/carto/archive/master.tar.gz",
+    "webworkify": "^1.0.2"
+  },
+  "devDependencies": {
+    "leaflet": "0.7.3",
+    "underscore": "^1.6.0",
+    "node-qunit-phantomjs": "^1.0.0",
+    "browserify": "^7.0.0",
+    "mapnik": "https://github.com/CartoDB/node-mapnik/tarball/1.4.15-cdb1",
+    "canvas": "~1.2.1",
+    "request": "^2.53.0",
+    "qunit": "~0.7.5",
+    "qunitjs": "1.x",
+    "uglify-js": "1.3.3"
+  },
+  "scripts": {
+    "test": "make test-all"
+  },
+  "main": "./lib/torque/index.js"
 }