Merge pull request #241 from Feu-Secret/tokenmagic-dev-v0.6.2.x

Tokenmagic dev v0.6.2.x

README.md

@@ -418,6 +418,61 @@ generate a random color per complete loop.
 **Mandatory properties:** `active` `speed`
 increment a property value by his speed, in pixel / ms.
 
+---
+
+To randomize filter properties you can use the `randomized` keyword property:
+
+```JS
+// Randomization example
+{
+    filterType: "sprite",
+    filterId: "randomOverlay",
+    repeat: true,
+    alphaDiscard: true,
+    inverse: true,
+    gridPadding: 1,
+    translationX: 0,
+    translationY: 0,
+    top: true,
+    randomized: {
+        active: true,
+        imagePath: [
+            "modules/tokenmagic/fx/assets/distortion-1.png",
+            "modules/tokenmagic/fx/assets/dots-1.png",
+            "modules/tokenmagic/fx/assets/extrusion-1.png",
+            "modules/tokenmagic/fx/assets/noise-2.jpg",
+            "modules/tokenmagic/fx/assets/symbols-1.png",
+            "modules/tokenmagic/fx/assets/waves-1.png",
+        ],
+        rotation: { val1: 0, val2: 360, step: 1 },
+        scaleX: { val1: 0.1, val2: 0.6, step: 0.01, link: 'scaleY' },
+    },
+}
+```
+
+In the above example, `imagePath`, `scaleX`, and `rotation` values are randomized.
+- `imagePath` will pick one value from the provided list
+- `rotation` will pick a random integer in the range of 0 and 360 as defined by`val1` and `val`
+- `scaleX` will pack a random float between 0.1 and 0.6 and will assign the same value to `scaleY`
+
+
+```
+randomized :
+{
+    active: <true|false(default:false)>, // randomizer active/inactive
+    <property to randomize> :
+      {
+         val1: <value>, // value limit 1
+         val2: <value>, // value limit 2
+         step: <value greater than 0(default:1)>  // granularity of randomized value
+         list: <a list of values> // list that can be used instead of a range defined by 'val1' and 'val2'
+         link: <"property name"> // property to be assigned the same randomized value
+      },
+    <property to randomize> : <a list of values> // list of values to be randomly picked from
+    <,<other properties to animate>…>
+}
+```
+
 You can control the ordering of the filters with the `zOrder` property.
 If you want to work with this new property, you must activate the option in the module option panel. The `zOrder` allows the filters to be applied on a Placeable in a specific order: from the smallest `zOrder` to the highest.
 
@@ -459,6 +514,10 @@ You will find below a table with the filters and their default `zOrder`. The def
 | Waves  (wave) | 280  | <img src="tokenmagic/gui/macros/images/20 - Waves.webp" height="24">                             |
 | Blur (blur) | 290  | <img src="tokenmagic/gui/macros/images/11 - Blur.webp" height="24">                              |
 | Zoom Blur (zoomblur) | 300  | <img src="tokenmagic/gui/macros/images/12 - Zoom Blur.webp" height="24">                         |
+| Ascii (ascii) | 310  | <img src="tokenmagic/gui/macros/images/40 - Ascii.webp" height="24">                         |
+| Dot Shade (dot) | 320  | <img src="tokenmagic/gui/macros/images/41 - Dot.webp" height="24">                         |
+| CRT Monitor (crt) | 330  | <img src="tokenmagic/gui/macros/images/42 - CRT.webp" height="24">                         |
+| RGB Split (rgbSplit) | 340  | <img src="tokenmagic/gui/macros/images/43 - RGB Split.webp" height="24">                         |
 | Transform (transform) | 1000 | <img src="tokenmagic/gui/macros/images/33 - T02 - Saving Roll (transform).webp" height="24">     |
 | Force Field (field) | 2000  | <img src="tokenmagic/gui/macros/images/24 - T11 - Grid Force Field.webp" height="24">            |
 | Distortion (distortion) | 4000  | <img src="tokenmagic/gui/macros/images/07 - Distortion.webp" height="24">                        |

tokenmagic/fx/filters/FilterAscii.js

@@ -0,0 +1,16 @@
+import { Anime } from '../Anime.js';
+import './proto/FilterProto.js';
+
+export class FilterAscii extends PIXI.filters.AsciiFilter {
+  constructor(params) {
+    super();
+    this.size = 8;
+    this.zOrder = 310;
+    this.animated = {};
+    this.setTMParams(params);
+    if (!this.dummy) {
+      this.anime = new Anime(this);
+      this.normalizeTMParams();
+    }
+  }
+}

tokenmagic/fx/filters/FilterCRT.js

@@ -0,0 +1,23 @@
+import { Anime } from '../Anime.js';
+import './proto/FilterProto.js';
+
+export class FilterCRT extends PIXI.filters.CRTFilter {
+  constructor(params) {
+    super();
+    this.curvature = 1.0;
+    this.lineWidth = 1.0;
+    this.lineContrast = 0.25;
+    this.verticalLine = false;
+    this.noise = 0.08;
+    this.noiseSize = 1.0;
+    this.seed = 0;
+    this.vignetting = 0;
+    this.zOrder = 320;
+    this.animated = {};
+    this.setTMParams(params);
+    if (!this.dummy) {
+      this.anime = new Anime(this);
+      this.normalizeTMParams();
+    }
+  }
+}

