@pixi/filter-old-film - npm Package Compare versions

Comparing version 2.7.0 to 3.0.0

lib/filter-old-film.esm.js

 /*!
  * @pixi/filter-old-film - v2.7.0
- * Compiled Sun, 13 Jan 2019 22:51:52 UTC
+ * Compiled Fri, 10 May 2019 22:56:42 UTC
  *
@@ -8,3 +8,223 @@ * @pixi/filter-old-film is licensed under the MIT License.
  */
-import{Filter as n}from"pixi.js";var t="attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}",i="varying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform vec4 filterArea;\nuniform vec2 dimensions;\n\nuniform float sepia;\nuniform float noise;\nuniform float noiseSize;\nuniform float scratch;\nuniform float scratchDensity;\nuniform float scratchWidth;\nuniform float vignetting;\nuniform float vignettingAlpha;\nuniform float vignettingBlur;\nuniform float seed;\n\nconst float SQRT_2 = 1.414213;\nconst vec3 SEPIA_RGB = vec3(112.0 / 255.0, 66.0 / 255.0, 20.0 / 255.0);\n\nfloat rand(vec2 co) {\n    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvec3 Overlay(vec3 src, vec3 dst)\n{\n    // if (dst <= 0.5) then: 2 * src * dst\n    // if (dst > 0.5) then: 1 - 2 * (1 - dst) * (1 - src)\n    return vec3((dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),\n                (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),\n                (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z)));\n}\n\n\nvoid main()\n{\n    gl_FragColor = texture2D(uSampler, vTextureCoord);\n    vec3 color = gl_FragColor.rgb;\n\n    if (sepia > 0.0)\n    {\n        float gray = (color.x + color.y + color.z) / 3.0;\n        vec3 grayscale = vec3(gray);\n\n        color = Overlay(SEPIA_RGB, grayscale);\n\n        color = grayscale + sepia * (color - grayscale);\n    }\n\n    vec2 coord = vTextureCoord * filterArea.xy / dimensions.xy;\n\n    if (vignetting > 0.0)\n    {\n        float outter = SQRT_2 - vignetting * SQRT_2;\n        vec2 dir = vec2(vec2(0.5, 0.5) - coord);\n        dir.y *= dimensions.y / dimensions.x;\n        float darker = clamp((outter - length(dir) * SQRT_2) / ( 0.00001 + vignettingBlur * SQRT_2), 0.0, 1.0);\n        color.rgb *= darker + (1.0 - darker) * (1.0 - vignettingAlpha);\n    }\n\n    if (scratchDensity > seed && scratch != 0.0)\n    {\n        float phase = seed * 256.0;\n        float s = mod(floor(phase), 2.0);\n        float dist = 1.0 / scratchDensity;\n        float d = distance(coord, vec2(seed * dist, abs(s - seed * dist)));\n        if (d < seed * 0.6 + 0.4)\n        {\n            highp float period = scratchDensity * 10.0;\n\n            float xx = coord.x * period + phase;\n            float aa = abs(mod(xx, 0.5) * 4.0);\n            float bb = mod(floor(xx / 0.5), 2.0);\n            float yy = (1.0 - bb) * aa + bb * (2.0 - aa);\n\n            float kk = 2.0 * period;\n            float dw = scratchWidth / dimensions.x * (0.75 + seed);\n            float dh = dw * kk;\n\n            float tine = (yy - (2.0 - dh));\n\n            if (tine > 0.0) {\n                float _sign = sign(scratch);\n\n                tine = s * tine / period + scratch + 0.1;\n                tine = clamp(tine + 1.0, 0.5 + _sign * 0.5, 1.5 + _sign * 0.5);\n\n                color.rgb *= tine;\n            }\n        }\n    }\n\n    if (noise > 0.0 && noiseSize > 0.0)\n    {\n        vec2 pixelCoord = vTextureCoord.xy * filterArea.xy;\n        pixelCoord.x = floor(pixelCoord.x / noiseSize);\n        pixelCoord.y = floor(pixelCoord.y / noiseSize);\n        // vec2 d = pixelCoord * noiseSize * vec2(1024.0 + seed * 512.0, 1024.0 - seed * 512.0);\n        // float _noise = snoise(d) * 0.5;\n        float _noise = rand(pixelCoord * noiseSize * seed) - 0.5;\n        color += _noise * noise;\n    }\n\n    gl_FragColor.rgb = color;\n}\n",e=function(n){function e(e,o){void 0===o&&(o=0),n.call(this,t,i),this.uniforms.dimensions=new Float32Array(2),"number"==typeof e?(this.seed=e,e=null):this.seed=o,Object.assign(this,{sepia:.3,noise:.3,noiseSize:1,scratch:.5,scratchDensity:.3,scratchWidth:1,vignetting:.3,vignettingAlpha:1,vignettingBlur:.3},e)}n&&(e.__proto__=n),e.prototype=Object.create(n&&n.prototype),e.prototype.constructor=e;var o={sepia:{configurable:!0},noise:{configurable:!0},noiseSize:{configurable:!0},scratch:{configurable:!0},scratchDensity:{configurable:!0},scratchWidth:{configurable:!0},vignetting:{configurable:!0},vignettingAlpha:{configurable:!0},vignettingBlur:{configurable:!0}};return e.prototype.apply=function(n,t,i,e){this.uniforms.dimensions[0]=t.sourceFrame.width,this.uniforms.dimensions[1]=t.sourceFrame.height,this.uniforms.seed=this.seed,n.applyFilter(this,t,i,e)},o.sepia.set=function(n){this.uniforms.sepia=n},o.sepia.get=function(){return this.uniforms.sepia},o.noise.set=function(n){this.uniforms.noise=n},o.noise.get=function(){return this.uniforms.noise},o.noiseSize.set=function(n){this.uniforms.noiseSize=n},o.noiseSize.get=function(){return this.uniforms.noiseSize},o.scratch.set=function(n){this.uniforms.scratch=n},o.scratch.get=function(){return this.uniforms.scratch},o.scratchDensity.set=function(n){this.uniforms.scratchDensity=n},o.scratchDensity.get=function(){return this.uniforms.scratchDensity},o.scratchWidth.set=function(n){this.uniforms.scratchWidth=n},o.scratchWidth.get=function(){return this.uniforms.scratchWidth},o.vignetting.set=function(n){this.uniforms.vignetting=n},o.vignetting.get=function(){return this.uniforms.vignetting},o.vignettingAlpha.set=function(n){this.uniforms.vignettingAlpha=n},o.vignettingAlpha.get=function(){return this.uniforms.vignettingAlpha},o.vignettingBlur.set=function(n){this.uniforms.vignettingBlur=n},o.vignettingBlur.get=function(){return this.uniforms.vignettingBlur},Object.defineProperties(e.prototype,o),e}(n);export{e as OldFilmFilter};
+import { Filter } from '@pixi/core';
+
+var vertex = "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}";
+
+var fragment = "varying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform vec4 filterArea;\nuniform vec2 dimensions;\n\nuniform float sepia;\nuniform float noise;\nuniform float noiseSize;\nuniform float scratch;\nuniform float scratchDensity;\nuniform float scratchWidth;\nuniform float vignetting;\nuniform float vignettingAlpha;\nuniform float vignettingBlur;\nuniform float seed;\n\nconst float SQRT_2 = 1.414213;\nconst vec3 SEPIA_RGB = vec3(112.0 / 255.0, 66.0 / 255.0, 20.0 / 255.0);\n\nfloat rand(vec2 co) {\n    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvec3 Overlay(vec3 src, vec3 dst)\n{\n    // if (dst <= 0.5) then: 2 * src * dst\n    // if (dst > 0.5) then: 1 - 2 * (1 - dst) * (1 - src)\n    return vec3((dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),\n                (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),\n                (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z)));\n}\n\n\nvoid main()\n{\n    gl_FragColor = texture2D(uSampler, vTextureCoord);\n    vec3 color = gl_FragColor.rgb;\n\n    if (sepia > 0.0)\n    {\n        float gray = (color.x + color.y + color.z) / 3.0;\n        vec3 grayscale = vec3(gray);\n\n        color = Overlay(SEPIA_RGB, grayscale);\n\n        color = grayscale + sepia * (color - grayscale);\n    }\n\n    vec2 coord = vTextureCoord * filterArea.xy / dimensions.xy;\n\n    if (vignetting > 0.0)\n    {\n        float outter = SQRT_2 - vignetting * SQRT_2;\n        vec2 dir = vec2(vec2(0.5, 0.5) - coord);\n        dir.y *= dimensions.y / dimensions.x;\n        float darker = clamp((outter - length(dir) * SQRT_2) / ( 0.00001 + vignettingBlur * SQRT_2), 0.0, 1.0);\n        color.rgb *= darker + (1.0 - darker) * (1.0 - vignettingAlpha);\n    }\n\n    if (scratchDensity > seed && scratch != 0.0)\n    {\n        float phase = seed * 256.0;\n        float s = mod(floor(phase), 2.0);\n        float dist = 1.0 / scratchDensity;\n        float d = distance(coord, vec2(seed * dist, abs(s - seed * dist)));\n        if (d < seed * 0.6 + 0.4)\n        {\n            highp float period = scratchDensity * 10.0;\n\n            float xx = coord.x * period + phase;\n            float aa = abs(mod(xx, 0.5) * 4.0);\n            float bb = mod(floor(xx / 0.5), 2.0);\n            float yy = (1.0 - bb) * aa + bb * (2.0 - aa);\n\n            float kk = 2.0 * period;\n            float dw = scratchWidth / dimensions.x * (0.75 + seed);\n            float dh = dw * kk;\n\n            float tine = (yy - (2.0 - dh));\n\n            if (tine > 0.0) {\n                float _sign = sign(scratch);\n\n                tine = s * tine / period + scratch + 0.1;\n                tine = clamp(tine + 1.0, 0.5 + _sign * 0.5, 1.5 + _sign * 0.5);\n\n                color.rgb *= tine;\n            }\n        }\n    }\n\n    if (noise > 0.0 && noiseSize > 0.0)\n    {\n        vec2 pixelCoord = vTextureCoord.xy * filterArea.xy;\n        pixelCoord.x = floor(pixelCoord.x / noiseSize);\n        pixelCoord.y = floor(pixelCoord.y / noiseSize);\n        // vec2 d = pixelCoord * noiseSize * vec2(1024.0 + seed * 512.0, 1024.0 - seed * 512.0);\n        // float _noise = snoise(d) * 0.5;\n        float _noise = rand(pixelCoord * noiseSize * seed) - 0.5;\n        color += _noise * noise;\n    }\n\n    gl_FragColor.rgb = color;\n}\n";
+
+/**
+ * The OldFilmFilter applies a Old film effect to an object.<br>
+ * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/old-film.gif)
+ *
+ * @class
+ * @extends PIXI.Filter
+ * @memberof PIXI.filters
+ * @see {@link https://www.npmjs.com/package/@pixi/filter-old-film|@pixi/filter-old-film}
+ * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters}
+ *
+ * @param {object|number} [options] - The optional parameters of old film effect.
+ *                        When options is a number , it will be `seed`
+ * @param {number} [options.sepia=0.3] - The amount of saturation of sepia effect,
+ *        a value of `1` is more saturation and closer to `0` is less, and a value of
+ *        `0` produces no sepia effect
+ * @param {number} [options.noise=0.3] - Opacity/intensity of the noise effect between `0` and `1`
+ * @param {number} [options.noiseSize=1.0] - The size of the noise particles
+ * @param {number} [options.scratch=0.5] - How often scratches appear
+ * @param {number} [options.scratchDensity=0.3] - The density of the number of scratches
+ * @param {number} [options.scratchWidth=1.0] - The width of the scratches
+ * @param {number} [options.vignetting=0.3] - The radius of the vignette effect, smaller
+ *        values produces a smaller vignette
+ * @param {number} [options.vignettingAlpha=1.0] - Amount of opacity of vignette
+ * @param {number} [options.vignettingBlur=0.3] - Blur intensity of the vignette
+ * @param {number} [seed=0] - A see value to apply to the random noise generation
+ */
+var OldFilmFilter = /*@__PURE__*/(function (Filter) {
+    function OldFilmFilter(options, seed) {
+        if ( seed === void 0 ) seed = 0;
+
+        Filter.call(this, vertex, fragment);
+        this.uniforms.dimensions = new Float32Array(2);
+
+        if (typeof options === 'number') {
+            this.seed = options;
+            options = null;
+        }
+        else {
+            /**
+             * A see value to apply to the random noise generation
+             * @member {number}
+             */
+            this.seed = seed;
+        }
+
+        Object.assign(this, {
+            sepia: 0.3,
+            noise: 0.3,
+            noiseSize: 1.0,
+            scratch: 0.5,
+            scratchDensity: 0.3,
+            scratchWidth: 1.0,
+            vignetting: 0.3,
+            vignettingAlpha: 1.0,
+            vignettingBlur: 0.3,
+        }, options);
+    }
+
+    if ( Filter ) OldFilmFilter.__proto__ = Filter;
+    OldFilmFilter.prototype = Object.create( Filter && Filter.prototype );
+    OldFilmFilter.prototype.constructor = OldFilmFilter;
+
+    var prototypeAccessors = { sepia: { configurable: true },noise: { configurable: true },noiseSize: { configurable: true },scratch: { configurable: true },scratchDensity: { configurable: true },scratchWidth: { configurable: true },vignetting: { configurable: true },vignettingAlpha: { configurable: true },vignettingBlur: { configurable: true } };
+
+    /**
+     * Override existing apply method in PIXI.Filter
+     * @private
+     */
+    OldFilmFilter.prototype.apply = function apply (filterManager, input, output, clear) {
+        this.uniforms.dimensions[0] = input.filterFrame.width;
+        this.uniforms.dimensions[1] = input.filterFrame.height;
+
+        // named `seed` because in the most programming languages,
+        // `random` used for "the function for generating random value".
+        this.uniforms.seed = this.seed;
+
+        filterManager.applyFilter(this, input, output, clear);
+    };
+
+
+    /**
+     * The amount of saturation of sepia effect,
+     * a value of `1` is more saturation and closer to `0` is less,
+     * and a value of `0` produces no sepia effect
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.sepia.set = function (value) {
+        this.uniforms.sepia = value;
+    };
+
+    prototypeAccessors.sepia.get = function () {
+        return this.uniforms.sepia;
+    };
+
+    /**
+     * Opacity/intensity of the noise effect between `0` and `1`
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.noise.set = function (value) {
+        this.uniforms.noise = value;
+    };
+
+    prototypeAccessors.noise.get = function () {
+        return this.uniforms.noise;
+    };
+
+    /**
+     * The size of the noise particles
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.noiseSize.set = function (value) {
+        this.uniforms.noiseSize = value;
+    };
+
+    prototypeAccessors.noiseSize.get = function () {
+        return this.uniforms.noiseSize;
+    };
+
+    /**
+     * How often scratches appear
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.scratch.set = function (value) {
+        this.uniforms.scratch = value;
+    };
+
+    prototypeAccessors.scratch.get = function () {
+        return this.uniforms.scratch;
+    };
+
+    /**
+     * The density of the number of scratches
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.scratchDensity.set = function (value) {
+        this.uniforms.scratchDensity = value;
+    };
+
+    prototypeAccessors.scratchDensity.get = function () {
+        return this.uniforms.scratchDensity;
+    };
+
+    /**
+     * The width of the scratches
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.scratchWidth.set = function (value) {
+        this.uniforms.scratchWidth = value;
+    };
+
+    prototypeAccessors.scratchWidth.get = function () {
+        return this.uniforms.scratchWidth;
+    };
+
+    /**
+     * The radius of the vignette effect, smaller
+     * values produces a smaller vignette
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.vignetting.set = function (value) {
+        this.uniforms.vignetting = value;
+    };
+
+    prototypeAccessors.vignetting.get = function () {
+        return this.uniforms.vignetting;
+    };
+
+    /**
+     * Amount of opacity of vignette
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.vignettingAlpha.set = function (value) {
+        this.uniforms.vignettingAlpha = value;
+    };
+
+    prototypeAccessors.vignettingAlpha.get = function () {
+        return this.uniforms.vignettingAlpha;
+    };
+
+    /**
+     * Blur intensity of the vignette
+     *
+     * @member {number}
+     * @default 0
+     */
+    prototypeAccessors.vignettingBlur.set = function (value) {
+        this.uniforms.vignettingBlur = value;
+    };
+
+    prototypeAccessors.vignettingBlur.get = function () {
+        return this.uniforms.vignettingBlur;
+    };
+
+    Object.defineProperties( OldFilmFilter.prototype, prototypeAccessors );
+
+    return OldFilmFilter;
+}(Filter));
+
+export { OldFilmFilter };
 //# sourceMappingURL=filter-old-film.esm.js.map

