All Filter Exampls Added

Example 16 removed as no longer required
added Color step filter
added Twist filter
added Dot screen

Gruntfile.js

@@ -68,6 +68,10 @@ module.exports = function(grunt) {
             '<%= dirs.src %>/filters/BlurFilter.js',
             '<%= dirs.src %>/filters/InvertFilter.js',
             '<%= dirs.src %>/filters/SepiaFilter.js',
+            '<%= dirs.src %>/filters/TwistFilter.js',
+            '<%= dirs.src %>/filters/ColorStepFilter.js',
+            '<%= dirs.src %>/filters/DotScreenFilter.js',
+            
             '<%= dirs.src %>/Outro.js'
         ], banner = [
             '/**',

bin/pixi.dev.js

@@ -11713,7 +11713,7 @@ PIXI.BlurFilter = function()
  */
 Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
     get: function() {
-        return this.blurX.blur;
+        return this.blurXFilter.blur;
     },
     set: function(value) {
   		this.blurXFilter.blur = this.blurYFilter.blur = value;
@@ -11770,7 +11770,7 @@ PIXI.InvertFilter = function()
 	
 	// set the uniforms
 	this.uniforms = {
-		invert: {type: 'f', value: 0},
+		invert: {type: 'f', value: 1},
 	};
 	
 	this.fragmentSrc = [
@@ -11781,7 +11781,7 @@ PIXI.InvertFilter = function()
 	  "uniform sampler2D uSampler;",
 	  "void main(void) {",
 	    "gl_FragColor = texture2D(uSampler, vTextureCoord);",
-		"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
+		"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
 		//"gl_FragColor.rgb = gl_FragColor.rgb  * gl_FragColor.a;",
 	    "gl_FragColor = gl_FragColor * vColor;",
 	  "}"
@@ -11860,6 +11860,247 @@ Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
     }
 });
 
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * 
+ * This filter applies a pixlate effect making display objects appear "blocky"
+ * @class PixelateFilter
+ * @contructor
+ */
+PIXI.TwistFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		radius: {type: 'f', value:0.5},
+		angle: {type: 'f', value:5},
+		offset: {type: 'f2', value:{x:0.5, y:0.5}},
+	};
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform vec4 dimensions;",
+	  "uniform sampler2D uSampler;",
+	  
+	  "uniform float radius;",
+      "uniform float angle;",
+      "uniform vec2 offset;",
+
+	  "void main(void) {",
+	 	"vec2 coord = vTextureCoord - offset;",
+		"float distance = length(coord);",
+	 	
+	 	"if (distance < radius){",
+
+		 	"float ratio = (radius - distance) / radius;",
+		 	"float angleMod = ratio * ratio * angle;",
+		 	"float s = sin(angleMod);",
+		 	"float c = cos(angleMod);",
+		 	"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
+
+	 	"}",
+
+	    "gl_FragColor = texture2D(uSampler, coord+offset);",
+	  "}"
+	];
+}
+
+PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
+
+/**
+ * 
+ * This point describes the the offset of the twist
+ * @property size
+ * @type Point
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
+    get: function() {
+        return this.uniforms.offset.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.offset.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes size of the twist
+ * @property size
+ * @type Number
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
+    get: function() {
+        return this.uniforms.radius.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.radius.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes angle of the twist
+ * @property angle
+ * @type Number
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
+    get: function() {
+        return this.uniforms.angle.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.angle.value = value;
+    }
+});
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * 
+ * This turns your displayObjects to black and white.
+ * @class GreyFilter
+ * @contructor
+ */
+PIXI.ColorStepFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+	
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		step: {type: 'f', value: 5},
+	};
+	
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform sampler2D uSampler;",
+	  "uniform float step;",
+	  "void main(void) {",
+	    "vec4 color = texture2D(uSampler, vTextureCoord);",
+	    "color = floor(color * step) / step;",
+	    "gl_FragColor = color * vColor;",
+	  "}"
+	];
+}
+
+PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
+
+/**
+The number of steps.
+@property step
+*/
+Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
+    get: function() {
+        return this.uniforms.step.value;
+    },
+    set: function(value) {
+    	this.uniforms.step.value = value;
+    }
+});
+
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
+ */
+
+/**
+ * 
+ * This filter applies a pixlate effect making display objects appear "blocky"
+ * @class PixelateFilter
+ * @contructor
+ */
+PIXI.DotScreenFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		scale: {type: 'f', value:1},
+		angle: {type: 'f', value:5},
+		dimensions:   {type: 'f4', value:[0,0,0,0]}
+	};
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform vec4 dimensions;",
+	  "uniform sampler2D uSampler;",
+
+	    "uniform float angle;",
+	    "uniform float scale;",
+
+	    "float pattern() {",
+	    	"float s = sin(angle), c = cos(angle);",
+	    	"vec2 tex = vTextureCoord * dimensions.xy;",
+	    	"vec2 point = vec2(",
+	    		"c * tex.x - s * tex.y,",
+	    		"s * tex.x + c * tex.y",
+	    	") * scale;",
+	    	"return (sin(point.x) * sin(point.y)) * 4.0;",
+	    "}",
+
+	    "void main() {",
+            "vec4 color = texture2D(uSampler, vTextureCoord);",
+            "float average = (color.r + color.g + color.b) / 3.0;",
+            "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
+        "}",
+	];
+}
+
+PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
+PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
+
+/**
+ * 
+ * This describes the the scale
+ * @property scale
+ * @type Number
+ */
+Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
+    get: function() {
+        return this.uniforms.scale.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.scale.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes angle
+ * @property angle
+ * @type Number
+ */
+Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
+    get: function() {
+        return this.uniforms.angle.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.angle.value = value;
+    }
+});
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */

