gl-transitions 1.44.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gl-transitions",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "The open collection of GL Transitions",
   "main": "index.js",
   "license": "MIT",

package/transitions/AdvancedMosaic.glsl

@@ -0,0 +1,18 @@
+// Author: Sergey Kosarevsky
+// License: MIT
+// Ported from https://gist.github.com/corporateshark/21d2fdd24c706952dc8c
+
+uniform float pixelSize; // = 50.0
+
+vec4 transition(vec2 uv) {
+  float T = progress;
+  float half_ = 0.5;
+  float size = (T < half_) ? mix(1.0, pixelSize, T / half_) : mix(pixelSize, 1.0, (T - half_) / half_);
+  float D = size * 0.005;
+  // Remap UV to center the mosaic pattern
+  vec2 UV = (uv - 0.5) / D;
+  vec2 coord = clamp(D * (ceil(UV - 0.5)) + 0.5, 0.0, 1.0);
+  vec4 C0 = getFromColor(coord);
+  vec4 C1 = getToColor(coord);
+  return mix(C0, C1, T);
+}

package/transitions/BlockDissolve.glsl

@@ -0,0 +1,13 @@
+// Author: nwoeanhinnogaehr
+// License: MIT
+// Ported from https://gist.github.com/nwoeanhinnogaehr/b93818de23d4511fde10
+
+uniform float blocksize; // = 0.02
+
+float rand(vec2 co) {
+  return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 transition(vec2 uv) {
+  return mix(getFromColor(uv), getToColor(uv), step(rand(floor(uv / blocksize)), progress));
+}

package/transitions/CrossZoom.glsl

@@ -33,8 +33,8 @@ float rand (vec2 co) {
   return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
 }
 
-vec3 crossFade(in vec2 uv, in float dissolve) {
-    return mix(getFromColor(uv).rgb, getToColor(uv).rgb, dissolve);
+vec4 crossFade(in vec2 uv, in float dissolve) {
+    return mix(getFromColor(uv), getToColor(uv), dissolve);
 }
 
 vec4 transition(vec2 uv) {
@@ -47,7 +47,7 @@ vec4 transition(vec2 uv) {
     // Mirrored sinusoidal loop. 0->strength then strength->0
     float strength = Sinusoidal_easeInOut(0.0, strength, 0.5, progress);
 
-    vec3 color = vec3(0.0);
+    vec4 color = vec4(0.0);
     float total = 0.0;
     vec2 toCenter = center - texCoord;
 
@@ -60,5 +60,5 @@ vec4 transition(vec2 uv) {
         color += crossFade(texCoord + toCenter * percent * strength, dissolve) * weight;
         total += weight;
     }
-    return vec4(color / total, 1.0);
+    return color / total;
 }

package/transitions/DefocusBlur.glsl

@@ -0,0 +1,43 @@
+// Author: Sergey Kosarevsky
+// License: MIT
+// Ported from https://gist.github.com/corporateshark/b9f8e5675c647e615419
+
+uniform float blurSize; // = 0.02
+
+// 12-tap Poisson disk
+// https://github.com/spite/Wagner/blob/master/fragment-shaders/poisson-disc-blur-fs.glsl
+
+vec4 transition(vec2 uv) {
+  float T = progress;
+  float half_ = 0.5;
+  float D = (T < half_) ? mix(0.0, blurSize, T / half_) : mix(blurSize, 0.0, (T - half_) / half_);
+  vec4 C0 = getFromColor(uv);
+  vec4 C1 = getToColor(uv);
+  C0 += getFromColor(vec2(-0.326, -0.406) * D + uv);
+  C1 += getToColor(vec2(-0.326, -0.406) * D + uv);
+  C0 += getFromColor(vec2(-0.840, -0.074) * D + uv);
+  C1 += getToColor(vec2(-0.840, -0.074) * D + uv);
+  C0 += getFromColor(vec2(-0.696,  0.457) * D + uv);
+  C1 += getToColor(vec2(-0.696,  0.457) * D + uv);
+  C0 += getFromColor(vec2(-0.203,  0.621) * D + uv);
+  C1 += getToColor(vec2(-0.203,  0.621) * D + uv);
+  C0 += getFromColor(vec2( 0.962, -0.195) * D + uv);
+  C1 += getToColor(vec2( 0.962, -0.195) * D + uv);
+  C0 += getFromColor(vec2( 0.473, -0.480) * D + uv);
+  C1 += getToColor(vec2( 0.473, -0.480) * D + uv);
+  C0 += getFromColor(vec2( 0.519,  0.767) * D + uv);
+  C1 += getToColor(vec2( 0.519,  0.767) * D + uv);
+  C0 += getFromColor(vec2( 0.185, -0.893) * D + uv);
+  C1 += getToColor(vec2( 0.185, -0.893) * D + uv);
+  C0 += getFromColor(vec2( 0.507,  0.064) * D + uv);
+  C1 += getToColor(vec2( 0.507,  0.064) * D + uv);
+  C0 += getFromColor(vec2( 0.896,  0.412) * D + uv);
+  C1 += getToColor(vec2( 0.896,  0.412) * D + uv);
+  C0 += getFromColor(vec2(-0.322, -0.933) * D + uv);
+  C1 += getToColor(vec2(-0.322, -0.933) * D + uv);
+  C0 += getFromColor(vec2(-0.792, -0.598) * D + uv);
+  C1 += getToColor(vec2(-0.792, -0.598) * D + uv);
+  C0 /= 13.0;
+  C1 /= 13.0;
+  return mix(C0, C1, T);
+}

package/transitions/Fold.glsl

@@ -0,0 +1,9 @@
+// Author: nwoeanhinnogaehr
+// License: MIT
+// Ported from https://gist.github.com/nwoeanhinnogaehr/f6fc39f4cfcbb97f96a6
+
+vec4 transition(vec2 uv) {
+  vec4 a = getFromColor((uv - vec2(progress, 0.0)) / vec2(1.0 - progress, 1.0));
+  vec4 b = getToColor(uv / vec2(progress, 1.0));
+  return mix(a, b, step(uv.x, progress));
+}

package/transitions/HSVfade.glsl

@@ -0,0 +1,26 @@
+// Author: nwoeanhinnogaehr
+// License: MIT
+// Ported from https://gist.github.com/nwoeanhinnogaehr/b185145363d65751009b
+
+// HSV functions from http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
+
+vec3 hsv2rgb(vec3 c) {
+  const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+vec3 rgb2hsv(vec3 c) {
+  const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);
+}
+
+vec4 transition(vec2 uv) {
+  vec3 a = rgb2hsv(getFromColor(uv).rgb);
+  vec3 b = rgb2hsv(getToColor(uv).rgb);
+  vec3 m = mix(a, b, progress);
+  return vec4(hsv2rgb(m), 1.0);
+}

package/transitions/PuzzleRight.glsl

@@ -0,0 +1,54 @@
+// Author: JustKirillS
+// License: MIT
+// Ported from https://gist.github.com/JustKirillS/714f095318834f4d2375de872c53af1e
+
+uniform ivec2 size; // = ivec2(4, 4)
+uniform float pause; // = 0.1
+uniform float dividerWidth; // = 0.005
+
+float rand(vec2 co) {
+  return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float getDelta(vec2 p) {
+  vec2 rectangleSize = 1.0 / vec2(size);
+  vec2 rectanglePos = floor(vec2(size) * p);
+  float top = rectangleSize.y * (rectanglePos.y + 1.0);
+  float bottom = rectangleSize.y * rectanglePos.y;
+  float left = rectangleSize.x * rectanglePos.x;
+  float right = rectangleSize.x * (rectanglePos.x + 1.0);
+  float minX = min(abs(p.x - left), abs(p.x - right));
+  float minY = min(abs(p.y - top), abs(p.y - bottom));
+  return min(minX, minY);
+}
+
+vec4 transition(vec2 uv) {
+  if (progress < pause) {
+    float currentProg = progress / pause;
+    float a = 1.0;
+    if (getDelta(uv) < dividerWidth) { a = 1.0 - currentProg; }
+    return mix(vec4(0.0, 0.0, 0.0, 1.0), getFromColor(uv), a);
+  } else if (progress < 1.0 - pause) {
+    if (getDelta(uv) < dividerWidth) {
+      return vec4(0.0, 0.0, 0.0, 1.0);
+    }
+    float currentProg = (progress - pause) / (1.0 - pause * 2.0);
+    vec2 rectanglePos = floor(vec2(size) * uv);
+    float r = rand(rectanglePos) - 0.1;
+    float cp = smoothstep(0.0, 1.0 - r, currentProg);
+    float rectangleSize = 1.0 / float(size.x);
+    float delta = rectanglePos.x * rectangleSize;
+    float offset = rectangleSize / 2.0 + delta;
+    vec2 p = uv;
+    p.x = (p.x - offset) / abs(cp - 0.5) * 0.5 + offset;
+    vec4 a = getFromColor(p);
+    vec4 b = getToColor(p);
+    float s = step(abs(float(size.x) * (uv.x - delta) - 0.5), abs(cp - 0.5));
+    return vec4(mix(b, a, step(cp, 0.5)).rgb * s, 1.0);
+  } else {
+    float currentProg = (progress - 1.0 + pause) / pause;
+    float a = 1.0;
+    if (getDelta(uv) < dividerWidth) { a = currentProg; }
+    return mix(vec4(0.0, 0.0, 0.0, 1.0), getToColor(uv), a);
+  }
+}

package/transitions/SimpleFlip.glsl

@@ -0,0 +1,11 @@
+// Author: nwoeanhinnogaehr
+// License: MIT
+// Ported from https://gist.github.com/nwoeanhinnogaehr/408045772d255df97520
+
+vec4 transition(vec2 uv) {
+  vec2 q = uv;
+  uv.x = (uv.x - 0.5) / abs(progress - 0.5) * 0.5 + 0.5;
+  vec4 a = getFromColor(uv);
+  vec4 b = getToColor(uv);
+  return vec4(mix(a, b, step(0.5, progress)).rgb * step(abs(q.x - 0.5), abs(progress - 0.5)), 1.0);
+}

package/transitions/TilesWave.glsl

@@ -0,0 +1,59 @@
+// Author: numb3r23
+// License: MIT
+// Ported from https://gist.github.com/numb3r23/169781bb76f310e2bfde
+
+uniform ivec2 tileCount; // = ivec2(8, 8)
+uniform bool flipX; // = true
+uniform bool flipY; // = false
+
+vec4 transition(vec2 uv) {
+  vec2 tileSize = 1.0 / vec2(tileCount);
+  vec2 posInTile = fract(uv * vec2(tileCount));
+  vec2 tileNum = floor(uv * vec2(tileCount));
+  float countTiles = float(tileCount.x * tileCount.y);
+
+  // Diagonal wave from bottom-left to top-right
+  float offset = (tileNum.y + tileNum.x * float(tileCount.y)) / (sqrt(countTiles) * 2.0);
+  float timeOffset = clamp((progress - offset) * countTiles, 0.0, 0.5);
+  float sinTime = 1.0 - abs(cos(fract(timeOffset) * 3.1415926));
+
+  vec2 texC = posInTile;
+
+  if (sinTime <= 0.5) {
+    if (flipX) {
+      if (texC.x < sinTime || texC.x > 1.0 - sinTime)
+        return getFromColor(uv);
+      texC.x = texC.x < 0.5
+        ? (texC.x - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.x - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+    }
+    if (flipY) {
+      if (texC.y < sinTime || texC.y > 1.0 - sinTime)
+        return getFromColor(uv);
+      texC.y = texC.y < 0.5
+        ? (texC.y - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.y - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+    }
+    vec2 globalUV = tileNum * tileSize + texC * tileSize;
+    return getFromColor(globalUV);
+  } else {
+    if (flipX) {
+      if (texC.x > sinTime || texC.x < 1.0 - sinTime)
+        return getToColor(uv);
+      texC.x = texC.x < 0.5
+        ? (texC.x - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.x - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+      texC.x = 1.0 - texC.x;
+    }
+    if (flipY) {
+      if (texC.y > sinTime || texC.y < 1.0 - sinTime)
+        return getToColor(uv);
+      texC.y = texC.y < 0.5
+        ? (texC.y - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.y - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+      texC.y = 1.0 - texC.y;
+    }
+    vec2 globalUV = tileNum * tileSize + texC * tileSize;
+    return getToColor(globalUV);
+  }
+}