package.json

 {
   "name": "@pixi/filter-old-film",
-  "version": "2.7.0",
-  "main": "lib/filter-old-film.js",
-  "description": "PixiJS v4 filter to apply an old film effect with grain and scratches",
+  "version": "3.0.0",
+  "main": "lib/filter-old-film.cjs.js",
+  "bundle": "dist/filter-old-film.js",
+  "description": "PixiJS filter to apply an old film effect with grain and scratches",
   "author": "finscn <[e-mail]>",
@@ -21,11 +22,12 @@ "module": "lib/filter-old-film.esm.js",
     "lib",
+    "dist",
     "types.d.ts"
   ],
-  "peerDependencies": {
-    "pixi.js": ">=4.5.0"
+  "dependencies": {
+    "@pixi/core": "^5.0.0-X"
   },
   "devDependencies": {
-    "@tools/fragments": "^2.0.0"
+    "@tools/fragments": "^3.0.0"
   },
-  "gitHead": "a1329fadd2910c48842c92f254be77d971a823ca"
+  "gitHead": "0902eca3fe476dd7dacc9330f504d8e2ade6c9bd"
 }

README.md

 # OldFilmFilter
 
-PixiJS v4 filter to apply an old film effect with grain and scratches.
+PixiJS filter to apply an old film effect with grain and scratches.
 
