Fix for standardizing stretching logic across all filters, standardized code a bit more

Author: David Gillen

src/easeljs/filters/AlphaMapFilter.js

@@ -85,18 +85,24 @@ this.createjs = this.createjs || {};
 
 	// private properties:
 		/**
-		 * @property _alphaMap
+		 * @property _map
 		 * @protected
 		 * @type HTMLImageElement|HTMLCanvasElement
 		 **/
-		this._alphaMap = null;
+		this._map = null;
 
 		/**
-		 * @property _mapData
+		 * @property _mapCtx
 		 * @protected
-		 * @type Uint8ClampedArray
+		 * @type CanvasRenderingContext2D
 		 **/
-		this._mapData = null;
+		this._mapCtx = null;
+
+		/**
+		 * @property _mapTexture
+		 * @protected
+		 * @type WebGLTexture
+		 */
 		this._mapTexture = null;
 
 		this.FRAG_SHADER_BODY = (
@@ -124,7 +130,7 @@ this.createjs = this.createjs || {};
 
 	/** docced in super class **/
 	p.shaderParamSetup = function(gl, stage, shaderProgram) {
-		if(!this._mapTexture) { this._mapTexture = gl.createTexture(); }
+		if(this._mapTexture === null) { this._mapTexture = gl.createTexture(); }
 
 		gl.activeTexture(gl.TEXTURE1);
 		gl.bindTexture(gl.TEXTURE_2D, this._mapTexture);
@@ -143,8 +149,6 @@ this.createjs = this.createjs || {};
 	/** docced in super class **/
 	p.clone = function () {
 		var o = new AlphaMapFilter(this.alphaMap);
-		o._alphaMap = this._alphaMap;
-		o._mapData = this._mapData;
 		return o;
 	};
 
@@ -156,18 +160,43 @@ this.createjs = this.createjs || {};
 
 // private methods:
 	/** docced in super class **/
-	p._applyFilter = function (imageData) {
-		if (!this.alphaMap) { return true; }
+	p._applyFilter = function(imageData) {
 		if (!this._prepAlphaMap()) { return false; }
 
-		var data = imageData.data;
-		var map = this._mapData;
-
-
-		for(var i=0, l=data.length; i<l; i += 4) {
-			data[i + 3] = map[i] || 0;
+		var outArray = imageData.data;
+		var width = imageData.width;
+		var height = imageData.height;
+		var rowOffset, pixelStart;
+
+		var sampleData = this._mapCtx.getImageData(0,0, this._map.width,this._map.height);
+		var sampleArray = sampleData.data;
+		var sampleWidth = sampleData.width;
+		var sampleHeight = sampleData.height;
+		var sampleRowOffset, samplePixelStart;
+
+		var widthRatio = sampleWidth/width;
+		var heightRatio = sampleHeight/height;
+
+		// performance optimizing lookup
+
+		// the x and y need to stretch separately, nesting the for loops simplifies this logic even if the array is flat
+		for (var i=0; i<height; i++) {
+			rowOffset = i * width;
+			sampleRowOffset = ((i*heightRatio) |0) * sampleWidth;
+
+			// the arrays are int arrays, so a single pixel is [r,g,b,a, ...],so calculate the start of the pixel
+			for (var j=0; j<width; j++) {
+				pixelStart = (rowOffset + j) *4;
+				samplePixelStart = (sampleRowOffset + ((j*widthRatio) |0)) *4;
+
+				// modify the pixels
+				outArray[pixelStart] =   outArray[pixelStart];
+				outArray[pixelStart+1] = outArray[pixelStart+1];
+				outArray[pixelStart+2] = outArray[pixelStart+2];
+				outArray[pixelStart+3] = sampleArray[samplePixelStart];
+			}
 		}
-		
+
 		return true;
 	};
 
@@ -177,10 +206,9 @@ this.createjs = this.createjs || {};
 	 **/
 	p._prepAlphaMap = function () {
 		if (!this.alphaMap) { return false; }
-		if (this.alphaMap == this._alphaMap && this._mapData) { return true; }
+		if (this.alphaMap === this._map && this._mapCtx) { return true; }
 
-		this._mapData = null;
-		var map = this._alphaMap = this.alphaMap;
+		var map = this._map = this.alphaMap;
 		var canvas = map;
 		var ctx;
 		if (map instanceof HTMLCanvasElement) {
@@ -193,14 +221,8 @@ this.createjs = this.createjs || {};
 			ctx.drawImage(map, 0, 0);
 		}
 
-		try {
-			var imgData = ctx.getImageData(0, 0, map.width, map.height);
-		} catch (e) {
-			//if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e);
-			return false;
-		}
-		
-		this._mapData = imgData.data;
+		this._mapCtx = ctx;
+
 		return true;
 	};
 

src/easeljs/filters/AlphaMaskFilter.js

@@ -129,26 +129,25 @@ this.createjs = this.createjs || {};
 	 * @param {Number} y The y position to use for the source rect.
 	 * @param {Number} width The width to use for the source rect.
 	 * @param {Number} height The height to use for the source rect.
-	 * @param {CanvasRenderingContext2D} [targetCtx] NOT SUPPORTED IN THIS FILTER. The 2D context to draw the result to. Defaults to the context passed to ctx.
-	 * @param {Number} [targetX] NOT SUPPORTED IN THIS FILTER. The x position to draw the result to. Defaults to the value passed to x.
-	 * @param {Number} [targetY] NOT SUPPORTED IN THIS FILTER. The y position to draw the result to. Defaults to the value passed to y.
+	 * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.
 	 * @return {Boolean} If the filter was applied successfully.
 	 **/
-	p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
+	p.applyFilter = function (ctx, x, y, width, height, targetCtx) {
 		if (!this.mask) { return true; }
-		targetCtx = targetCtx || ctx;
-		if (targetX == null) { targetX = x; }
-		if (targetY == null) { targetY = y; }
 
-		targetCtx.save();
-		if (ctx != targetCtx) {
-			// TODO: support targetCtx and targetX/Y
-			// clearRect, then draw the ctx in?
-			return false;
+		if (targetCtx === undefined) { targetCtx = ctx; }
+		if (targetCtx !== ctx) {
+			targetCtx.drawImage(ctx.canvas,
+				0, 0, ctx.canvas.width, ctx.canvas.height,
+				0, 0, targetCtx.canvas.width, targetCtx.canvas.height
+			);
 		}
 
+		targetCtx.save();
+
 		targetCtx.globalCompositeOperation = "destination-in";
-		targetCtx.drawImage(this.mask, targetX, targetY);
+		targetCtx.drawImage(this.mask, 0,0, this.mask.width,this.mask.height, x,y, width,height);
+
 		targetCtx.restore();
 		return true;
 	};

src/easeljs/filters/ColorMatrix.js

@@ -138,7 +138,7 @@ this.createjs = this.createjs||{};
 
 	/**
 	 * Create an instance of ColorMatrix using the Greyscale preset.
-	 * This differs from -100 saturation in that it uses a balanced representation per channel instead of luminance.
+	 * Note: -100 saturation accounts for perceived brightness, the greyscale preset treats all channels equally.
 	 * @returns {ColorMatrix}
 	 */
 	ColorMatrix.createGreyscalePreset = function() {

src/easeljs/filters/DisplacementFilter.js

@@ -148,39 +148,51 @@ this.createjs = this.createjs||{};
 // private methods:
 	/** docced in super class **/
 	p._applyFilter = function(imageData) {
-		var refPixels = imageData.data.slice();
-		var outPixels = imageData.data;
+		var refArray = imageData.data.slice(); // as we're reaching across pixels we need an unmodified clone of the source
+
+		var outArray = imageData.data;
 		var width = imageData.width;
 		var height = imageData.height;
-		var offset, pixel;
+		var rowOffset, pixelStart;
+
+		var sampleData = this._dudvCtx.getImageData(0,0, this.dudvMap.width,this.dudvMap.height);
+		var sampleArray = sampleData.data;
+		var sampleWidth = sampleData.width;
+		var sampleHeight = sampleData.height;
+		var sampleRowOffset, samplePixelStart;
 
-		var dudvData = this._dudvCtx.getImageData(0,0, this.dudvMap.width,this.dudvMap.height);
-		var dudvPixels = dudvData.data;
-		var dudvWidth = dudvData.width;
-		var dudvHeight = dudvData.height;
-		var dudvOffset, dudvPixel;
+		var widthRatio = sampleWidth/width;
+		var heightRatio = sampleHeight/height;
+		var pxRange = 1/255;
 
+		// performance optimizing lookup
+		var distance = this.distance*2;
+
+		// the x and y need to stretch separately, nesting the for loops simplifies this logic even if the array is flat
 		for (var i=0; i<height; i++) {
-			offset = i * width;
-			dudvOffset = ((i*(dudvHeight/height))|0) * dudvWidth;
+			rowOffset = i * width;
+			sampleRowOffset = ((i*heightRatio) |0) * sampleWidth;
+
+			// the arrays are int arrays, so a single pixel is [r,g,b,a, ...],so calculate the start of the pixel
 			for (var j=0; j<width; j++) {
-				pixel = (offset + j) *4;
-				dudvPixel = (dudvOffset + ((j*(dudvWidth/width)) |0) ) *4;
+				pixelStart = (rowOffset + j) *4;
+				samplePixelStart = (sampleRowOffset + ((j*widthRatio) |0)) *4;
 
-				var deltaPower = dudvPixels[dudvPixel+3] / 255;
-				var xDelta = ((((dudvPixels[dudvPixel] - 128)/128) * deltaPower) * this.distance) |0;
-				var yDelta = ((((dudvPixels[dudvPixel+1] - 128)/128) * deltaPower) * this.distance |0);
+				// modify the pixels
+				var deltaPower = sampleArray[samplePixelStart+3] * pxRange * distance;
+				var xDelta = ((sampleArray[samplePixelStart] * pxRange - 0.5) * deltaPower) |0;
+				var yDelta = ((sampleArray[samplePixelStart+1] * pxRange - 0.5) * deltaPower) |0;
 
 				if (j+xDelta < 0) { xDelta = -j; }
 				if (j+xDelta > width) { xDelta = width-j; }
 				if (i+yDelta < 0) { yDelta = -i; }
 				if (i+yDelta > height) { yDelta = height-i; }
 
-				var targetPixel = (pixel + xDelta*4) + yDelta*4*width;
-				outPixels[pixel] =		refPixels[targetPixel];
-				outPixels[pixel+1] =	refPixels[targetPixel+1];
-				outPixels[pixel+2] =	refPixels[targetPixel+2];
-				outPixels[pixel+3] =	refPixels[targetPixel+3];
+				var targetPixelStart = (pixelStart + xDelta*4) + yDelta*4*width;
+				outArray[pixelStart] =   refArray[targetPixelStart];
+				outArray[pixelStart+1] = refArray[targetPixelStart+1];
+				outArray[pixelStart+2] = refArray[targetPixelStart+2];
+				outArray[pixelStart+3] = refArray[targetPixelStart+3];
 			}
 		}
 

src/easeljs/filters/Filter.js

@@ -164,23 +164,19 @@ this.createjs = this.createjs||{};
 	 * @param {Number} y The y position to use for the source rect.
 	 * @param {Number} width The width to use for the source rect.
 	 * @param {Number} height The height to use for the source rect.
-	 * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.
-	 * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x.
-	 * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y.
+	 * @param {CanvasRenderingContext2D} [targetCtx=ctx] The 2D context to draw the result to. Defaults to the context passed to ctx.
 	 * @return {Boolean} If the filter was applied successfully.
 	 **/
-	p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {
+	p.applyFilter = function(ctx, x, y, width, height, targetCtx) {
 		// this is the default behaviour because most filters access pixel data. It is overridden when not needed.
 		targetCtx = targetCtx || ctx;
-		if (targetX == null) { targetX = x; }
-		if (targetY == null) { targetY = y; }
 		try {
 			var imageData = ctx.getImageData(x, y, width, height);
 		} catch (e) {
 			return false;
 		}
 		if (this._applyFilter(imageData)) {
-			targetCtx.putImageData(imageData, targetX, targetY);
+			targetCtx.putImageData(imageData, x, y);
 			return true;
 		}
 		return false;