Newer
Older
pixi.js / src / pixi / filters / TwistFilter.js
@Mat Groves Mat Groves on 2 Nov 2013 2 KB All Filter Exampls Added
/**
 * @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;
    }
});