feat: add intersecion options

packages/docs/index.html

@@ -392,6 +392,7 @@ <h3>Transitions</h3>
                         <img
                             src="./vfx-js-logo-no-padding.svg"
                             data-shader="slitScanTransition"
+                            data-threshold="1"
                         />
                     </div>
                 </div>
@@ -405,6 +406,7 @@ <h3>Transitions</h3>
                         <img
                             src="./vfx-js-logo-no-padding.svg"
                             data-shader="warpTransition"
+                            data-threshold="1"
                         />
                     </div>
                 </div>
@@ -418,6 +420,20 @@ <h3>Transitions</h3>
                         <img
                             src="./vfx-js-logo-no-padding.svg"
                             data-shader="pixelateTransition"
+                            data-threshold="1"
+                        />
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <pre><code class="language-javascript">
+vfx.add(el, { shader: "focusTransition" });
+                        </code></pre>
+                    </div>
+                    <div class="col">
+                        <img
+                            src="./vfx-js-logo-no-padding.svg"
+                            data-shader="focusTransition"
                         />
                     </div>
                 </div>

packages/docs/src/main.ts

@@ -17,6 +17,7 @@ const shaders: Record<string, string> = {
     uniform vec2 offset;
     uniform float time;
     uniform float enterTime;
+    uniform float leaveTime;
     uniform sampler2D src;
 
     uniform float delay;
@@ -79,7 +80,10 @@ const shaders: Record<string, string> = {
 
     void main (void) {
         vec2 uv = (gl_FragCoord.xy - offset) / resolution;
-        if (enterTime < 1.0) {
+        if (leaveTime > 0.) {
+            float t = clamp(leaveTime - 0.5, 0., 1.);
+            gl_FragColor = glitch(uv) * (1. - t);
+        } else if (enterTime < 1.0) {
             gl_FragColor = slitscan(uv);
         } else {
             gl_FragColor = glitch(uv);
@@ -229,6 +233,11 @@ class App {
                 shader,
                 overflow: parseFloat(e.getAttribute("data-overflow") ?? "0"),
                 uniforms,
+                intersection: {
+                    threshold: parseFloat(
+                        e.getAttribute("data-threshold") ?? "0",
+                    ),
+                },
             });
         }
     }
@@ -349,22 +358,32 @@ class App {
             shader: shaders.logo,
             overflow: [0, 3000, 0, 100],
             uniforms: { delay: 0 },
+            intersection: {
+                threshold: 1,
+            },
         });
 
         const tagline = document.getElementById("LogoTagline")!;
         this.vfx.add(tagline, {
             shader: shaders.logo,
             overflow: [0, 3000, 0, 1000],
             uniforms: { delay: 0.3 },
+            intersection: {
+                threshold: 1,
+            },
         });
     }
 
     showProfile() {
         const profile = document.getElementById("profile")!;
         this.vfx.add(profile, {
             shader: shaders.logo,
-            overflow: [0, 2000, 0, 1000],
+            overflow: [0, 2000, 0, 2000],
             uniforms: { delay: 0.5 },
+            intersection: {
+                rootMargin: [-100, 0, -100, 0],
+                threshold: 1,
+            },
         });
     }
 }

packages/vfx-js/src/constants.ts

@@ -25,7 +25,8 @@ export type ShaderPreset =
     | "halftone"
     | "slitScanTransition"
     | "warpTransition"