tokenmagic/fx/filters/FilterDot.js

@@ -0,0 +1,18 @@
+import { Anime } from '../Anime.js';
+import './proto/FilterProto.js';
+
+export class FilterDot extends PIXI.filters.DotFilter {
+  constructor(params) {
+    super();
+    this.scale = 1;
+    this.angle = 5;
+    this.grayscale = true
+    this.zOrder = 330;
+    this.animated = {};
+    this.setTMParams(params);
+    if (!this.dummy) {
+      this.anime = new Anime(this);
+      this.normalizeTMParams();
+    }
+  }
+}

tokenmagic/fx/filters/FilterGlow.js

@@ -10,6 +10,7 @@ export class FilterGlow extends PIXI.filters.GlowFilter {
     this.outerStrength = 6.5;
     this.color = 0x0020ff;
     this.quality = 1;
+    this.alpha = 1,
     this.zOrder = 70;
     this.animated = {};
     this.setTMParams(params);

tokenmagic/fx/filters/FilterPolymorph.js

@@ -40,6 +40,12 @@ export class FilterPolymorph extends CustomFilter {
     if (!this.dummy) {
       this.anime = new Anime(this);
       this.normalizeTMParams();
+    }
+  }
+
+  setTMParams(params) {
+    super.setTMParams(params);
+    if(!this.dummy && 'imagePath' in params){
       this.assignTexture();
     }
   }
@@ -76,22 +82,32 @@ export class FilterPolymorph extends CustomFilter {
     this.uniforms.uSamplerTarget = value;
   }
 
+  _setTargetSpriteSize() {
+    const sprite = this.targetSprite;
+    let ratioW = this.placeableImg._texture.baseTexture.realWidth / sprite.texture.baseTexture.realWidth;
+    sprite.width = sprite.texture.baseTexture.realWidth * ratioW;
+    sprite.height = sprite.texture.baseTexture.realHeight * ratioW;
+    sprite.anchor.set(0.5);
+  }
+
   assignTexture() {
     if (this.hasOwnProperty("imagePath")) {
       let tex = PIXI.Texture.from(this.imagePath);
       let sprite = new PIXI.Sprite(tex);
 
       sprite.renderable = false;
-      if (this.placeableImg.hasOwnProperty("_texture")) {
-        sprite.width = this.placeableImg._texture.baseTexture.realWidth;
-        sprite.height = this.placeableImg._texture.baseTexture.realHeight;
-        sprite.anchor.set(0.5);
+      this.targetSprite = sprite;
+
+      // We may need to wait for the texture to be loaded before accessing it's width and height
+      // In such a case register an update listener which should be called when the texture is loaded/becomes valid
+      if(tex.valid){
+        this._setTargetSpriteSize();
       } else {
-        sprite.width = this.placeableImg.width;
-        sprite.height = this.placeableImg.height;
+        tex.on('update', () => {
+          this._setTargetSpriteSize();
+        })
       }
 
-      this.targetSprite = sprite;
       this.uSamplerTarget = sprite._texture;
       this.placeableImg.addChild(sprite);
     }

tokenmagic/fx/filters/FilterRGBSplit.js

@@ -0,0 +1,66 @@
+import { Anime } from '../Anime.js';
+import './proto/FilterProto.js';
+
+export class FilterRGBSplit extends PIXI.filters.RGBSplitFilter {
+  constructor(params) {
+    super();
+    this.red = new Float32Array([-10, 0]);
+    this.green = new Float32Array([0, 10]);
+    this.blue = new Float32Array([0, 0]);
+    this.zOrder = 340;
+    this.animated = {};
+    this.setTMParams(params);
+    if (!this.dummy) {
+      this.anime = new Anime(this);
+      this.normalizeTMParams();
+    }
+  }
+
+  get redX() {
+    return this.uniforms.red[0];
+  }
+
+  set redX(value) {
+    this.uniforms.red[0] = value;
+  }
+
+  get redY() {
+    return this.uniforms.red[1];
+  }
+
+  set redY(value) {
+    this.uniforms.red[1] = value;
+  }
+
+  get greenX() {
+    return this.uniforms.green[0];
+  }
+
+  set greenX(value) {
+    this.uniforms.green[0] = value;
+  }
+
+  get greenY() {
+    return this.uniforms.green[1];
+  }
+
+  set greenY(value) {
+    this.uniforms.green[1] = value;
+  }
+
+  get blueX() {
+    return this.uniforms.blue[0];
+  }
+
+  set blueX(value) {
+    this.uniforms.blue[0] = value;
+  }
+
+  get blueY() {
+    return this.uniforms.blue[1];
+  }
+
+  set blueY(value) {
+    this.uniforms.blue[1] = value;
+  }
+}

tokenmagic/fx/filters/FilterSprite.js

@@ -15,6 +15,9 @@ export class FilterSprite extends CustomFilter {
       color,
       colorize,
       inverse,
+      alpha,
+      alphaDiscard,
+      repeat,
       top,
       rotation,
       twRadiusPercent,
@@ -53,6 +56,9 @@ export class FilterSprite extends CustomFilter {
       color,
       colorize,
       inverse,
+      alpha,
+      alphaDiscard,
+      repeat,
       top,
       rotation,
       twRadiusPercent,
@@ -76,6 +82,12 @@ export class FilterSprite extends CustomFilter {
     if ( !this.dummy ) {
       this.anime = new Anime(this);
       this.normalizeTMParams();
+    }
+  }
+
+  setTMParams(params) {
+    super.setTMParams(params);
+    if(!this.dummy && 'imagePath' in params){
       this.assignTexture();
     }
   }
@@ -133,6 +145,34 @@ export class FilterSprite extends CustomFilter {
     }
   }
 
+  get alpha() {
+    return this.uniforms.alpha;
+  }
+
+  set alpha(value) {
+    this.uniforms.alpha = value;
+  }
+
+  get alphaDiscard() {
+    return this.uniforms.alphaDiscard;
+  }
+
+  set alphaDiscard(value) {
+    if ( !(value == null) && typeof value === "boolean" ) {
+      this.uniforms.alphaDiscard = value;
+    }
+  }
+
+  get repeat() {
+    return this.uniforms.repeat;
+  }
+
+  set repeat(value) {
+    if ( !(value == null) && typeof value === "boolean" ) {
+      this.uniforms.repeat = value;
+    }
+  }
+
   get top() {
     return this.uniforms.top;
   }
@@ -240,21 +280,25 @@ export class FilterSprite extends CustomFilter {
     this.uniforms.uSamplerTarget = value;
   }
 
-  _playVideo(value) {
+  async _playVideo(value) {
     // Play if baseTexture resource is a video
     if ( this.tex ) {
       const source = getProperty(this.tex, "baseTexture.resource.source");
       if ( source && (source.tagName === "VIDEO") ) {
-        source.loop = this._loop;
-        source.muted = true;
-        if ( value ) game.video.play(source);
+        if(isNaN(source.duration)){
+          await new Promise(resolve => { source.onloadedmetadata = () => resolve(); });
+        }
+        if ( value ) game.video.play(source, {loop: this._loop, volume: 0 });
         else game.video.stop(source);
       }
     }
   }
 
   assignTexture() {
     if ( this.hasOwnProperty("imagePath") ) {
+      // Destroy the previous sprite
+      if ( this.targetSprite && !this.targetSprite.destroyed ) 
+        this.targetSprite.destroy({children: true, texture: false, baseTexture: false});
       this.tex = PIXI.Texture.from(this.imagePath);
 
       let sprite = new PIXI.Sprite(this.tex);
@@ -308,6 +352,9 @@ FilterSprite.defaults = {
   color: 0x000000,
   colorize: false,
   inverse: false,
+  alpha: 1,
+  alphaDiscard: false,
+  repeat: false,
   top: false,
   rotation: 0.0,
   twRadiusPercent: 0,

tokenmagic/fx/glsl/fragmentshaders/flood.js

@@ -16,9 +16,11 @@ uniform mat3 filterMatrixInverse;
 
 const float timeSpeed = 3.;
 
+#define TWOPI 6.28318531
+
 float randomVal (float inVal)
 {
-    return fract(sin(dot(vec2(inVal, 2523.2361) ,vec2(12.9898,78.233))) * 43758.5453)-0.5;
+    return fract(sin(mod(dot(vec2(inVal, 2523.2361) , vec2(12.9898,78.233)), TWOPI)) * 43758.5453)-0.5;
 }
 
 vec2 randomVec2 (float inVal)
@@ -38,7 +40,7 @@ float makeWaves(vec2 uv, float theTime, float offset)
         i = float(n)+offset;
         randVec = randomVec2(float(i));
   		direction = (uv.x*randVec.x+uv.y*randVec.y);
-        sineWave = sin(direction*randomVal(i+1.6516)+theTime*timeSpeed);
+        sineWave = sin(mod(direction*randomVal(i+1.6516)+theTime*timeSpeed, TWOPI));
         sineWave = smoothstep(0.2,1.,sineWave);
     	result += randomVal(i+123.0)*sineWave;
     }
@@ -67,7 +69,7 @@ vec4 water( vec2 fragCoord )
     
     result = 2.0*smoothstep(0.35,1.8,(result+result2)*glint);
 
-    vec2 p = vec2(result, result2)*0.019 + (cos(uv*1.1 - sin(uv.yx + time*timeSpeed/20.))*0.012);
+    vec2 p = vec2(result, result2)*0.019 + (cos( mod(  uv*1.1 - sin(mod(uv.yx + time*timeSpeed/20., TWOPI)), TWOPI) )*0.012);
     uv.x -= shift.x;
     uv.y -= shift.y;
     uv += p * billowy;