diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/index.js b/src/filters/index.js index 42045e8..4e59c59 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -27,10 +27,10 @@ PixelateFilter: require('./pixelate/PixelateFilter'), RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), - // SepiaFilter: require('./SepiaFilter'), + SepiaFilter: require('./sepia/SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), - // TwistFilter: require('./TwistFilter') + TwistFilter: require('./twist/TwistFilter') }; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/index.js b/src/filters/index.js index 42045e8..4e59c59 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -27,10 +27,10 @@ PixelateFilter: require('./pixelate/PixelateFilter'), RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), - // SepiaFilter: require('./SepiaFilter'), + SepiaFilter: require('./sepia/SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), - // TwistFilter: require('./TwistFilter') + TwistFilter: require('./twist/TwistFilter') }; diff --git a/src/filters/sepia/SepiaFilter.js b/src/filters/sepia/SepiaFilter.js new file mode 100644 index 0000000..b07c47c --- /dev/null +++ b/src/filters/sepia/SepiaFilter.js @@ -0,0 +1,46 @@ +var core = require('../../core'); + +/** + * This applies a sepia effect to your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function SepiaFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/sepia.frag', 'utf8'), + // custom uniforms + { + sepia: { type: '1f', value: 1 } + } + ); +} + +SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; + +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. `1` will apply the full sepia effect, and + * `0` will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () + { + return this.uniforms.sepia.value; + }, + set: function (value) + { + this.uniforms.sepia.value = value; + } + } +}); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/index.js b/src/filters/index.js index 42045e8..4e59c59 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -27,10 +27,10 @@ PixelateFilter: require('./pixelate/PixelateFilter'), RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), - // SepiaFilter: require('./SepiaFilter'), + SepiaFilter: require('./sepia/SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), - // TwistFilter: require('./TwistFilter') + TwistFilter: require('./twist/TwistFilter') }; diff --git a/src/filters/sepia/SepiaFilter.js b/src/filters/sepia/SepiaFilter.js new file mode 100644 index 0000000..b07c47c --- /dev/null +++ b/src/filters/sepia/SepiaFilter.js @@ -0,0 +1,46 @@ +var core = require('../../core'); + +/** + * This applies a sepia effect to your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function SepiaFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/sepia.frag', 'utf8'), + // custom uniforms + { + sepia: { type: '1f', value: 1 } + } + ); +} + +SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; + +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. `1` will apply the full sepia effect, and + * `0` will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () + { + return this.uniforms.sepia.value; + }, + set: function (value) + { + this.uniforms.sepia.value = value; + } + } +}); diff --git a/src/filters/sepia/sepia.frag b/src/filters/sepia/sepia.frag new file mode 100644 index 0000000..6efc063 --- /dev/null +++ b/src/filters/sepia/sepia.frag @@ -0,0 +1,14 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float sepia; + +const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912); + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia); +} diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/index.js b/src/filters/index.js index 42045e8..4e59c59 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -27,10 +27,10 @@ PixelateFilter: require('./pixelate/PixelateFilter'), RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), - // SepiaFilter: require('./SepiaFilter'), + SepiaFilter: require('./sepia/SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), - // TwistFilter: require('./TwistFilter') + TwistFilter: require('./twist/TwistFilter') }; diff --git a/src/filters/sepia/SepiaFilter.js b/src/filters/sepia/SepiaFilter.js new file mode 100644 index 0000000..b07c47c --- /dev/null +++ b/src/filters/sepia/SepiaFilter.js @@ -0,0 +1,46 @@ +var core = require('../../core'); + +/** + * This applies a sepia effect to your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function SepiaFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/sepia.frag', 'utf8'), + // custom uniforms + { + sepia: { type: '1f', value: 1 } + } + ); +} + +SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; + +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. `1` will apply the full sepia effect, and + * `0` will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () + { + return this.uniforms.sepia.value; + }, + set: function (value) + { + this.uniforms.sepia.value = value; + } + } +}); diff --git a/src/filters/sepia/sepia.frag b/src/filters/sepia/sepia.frag new file mode 100644 index 0000000..6efc063 --- /dev/null +++ b/src/filters/sepia/sepia.frag @@ -0,0 +1,14 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float sepia; + +const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912); + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js new file mode 100644 index 0000000..4aed6b2 --- /dev/null +++ b/src/filters/twist/TwistFilter.js @@ -0,0 +1,81 @@ +var core = require('../../core'); + +/** + * This filter applies a twist effect making display objects appear twisted in the given direction. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TwistFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/twist.frag', 'utf8'), + // custom uniforms + { + radius: { type: '1f', value: 0.5 }, + angle: { type: '1f', value: 5 }, + offset: { type: 'v2', value: { x: 0.5, y: 0.5 } } + } + ); +} + +TwistFilter.prototype = Object.create(core.AbstractFilter.prototype); +TwistFilter.prototype.constructor = TwistFilter; +module.exports = TwistFilter; + +Object.defineProperties(TwistFilter.prototype, { + /** + * This point describes the the offset of the twist. + * + * @member {Point} + * @memberof TwistFilter# + */ + offset: { + get: function () + { + return this.uniforms.offset.value; + }, + set: function (value) + { + this.uniforms.offset.value = value; + } + }, + + /** + * This radius of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + radius: { + get: function () + { + return this.uniforms.radius.value; + }, + set: function (value) + { + this.uniforms.radius.value = value; + } + }, + + /** + * This angle of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + angle: { + get: function () + { + return this.uniforms.angle.value; + }, + set: function (value) + { + this.uniforms.angle.value = value; + } + } +}); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js deleted file mode 100644 index d86f45c..0000000 --- a/src/filters/SepiaFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This applies a sepia effect to your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function SepiaFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - sepia: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float sepia;', - 'uniform sampler2D uSampler;', - - 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - '}' - ]; -} - -SepiaFilter.prototype = Object.create(AbstractFilter.prototype); -SepiaFilter.prototype.constructor = SepiaFilter; -module.exports = SepiaFilter; - -Object.defineProperties(SepiaFilter.prototype, { - /** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * - * @member {number} - * @memberof SepiaFilter# - */ - sepia: { - get: function () - { - return this.uniforms.sepia.value; - }, - set: function (value) - { - this.uniforms.sepia.value = value; - } - } -}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js deleted file mode 100644 index 2fe1f1b..0000000 --- a/src/filters/TwistFilter.js +++ /dev/null @@ -1,106 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TwistFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - radius: { type: '1f', value: 0.5}, - angle: { type: '1f', value: 5}, - offset: { type: '2f', value: { x: 0.5, y: 0.5 } } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float radius;', - 'uniform float angle;', - 'uniform vec2 offset;', - 'uniform sampler2D uSampler;', - - '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);', - '}' - ]; -} - -TwistFilter.prototype = Object.create(AbstractFilter.prototype); -TwistFilter.prototype.constructor = TwistFilter; -module.exports = TwistFilter; - -Object.defineProperties(TwistFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {Point} - * @memberof TwistFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset.value; - }, - set: function (value) - { - this.uniforms.offset.value = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius.value; - }, - set: function (value) - { - this.uniforms.radius.value = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof TwistFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle.value; - }, - set: function (value) - { - this.uniforms.angle.value = value; - } - } -}); diff --git a/src/filters/index.js b/src/filters/index.js index 42045e8..4e59c59 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -27,10 +27,10 @@ PixelateFilter: require('./pixelate/PixelateFilter'), RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), - // SepiaFilter: require('./SepiaFilter'), + SepiaFilter: require('./sepia/SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), - // TwistFilter: require('./TwistFilter') + TwistFilter: require('./twist/TwistFilter') }; diff --git a/src/filters/sepia/SepiaFilter.js b/src/filters/sepia/SepiaFilter.js new file mode 100644 index 0000000..b07c47c --- /dev/null +++ b/src/filters/sepia/SepiaFilter.js @@ -0,0 +1,46 @@ +var core = require('../../core'); + +/** + * This applies a sepia effect to your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function SepiaFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/sepia.frag', 'utf8'), + // custom uniforms + { + sepia: { type: '1f', value: 1 } + } + ); +} + +SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; + +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. `1` will apply the full sepia effect, and + * `0` will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () + { + return this.uniforms.sepia.value; + }, + set: function (value) + { + this.uniforms.sepia.value = value; + } + } +}); diff --git a/src/filters/sepia/sepia.frag b/src/filters/sepia/sepia.frag new file mode 100644 index 0000000..6efc063 --- /dev/null +++ b/src/filters/sepia/sepia.frag @@ -0,0 +1,14 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float sepia; + +const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912); + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js new file mode 100644 index 0000000..4aed6b2 --- /dev/null +++ b/src/filters/twist/TwistFilter.js @@ -0,0 +1,81 @@ +var core = require('../../core'); + +/** + * This filter applies a twist effect making display objects appear twisted in the given direction. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TwistFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/twist.frag', 'utf8'), + // custom uniforms + { + radius: { type: '1f', value: 0.5 }, + angle: { type: '1f', value: 5 }, + offset: { type: 'v2', value: { x: 0.5, y: 0.5 } } + } + ); +} + +TwistFilter.prototype = Object.create(core.AbstractFilter.prototype); +TwistFilter.prototype.constructor = TwistFilter; +module.exports = TwistFilter; + +Object.defineProperties(TwistFilter.prototype, { + /** + * This point describes the the offset of the twist. + * + * @member {Point} + * @memberof TwistFilter# + */ + offset: { + get: function () + { + return this.uniforms.offset.value; + }, + set: function (value) + { + this.uniforms.offset.value = value; + } + }, + + /** + * This radius of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + radius: { + get: function () + { + return this.uniforms.radius.value; + }, + set: function (value) + { + this.uniforms.radius.value = value; + } + }, + + /** + * This angle of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + angle: { + get: function () + { + return this.uniforms.angle.value; + }, + set: function (value) + { + this.uniforms.angle.value = value; + } + } +}); diff --git a/src/filters/twist/twist.frag b/src/filters/twist/twist.frag new file mode 100644 index 0000000..0aaf9bf --- /dev/null +++ b/src/filters/twist/twist.frag @@ -0,0 +1,25 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float radius; +uniform float angle; +uniform vec2 offset; + +void main(void) +{ + vec2 coord = vTextureCoord - offset; + float dist = length(coord); + + if (dist < radius) + { + float ratio = (radius - dist) / 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); +}