-    | "pixelateTransition";
+    | "pixelateTransition"
+    | "focusTransition";
 
 /**
  * Shader code for presets.
@@ -578,13 +579,23 @@ export const shaders: Record<ShaderPreset, string> = {
     uniform vec2 offset;
     uniform float time;
     uniform float enterTime;
+    uniform float leaveTime;
     uniform sampler2D src;
 
+    #define DURATION 1.0
+
     void main (void) {
         vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
-        if (enterTime < 1.5) {
-            float t = enterTime / 1.5;
+        float t1 = enterTime / DURATION;
+        float t2 = leaveTime / DURATION;
+        float t = clamp(min(t1, 1. - t2), 0., 1.);
+
+        if (t == 0.) {
+            discard;
+        }
+
+        if (t < 1.) {
             uv.x += sin(floor(uv.y * 300.)) * 3. * exp(t * -10.);
         }
 
@@ -597,14 +608,30 @@ export const shaders: Record<ShaderPreset, string> = {
     uniform vec2 offset;
     uniform float time;
     uniform float enterTime;
+    uniform float leaveTime;
     uniform sampler2D src;
 
+    #define DURATION 1.0
+
     void main (void) {
         vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
-        if (enterTime < 1.5) {
-            float t = 1. - enterTime / 1.5;
-            uv.y = uv.y > t ? uv.y : t;
+        float t1 = enterTime / DURATION;
+        float t2 = leaveTime / DURATION;
+
+        // Do not render before enter or after leave
+        if (t1 < 0. || 1. < t2) {
+            discard;
+        }
+
+        if (0. < t2) {
+            // Leaving
+            float t = 1. - t2;
+            uv.y = uv.y < t ? uv.y : t;
+        } else if (t1 < 1.) {
+            // Entering
+            float t = 1. - t1;
+            uv.y = uv.y < t ? t : uv.y;
         }
 
         gl_FragColor = texture2D(src, uv);
@@ -616,19 +643,45 @@ export const shaders: Record<ShaderPreset, string> = {
     uniform vec2 offset;
     uniform float time;
     uniform float enterTime;
+    uniform float leaveTime;
     uniform sampler2D src;
 
+    #define DURATION 1.0
+
     void main (void) {
         vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
-        if (enterTime < 1.5) {
-            float t = enterTime / 1.5;
+        float t1 = enterTime / DURATION;
+        float t2 = leaveTime / DURATION;
+        float t = clamp(min(t1, 1. - t2), 0., 1.);
 
+        if (t == 0.) {
+            discard;
+        } else if (t < 1.) {
             float b = floor(t * 64.);
             uv = (floor(uv * b) + .5) / b;
         }
 
         gl_FragColor = texture2D(src, uv);
     }
     `,
+    focusTransition: `
+    precision highp float;
+    uniform vec2 resolution;
+    uniform vec2 offset;
+    uniform float time;
+    uniform float intersection;
+    uniform sampler2D src;
+
+    void main (void) {
+        vec2 uv = (gl_FragCoord.xy - offset) / resolution;
+        float t = smoothstep(0., 1., intersection);
+
+        gl_FragColor = mix(
+            texture2D(src, uv + vec2(1. - t, 0)),
+            texture2D(src, uv + vec2(-(1. - t), 0)),
+            0.5
+        ) * intersection;
+    }
+    `,
 };

packages/vfx-js/src/rect.test.ts

@@ -0,0 +1,129 @@
+import { expect, describe, test } from "vitest";
+import { createRect, getIntersection, growRect, shrinkRect } from "./rect";
+
+describe("createRect", () => {
+    test("single number", () => {
+        expect(createRect(1)).toStrictEqual({
+            top: 1,
+            right: 1,
+            bottom: 1,
+            left: 1,
+        });
+    });
+
+    test("array", () => {
+        expect(createRect([1, 2, 3, 4])).toStrictEqual({
+            top: 1,
+            right: 2,
+            bottom: 3,
+            left: 4,
+        });
+    });
+
+    test("object", () => {
+        expect(
+            createRect({ top: 1, right: 2, bottom: 3, left: 4 }),
+        ).toStrictEqual({
+            top: 1,
+            right: 2,
+            bottom: 3,
+            left: 4,
+        });
+    });
+});
+
+describe("growRect", () => {
+    test("positive values", () => {
+        const a = {
+            top: 100,
+            right: 200,
+            bottom: 200,
+            left: 100,
+        };
+        const b = createRect(1);
+        expect(growRect(a, b)).toStrictEqual({
+            top: 99,
+            right: 201,
+            bottom: 201,
+            left: 99,
+        });
+    });
+    test("negative values", () => {
+        const a = {
+            top: 100,
+            right: 200,
+            bottom: 200,
+            left: 100,
+        };
+        const b = createRect(-1);
+        expect(growRect(a, b)).toStrictEqual({
+            top: 101,
+            right: 199,
+            bottom: 199,
+            left: 101,
+        });
+    });
+});
+
+describe("shrinkRect", () => {
+    test("positive values", () => {
+        const a = {
+            top: 100,
+            right: 200,
+            bottom: 200,
+            left: 100,
+        };
+        const b = createRect(1);
+        expect(shrinkRect(a, b)).toStrictEqual({
+            top: 101,
+            right: 199,
+            bottom: 199,
+            left: 101,
+        });
+    });
+    test("negative values", () => {
+        const a = {
+            top: 100,
+            right: 200,
+            bottom: 200,
+            left: 100,
+        };
+        const b = createRect(-1);
+        expect(shrinkRect(a, b)).toStrictEqual({
+            top: 99,
+            right: 201,
+            bottom: 201,
+            left: 99,
+        });
+    });
+});
+
+describe("getIntersection", () => {
+    test("no intersection", () => {
+        const a = createRect([0, 1, 1, 0]);
+        const b = createRect([0, 2, 1, 1]);
+        expect(getIntersection(a, b)).toBe(0);
+    });
+    test("full intersection", () => {
+        expect(
+            getIntersection(createRect([0, 1, 1, 0]), createRect([0, 1, 1, 0])),
+        ).toBe(1);
+        expect(
+            getIntersection(
+                createRect([0, 10, 10, 1]),
+                createRect([1, 2, 2, 1]),
+            ),
+        ).toBe(1);
+    });
+    test("partial intersection", () => {
+        expect(
+            getIntersection(createRect([0, 2, 1, 0]), createRect([0, 1, 1, 0])),
+        ).toBe(1); // target is fully covered by container
+        expect(
+            getIntersection(createRect([0, 1, 1, 0]), createRect([0, 2, 1, 0])),
+        ).toBe(0.5); // 50% of target is covered by container
+        expect(
+            getIntersection(createRect([1, 2, 2, 1]), createRect([0, 2, 2, 0])),
+        ).toBe(0.25); // 25%
+    });
+});