examples/example 15 - Filters/indexAll.html

@@ -11,6 +11,8 @@
 	</style>
 	
 	<script src="../../bin/pixi.dev.js"></script>
+	<script src="dat.gui.min.js"></script>
+	
 	<script src="pixi.js"></script>
 </head>
 <body>
@@ -22,12 +24,96 @@
 	renderer.view.style.height = window.innerHeight + "px";
 	renderer.view.style.display = "block";
 	
+	var filtersSwitchs = [false, false, false, false, false, false, false, false];
+
 	// add render view to DOM
 	document.body.appendChild(renderer.view);
 
+	var gui = new dat.GUI({
+    //height : 5 * 32 - 1,
+    
+    width : 350
+	});
+	
+	var blurFilter = new PIXI.BlurFilter();
+
+	var blurFolder = gui.addFolder('Blur');
+	blurFolder.add(filtersSwitchs, '0').name("apply");
+	blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
+	blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
+
+	////
+	
+	var pixelateFilter = new PIXI.PixelateFilter();
+
+	var pixelateFolder = gui.addFolder('Pixelate');
+	pixelateFolder.add(filtersSwitchs, '1').name("apply");
+	pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
+	pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
+
+	////
+
+	var invertFilter = new PIXI.InvertFilter();
+
+	var invertFolder = gui.addFolder('Invert');
+	invertFolder.add(filtersSwitchs, '2').name("apply");
+	invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
+
+	////
+
+	var greyFilter = new PIXI.GreyFilter();
+
+	var greyFolder = gui.addFolder('Grey');
+	greyFolder.add(filtersSwitchs, '3').name("apply");
+	greyFolder.add(greyFilter, 'grey', 0, 1).name("Grey");
+
+	////
+
+	var sepiaFilter = new PIXI.SepiaFilter();
+
+	var sepiaFolder = gui.addFolder('Sepia');
+	sepiaFolder.add(filtersSwitchs, '4').name("apply");
+	sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
+
+	////
+
+	var twistFilter = new PIXI.TwistFilter();
+
+	var twistFolder = gui.addFolder('Twist');
+	twistFolder.add(filtersSwitchs, '5').name("apply");
+	twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
+	twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
+	
+	twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
+	twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
+
+	////
+
+	var dotScreenFilter = new PIXI.DotScreenFilter();
+
+	var dotScreenFolder = gui.addFolder('DotScreen');
+	dotScreenFolder.add(filtersSwitchs, '6').name("apply");
+	dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
+	dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
+
+	////
+
+	var colorStepFilter = new PIXI.ColorStepFilter();
+	
+	var colorStepFolder = gui.addFolder('ColorStep');
+	colorStepFolder.add(filtersSwitchs, '7').name("apply");
+
+	colorStepFolder.add(colorStepFilter, 'step', 1, 100);
+	colorStepFolder.add(colorStepFilter, 'step', 1, 100);
+
+	var filterCollection = [blurFilter, pixelateFilter, invertFilter, greyFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter];
+
+
 	// create an new instance of a pixi stage
 	var stage = new PIXI.Stage(0xFFFFFF, true);
 	