@@ -5,0 +5,0 @@ ## Installation

types.d.ts

 /// <reference types="pixi.js" />
-declare namespace PIXI.filters {
-    class OldFilmFilter extends PIXI.Filter<{}> {
+declare module "@pixi/filter-old-film" {
+    export class OldFilmFilter extends PIXI.Filter {
         constructor(options?: OldFilmOptions, seed?: number);
@@ -17,3 +17,3 @@ constructor(seed?: number);
     }
-    interface OldFilmOptions {
+    export interface OldFilmOptions {
         sepia?: number;
@@ -30,5 +30,1 @@ noise?: number;
 }
-
-declare module "@pixi/filter-old-film" {
-    export = PIXI.filters;
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54460

increased by81.98%

Number of package files

10

increased by25%

Lines of code

471

increased by447.67%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@pixi/core@^5.0.0-X

• + Added@pixi/constants@5.3.12(transitive)

• + Added@pixi/core@5.3.12(transitive)

• + Added@pixi/math@5.3.12(transitive)

• + Added@pixi/runner@5.3.12(transitive)

• + Added@pixi/settings@5.3.12(transitive)

• + Added@pixi/ticker@5.3.12(transitive)

• + Added@pixi/utils@5.3.12(transitive)

• + Addedcall-bind@1.0.8(transitive)

• + Addedcall-bind-apply-helpers@1.0.1(transitive)

• + Addedcall-bound@1.0.2(transitive)

• + Addeddefine-data-property@1.1.4(transitive)

• + Addeddunder-proto@1.0.0(transitive)

• + Addedes-define-property@1.0.1(transitive)

• + Addedes-errors@1.3.0(transitive)

• + Addedes-object-atoms@1.0.0(transitive)

• + Addedeventemitter3@3.1.2(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedget-intrinsic@1.2.6(transitive)

• + Addedgopd@1.2.0(transitive)

• + Addedhas-property-descriptors@1.0.2(transitive)

• + Addedhas-symbols@1.1.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedmath-intrinsics@1.0.0(transitive)

• + Addedobject-inspect@1.13.3(transitive)

• + Addedpunycode@1.4.1(transitive)

• + Addedqs@6.13.1(transitive)

• + Addedset-function-length@1.2.2(transitive)

• + Addedside-channel@1.1.0(transitive)

• + Addedside-channel-list@1.0.0(transitive)

• + Addedside-channel-map@1.0.1(transitive)

• + Addedside-channel-weakmap@1.0.2(transitive)

• + Addedurl@0.11.4(transitive)

• - Removed@pixi/colord@2.9.6(transitive)

• - Removed@types/css-font-loading-module@0.0.12(transitive)

• - Removed@types/earcut@2.1.4(transitive)

• - Removed@webgpu/types@0.1.51(transitive)

• - Removed@xmldom/xmldom@0.8.10(transitive)

• - Removedeventemitter3@5.0.1(transitive)

• - Removedparse-svg-path@0.1.2(transitive)

• - Removedpixi.js@8.6.4(transitive)