From 4cb7fd8957e5883e757f4ad3b3ff80f88c42c6c1 Mon Sep 17 00:00:00 2001 From: Francisco Dans Date: Fri, 28 Aug 2015 15:52:46 +0200 Subject: [PATCH] interpolation improvements --- lib/torque/renderer/iso.js | 129 +++++++++++++++++++++++++------------ 1 file changed, 88 insertions(+), 41 deletions(-) diff --git a/lib/torque/renderer/iso.js b/lib/torque/renderer/iso.js index d8b7fb7..3fc0d30 100644 --- a/lib/torque/renderer/iso.js +++ b/lib/torque/renderer/iso.js @@ -134,47 +134,91 @@ torque.extend(IsoRenderer.prototype, torque.Event, { if (type === 0 || type === 15) return null; else if (type === 1 || type === 14){ next = [S,W]; - interpolation = { - x: 1-this._lerp(cornerValues[2], cornerValues[3], contourValue), - y: this._lerp(cornerValues[0], cornerValues[3], contourValue) - }; + if (type === 1){ + interpolation = { + x: 1-this._lerp(cornerValues[2], cornerValues[3], contourValue), + y: this._lerp(cornerValues[0], cornerValues[3], contourValue) + }; + } + else{ + interpolation = { + x: this._lerp(cornerValues[3], cornerValues[2], contourValue), + y: this._lerp(cornerValues[3], cornerValues[0], contourValue) + }; + } } else if (type === 2 || type === 13){ next = [E,S]; - interpolation = { - x: this._lerp(cornerValues[3], cornerValues[2], contourValue), - y: this._lerp(cornerValues[1], cornerValues[2], contourValue) - }; + if (type === 13){ + interpolation = { + x: this._lerp(cornerValues[2], cornerValues[3], contourValue), + y: this._lerp(cornerValues[2], cornerValues[1], contourValue) + }; + } else { + interpolation = { + x: this._lerp(cornerValues[3], cornerValues[2], contourValue), + y: this._lerp(cornerValues[1], cornerValues[2], contourValue) + }; + } } - else if (type === 3 || type === 12) { + else if (type === 12 || type === 3) { + var upperAvg = (cornerValues[0] + cornerValues[1])/2; + var bottomAvg = (cornerValues[2] + cornerValues[3])/2; + var inter = this._lerp(bottomAvg, upperAvg, contourValue); + if(type === 12){ + inter = 1 - inter; + } next = [E,W]; interpolation = { x: 0.5, - y: 0.5 + y: inter }; } else if (type === 4 || type === 11){ next = [N,E]; - interpolation = { - x: this._lerp(cornerValues[0], cornerValues[1], contourValue), - y: 1 - this._lerp(cornerValues[2], cornerValues[1], contourValue) - }; + if(type === 11){ + interpolation = { + x: this._lerp(cornerValues[1], cornerValues[0], contourValue), + y: 1 - this._lerp(cornerValues[1], cornerValues[2], contourValue) + }; + } + else{ + interpolation = { + x: this._lerp(cornerValues[0], cornerValues[1], contourValue), + y: 1 - this._lerp(cornerValues[2], cornerValues[1], contourValue) + }; + } } else if (type === 6 || type === 9) { + var leftAvg = (cornerValues[0] + cornerValues[3])/2; + var rigthAvg = (cornerValues[1] + cornerValues[2])/2; + var inter = this._lerp(rigthAvg, leftAvg, contourValue); + if(type === 9){ + inter = 1 - inter; + } next = [N,S]; interpolation = { - x: 0.5, + x: inter, y: 0.5 - }; + }; } else if (type === 7 || type === 8) { next = [N,W]; - interpolation = { - x: 1-this._lerp(cornerValues[1], cornerValues[0], contourValue), - y: 1-this._lerp(cornerValues[3], cornerValues[0], contourValue) - }; + if (type === 7){ + interpolation = { + x: 1-this._lerp(cornerValues[0], cornerValues[1], contourValue), + y: 1-this._lerp(cornerValues[0], cornerValues[3], contourValue) + }; + } + else{ + interpolation = { + x: 1-this._lerp(cornerValues[1], cornerValues[0], contourValue), + y: 1-this._lerp(cornerValues[3], cornerValues[0], contourValue) + }; + } } else if (type === 5 || type === 10) { + if (!previousPos) return null; var diff = [previousPos.x - currentPos.x, previousPos.y - currentPos.y]; if (diff[0] === -1){ return { @@ -208,7 +252,7 @@ torque.extend(IsoRenderer.prototype, torque.Event, { x: currentPos.x - 1, y: currentPos.y, interpolation: { - x: this._lerp(cornerValues[3], cornerValues[2], contourValue), + x: 1 - this._lerp(cornerValues[3], cornerValues[2], contourValue), y: this._lerp(cornerValues[1], cornerValues[2], contourValue) } }; @@ -223,7 +267,7 @@ torque.extend(IsoRenderer.prototype, torque.Event, { _lerp: function(valueA, valueB, contourValue){ - return 1 + (-0.5) * (contourValue - valueA) / (valueB - valueA); + return Math.max(Math.min(1 + (-0.5) * (contourValue - valueA) / (valueB - valueA), 0.8), 0.2); }, drawIsolines: function(){ @@ -272,8 +316,8 @@ torque.extend(IsoRenderer.prototype, torque.Event, { } else{ pointsTraveled.add(x+":"+y); - var NW = grid[y][x], - NE = grid[y][x+1], + var NW = y >= 0? grid[y][x]: 0, + NE = y >= 0? grid[y][x+1]: 0, SE = grid[y+1]? grid[y+1][x+1]: 0, SW = grid[y+1]? grid[y+1][x]: 0 var cornerValues = [NW, NE, SE, SW]; @@ -282,7 +326,7 @@ torque.extend(IsoRenderer.prototype, torque.Event, { var next = self._getNext(currentPos, previousPos, cornerValues, contourValues[c]); if (next){ if (line.length > 0 && (line[0].coord.x === x && line[0].coord.y === y)){ - lines.push(line); + lines[c].push(line); line = []; pointerX ++; return {x: pointerX, y: pointerY }; @@ -298,6 +342,9 @@ torque.extend(IsoRenderer.prototype, torque.Event, { } } } + } + for (var c = 0; c < lines.length; c++){ + var thisContour = lines[c]; if(style["-isoline-line-decay"]){ var max = contourValues[contourValues.length - 1]; ctx.globalAlpha = (contourValues[c]/max)*(style["-isoline-line-opacity"] || 0.8); @@ -305,39 +352,39 @@ torque.extend(IsoRenderer.prototype, torque.Event, { if(grad){ ctx.strokeStyle = "rgb("+grad[4*contourValues[c]]+","+grad[4*contourValues[c]+1]+","+grad[4*contourValues[c]+2]+")"; } - } - for (var l = 0; l < lines.length; l++){ - var line = this._cardinalSpline(lines[l]); - ctx.beginPath(); - ctx.moveTo(line[0][0], line[0][1]); - for (var p = 2; p < line.length; p+=2){ - ctx.lineTo(line[p], line[p+1]); + for (var l = 0; l < thisContour.length; l++){ + var line = this._cardinalSpline(thisContour[l]); + ctx.beginPath(); + ctx.moveTo(line[0][0], line[0][1]); + for (var p = 2; p < line.length; p+=2){ + ctx.lineTo(line[p], line[p+1]); + } + ctx.closePath(); + ctx.stroke(); + // ctx.fill(); } - ctx.closePath(); - ctx.stroke(); } - - ctx.globalAlpha = 0; } }, postProcess: function(){ this.drawIsolines(); }, - _generateGradient: function(ramp){ + _generateGradient: function(ramp, contourValues){ + var max = contourValues[contourValues.length-1]; var gradientCanvas = this._createCanvas(), gctx = gradientCanvas.getContext('2d'), - gradient = gctx.createLinearGradient(0, 0, 0, 256); + gradient = gctx.createLinearGradient(0, 0, 0, max); gradientCanvas.width = 1; - gradientCanvas.height = 256; + gradientCanvas.height = max; for (var i = 0; i < ramp.length; i++) { var color = "rgb("+ramp[i].rgb[0]+","+ramp[i].rgb[1]+","+ramp[i].rgb[2]+")"; gradient.addColorStop(i/(ramp.length-1), color); } gctx.fillStyle = gradient; - gctx.fillRect(0, 0, 1, 256); + gctx.fillRect(0, 0, 1, max); - return gctx.getImageData(0, 0, 1, 256).data; + return gctx.getImageData(0, 0, 1, max).data; }, _cardinalSpline: function(line){