+	
+
 	var pondContainer = new PIXI.DisplayObjectContainer();
 	stage.addChild(pondContainer);
 
@@ -123,7 +209,14 @@
 		var blurAmount = Math.cos(count) ;
 		var blurAmount2 = Math.sin(count * 0.8)  ;
 
-		
+		var filtersToApply = [];
+
+		for (var i = 0; i < filterCollection.length; i++) {
+			
+			if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
+		};
+
+		stage.filters = filtersToApply.length > 0 ? filtersToApply : null;
 
 		for (var i = 0; i < fishs.length; i++) 
 		{

examples/example 16 - Displacement/index.html

@@ -1,213 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-	<title>pixi.js example 15 - Filters</title>
-	<style>
-		body {
-			margin: 0;
-			padding: 0;
-			background-color: #000000;
-		}
-	</style>
-	
-	<script src="../../bin/pixi.dev.js"></script>
-	<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
-	<script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
-	<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
-	<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
-	<script src="../../src/pixi/renderers/webgl/filters/Filter.js"></script>
-	<script src="../../src/pixi/renderers/webgl/filters/FilterManager.js"></script>
-	<script src="../../src/pixi/filters/InvertFilter.js"></script>
-	<script src="../../src/pixi/filters/SepiaFilter.js"></script>
-	<script src="../../src/pixi/filters/BlurXFilter.js"></script>
-	<script src="../../src/pixi/filters/BlurFilter.js"></script>
-	<script src="../../src/pixi/filters/BlurYFilter.js"></script>
-	<script src="../../src/pixi/filters/SmartBlurFilter.js"></script>
-	<script src="../../src/pixi/filters/PixelateFilter.js"></script>
-</head>
-<body>
-	<script>
-	
-	var renderer = PIXI.autoDetectRenderer(800, 600);
-	
-	
-	var f2 = new PIXI.BlurFilter()//new PIXI.Filter();
-	var f = new PIXI.GreyFilter()//new PIXI.Filter();
-	var blurX = new PIXI.BlurXFilter()//new PIXI.Filter();
-	var blurY = new PIXI.BlurYFilter();
-	var smart = new PIXI.PixelateFilter();
-
-	var blur = new PIXI.BlurFilter();
-
-	// create an new instance of a pixi stage
-	var stage = new PIXI.Stage(0xFFFFFF, true);
-	
-	stage.interactive = true;
-	
-	var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
-	bg.anchor.x = 0.5;
-	bg.anchor.y = 0.5;
-	 
-	bg.position.x = 800/2;
-	bg.position.y = 600/2;
-	
-
-	var colorMatrix =  [1,0,0,0,
-						0,1,0,0,
-						0,0,1,0,
-						0,0,0,1];
-						
-	
-	var mapTexture = new PIXI.RenderTexture(800, 600);
-
-	
-	var container = new PIXI.DisplayObjectContainer();
-	container.position.x = 800/2;
-	container.position.y = 600/2;
-	
-	var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
-	bgFront.anchor.x = 0.5;
-	bgFront.anchor.y = 0.5;
-	bgFront.filters = [f2]//, blurY];
-	//smart
-
-	var filter = new PIXI.DisplacementFilter(PIXI.Texture.fromImage("SceneRotate.jpg"));
-	
-
-	stage.addChild(bgFront);
-	bgFront.position.x = 800/2;
-	bgFront.position.y = 600/2;
-	bgFront.scale.y = 0.3;
-	var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
-	light2.anchor.x = 0.5;
-	light2.anchor.y = 0.5;
-	container.addChild(light2);
-	
-	var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
-	light1.anchor.x = 0.5;
-	light1.anchor.y = 0.5;
-	container.addChild(light1);
-	
-	var panda =  PIXI.Sprite.fromImage("panda.png");
-	panda.anchor.x = 0.5;
-	panda.anchor.y = 0.5;
-	
-	
-	container.addChild(panda);
-	
-	stage.addChild(container);
-	
-	// create a renderer instance
-	
-	renderer.view.style.position = "absolute"
-	//renderer.view.style.width = window.innerWidth + "px";
-	//renderer.view.style.height = window.innerHeight + "px";
-	renderer.view.style.display = "block";
-	
-	// add render view to DOM
-	document.body.appendChild(renderer.view);
-	
-	//container.filterArea = new PIXI.Rectangle(0,0,800, 600);
-	//container.filters = [smart]//f, f2];
-	
-	//panda.filters = [f2];
-	panda.filters = [filter]//,f2]
-	var count = 0;
-	var switchy = false;
-	
-	stage.click = stage.tap = function()
-	{
-		switchy = !switchy
-		
-		if(!switchy)
-		{
-			container.filters = [smart];//
-		//	container.filters = [filter]//,blurX, blurY];
-		}
-		else
-		{
-			container.filters = null//.. [filter];
-	//		container.filters = null;
-		}
-		
-		//PIXI.runList(stage);	
-	}
-
-
-	/*
-	 * Add a pixi Logo!
-	 */
-	var logo = PIXI.Sprite.fromImage("../../logo_small.png");
-//	stage.addChild(logo);
-	
-	logo.anchor.x = 1;
-	logo.position.x = 620
-	logo.scale.x = logo.scale.y = 0.5;
-	logo.position.y = 320;
-	logo.interactive = true;
-	logo.buttonMode = true;
-	
-	logo.click = logo.tap = function()
-	{
-		window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
-	}
-	
-	var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
-	help.position.y = 600 - 20;
-	help.position.x = 10;
-	stage.addChild(help);
-	
-	//stage.filters = [filter];
-	//stage.addChild(new PIXI.Sprite(mapTexture))
-		
-	//PIXI.runList(stage);
-	
-	requestAnimFrame(animate);
-	
-	var position = new PIXI.Point(0, 0);
-	
-	var pixelSize = new PIXI.Point(2,2);
-	smart.size = pixelSize;
-
-	function animate() {
-		
-		mapTexture.render(panda, position, true);
-		
-	
-	//	filter.scale.x = Math.sin(count) * 100;
-	//filter.scale.y = Math.cos(count) * 100;
-		panda.rotation += 0.01;
-	//	bgFront.rotation -= 0.01;
-		
-		light1.rotation += 0.02;
-		light2.rotation += 0.01;
-
-		panda.scale.x = 1+ Math.sin(count * 0.1) * 0.4;
-		panda.scale.y = (1 + Math.cos(count * 0.1) * 0.4) //* 0.2;
-		panda.position.x = count;
-		count += 0.1;
-		pixelSize.x = 20 + Math.sin(count * 0.1) * 20;
-		pixelSize.y = 20 + Math.sin(count * 0.1) * 20;
-
-		var val = 16;
-		f2.blur = 16// * val//  0.5 * 0.5//Math.sin(count) * 1/512//128// * 2;
-		bgFront.scale.y = 0.5 //+ Math.sin(count * 0.1) * 0.4;
-		bgFront.scale.x = 0.5 //+ Math.sin(count * 0.2) * 0.4;
-
-
-	//	blurY.blur = Math.cos(count)  * 1/128;
-	//	filter.matrix = colorMatrix;
-		
-		f.grey = Math.sin(count) 
-
-	    renderer.render(stage);
-	 //  f.renderTex();
-	   // f.render();
-	    
-	    requestAnimFrame( animate );
-	}
-
-	</script>
-
-	</body>
-</html>

src/pixi/filters/BlurFilter.js

@@ -30,7 +30,7 @@ PIXI.BlurFilter = function()
  */
 Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
     get: function() {
-        return this.blurX.blur;
+        return this.blurXFilter.blur;
     },
     set: function(value) {
   		this.blurXFilter.blur = this.blurYFilter.blur = value;

src/pixi/filters/ColorStepFilter.js

@@ -0,0 +1,51 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * 
+ * This turns your displayObjects to black and white.
+ * @class GreyFilter
+ * @contructor
+ */
+PIXI.ColorStepFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+	
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		step: {type: 'f', value: 5},
+	};
+	
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform sampler2D uSampler;",
+	  "uniform float step;",
+	  "void main(void) {",
+	    "vec4 color = texture2D(uSampler, vTextureCoord);",
+	    "color = floor(color * step) / step;",
+	    "gl_FragColor = color * vColor;",
+	  "}"
+	];
+}
+
+PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
+
+/**
+The number of steps.
+@property step
+*/
+Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
+    get: function() {
+        return this.uniforms.step.value;
+    },
+    set: function(value) {
+    	this.uniforms.step.value = value;
+    }
+});

