Newer
Older
pixi.js / src / filters / DotScreenFilter.js
@Chad Engler Chad Engler on 27 Dec 2014 2 KB tons of jshint and typo fixes
var AbstractFilter = require('./AbstractFilter');

/**
 * @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 dotscreen effect making display objects appear to be made out of
 * black and white halftone dots like an old printer.
 *
 * @class
 * @extends AbstractFilter
 * @namespace PIXI
 */
function DotScreenFilter() {
    AbstractFilter.call(this);

    // set the uniforms
    this.uniforms = {
        scale:      { type: '1f', value: 1 },
        angle:      { type: '1f', value: 5 },
        dimensions: { type: '4fv', value: [0, 0, 0, 0] }
    };

    this.fragmentSrc = [
        'precision mediump float;',

        'varying vec2 vTextureCoord;',
        'varying vec4 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);',
        '}'
    ];
}

DotScreenFilter.prototype = Object.create(AbstractFilter.prototype);
DotScreenFilter.prototype.constructor = DotScreenFilter;
module.exports = DotScreenFilter;

Object.defineProperties(DotScreenFilter.prototype, {
    /**
     * The scale of the effect.
     * @member {number}
     * @memberof DotScreenFilter#
     */
    scale: {
        get: function () {
            return this.uniforms.scale.value;
        },
        set: function (value) {
            this.uniforms.scale.value = value;
        }
    },

    /**
     * The radius of the effect.
     * @member {number}
     * @memberof DotScreenFilter#
     */
    angle: {
        get: function () {
            return this.uniforms.angle.value;
        },
        set: function (value) {
            this.uniforms.angle.value = value;
        }
    }
});