src/pixi/filters/DotScreenFilter.js

@@ -0,0 +1,86 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
+ */
+
+/**
+ * 
+ * This filter applies a pixlate effect making display objects appear "blocky"
+ * @class PixelateFilter
+ * @contructor
+ */
+PIXI.DotScreenFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		scale: {type: 'f', value:1},
+		angle: {type: 'f', value:5},
+		dimensions:   {type: 'f4', value:[0,0,0,0]}
+	};
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform vec4 dimensions;",
+	  "uniform sampler2D uSampler;",
+
+	    "uniform float angle;",
+	    "uniform float scale;",
+
+	    "float pattern() {",
+	    	"float s = sin(angle), c = cos(angle);",
+	    	"vec2 tex = vTextureCoord * dimensions.xy;",
+	    	"vec2 point = vec2(",
+	    		"c * tex.x - s * tex.y,",
+	    		"s * tex.x + c * tex.y",
+	    	") * scale;",
+	    	"return (sin(point.x) * sin(point.y)) * 4.0;",
+	    "}",
+
+	    "void main() {",
+            "vec4 color = texture2D(uSampler, vTextureCoord);",
+            "float average = (color.r + color.g + color.b) / 3.0;",
+            "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
+        "}",
+	];
+}
+
+PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
+PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
+
+/**
+ * 
+ * This describes the the scale
+ * @property scale
+ * @type Number
+ */
+Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
+    get: function() {
+        return this.uniforms.scale.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.scale.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes angle
+ * @property angle
+ * @type Number
+ */
+Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
+    get: function() {
+        return this.uniforms.angle.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.angle.value = value;
+    }
+});

src/pixi/filters/InvertFilter.js

@@ -16,7 +16,7 @@ PIXI.InvertFilter = function()
 	
 	// set the uniforms
 	this.uniforms = {
-		invert: {type: 'f', value: 0},
+		invert: {type: 'f', value: 1},
 	};
 	
 	this.fragmentSrc = [
@@ -27,7 +27,7 @@ PIXI.InvertFilter = function()
 	  "uniform sampler2D uSampler;",
 	  "void main(void) {",
 	    "gl_FragColor = texture2D(uSampler, vTextureCoord);",
-		"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
+		"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
 		//"gl_FragColor.rgb = gl_FragColor.rgb  * gl_FragColor.a;",
 	    "gl_FragColor = gl_FragColor * vColor;",
 	  "}"

src/pixi/filters/TwistFilter.js

@@ -0,0 +1,103 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * 
+ * This filter applies a pixlate effect making display objects appear "blocky"
+ * @class PixelateFilter
+ * @contructor
+ */
+PIXI.TwistFilter = function()
+{
+	PIXI.AbstractFilter.call( this );
+
+	this.passes = [this];
+	
+	// set the uniforms
+	this.uniforms = {
+		radius: {type: 'f', value:0.5},
+		angle: {type: 'f', value:5},
+		offset: {type: 'f2', value:{x:0.5, y:0.5}},
+	};
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform vec4 dimensions;",
+	  "uniform sampler2D uSampler;",
+	  
+	  "uniform float radius;",
+      "uniform float angle;",
+      "uniform vec2 offset;",
+
+	  "void main(void) {",
+	 	"vec2 coord = vTextureCoord - offset;",
+		"float distance = length(coord);",
+	 	
+	 	"if (distance < radius){",
+
+		 	"float ratio = (radius - distance) / radius;",
+		 	"float angleMod = ratio * ratio * angle;",
+		 	"float s = sin(angleMod);",
+		 	"float c = cos(angleMod);",
+		 	"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
+
+	 	"}",
+
+	    "gl_FragColor = texture2D(uSampler, coord+offset);",
+	  "}"
+	];
+}
+
+PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
+
+/**
+ * 
+ * This point describes the the offset of the twist
+ * @property size
+ * @type Point
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
+    get: function() {
+        return this.uniforms.offset.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.offset.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes size of the twist
+ * @property size
+ * @type Number
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
+    get: function() {
+        return this.uniforms.radius.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.radius.value = value;
+    }
+});
+
+/**
+ * 
+ * This radius describes angle of the twist
+ * @property angle
+ * @type Number
+ */
+Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
+    get: function() {
+        return this.uniforms.angle.value;
+    },
+    set: function(value) {
+    	this.dirty = true;
+    	this.uniforms.angle.value = value;
+    }
+});