kampos - npm Package Compare versions

Comparing version 0.14.7 to 0.14.8

CHANGELOG.md

@@ -0,1 +1,7 @@
+### 0.14.8 (2024-12-24)
+
+_Fixed:_
+
+-   Fixed direction of `u_mouse` offsets in `turbulence` effect.
+
 ### 0.14.7 (2024-12-19)
@@ -2,0 +8,0 @@

demo/multi-pointer.js

@@ -13,111 +13,4 @@ import { Kampos, effects } from '../index.js';
 
-const easeOutSine = (t) => {
-    return Math.sin(t * Math.PI / 2);
-};
+const worker = new Worker('./blob-texture-worker.js');
 
-const easeOutQuad = (t) => {
-    return -1 * t * (t - 2) ;
-};
-
-class PointerTexture {
-    constructor ({ target, width, height, radius, intensity, maxAge, canvas, forceDecay = 0.01 }){
-        this.width = width;
-        this.height = height;
-        this.radius = radius || 100;
-        this.intensity = intensity;
-        this.maxAge = maxAge;
-        this.decayFactor = forceDecay;
-        this.last = null;
-        this.points = [];
-        this.ctx = canvas.getContext('2d');
-
-        target.addEventListener('pointermove', this.addPoint.bind(this));
-    }
-
-    clear() {
-        this.ctx.fillStyle = 'rgba(127, 127, 0, 1)';
-        this.ctx.fillRect(0, 0, this.width, this.height);
-    }
-
-    addPoint (e){
-        const x = e.offsetX / this.width;
-        const y = e.offsetY / this.height;
-        const point = {
-            x,
-            y,
-            age: 0,
-            speed: 0,
-            vx: 0,
-            vy: 0,
-        };
-
-        if (this.last) {
-            const relativeX = point.x - this.last.x;
-            const relativeY = point.y - this.last.y;
-
-            const speedSquared = relativeX ** 2 + relativeY ** 2;
-            const speed = Math.sqrt(speedSquared);
-
-            point.vx = relativeX / (speed + 1e-5);
-            point.vy = relativeY / (speed + 1e-5);
-
-            point.speed = Math.min(speedSquared * 1e3, 1);
-        }
-
-        this.last = point;
-
-        this.points.push(point);
-    }
-
-    update () {
-        this.clear();
-        this.points.forEach((point, i) => {
-            const decay = 1 - (point.age / this.maxAge);
-            const force = point.speed * decay ** 2 * this.decayFactor;
-            point.x += point.vx * force;
-            point.y += point.vy * force;
-            point.age += 1;
-
-            if (point.age > this.maxAge) {
-                this.points.splice(i, 1);
-
-                if (this.points.length === 0) {
-                    this.last = null;
-                }
-            } else {
-                this.drawPoint(point);
-            }
-        });
-    }
-
-    drawPoint (point) {
-        const position = {
-            x: point.x * this.width,
-            y: point.y * this.height
-        };
-        let intensity = 1;
-        if (point.age < this.maxAge * 0.3) {
-            intensity = easeOutSine(point.age / (this.maxAge * 0.3));
-        } else {
-            intensity = easeOutQuad(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
-        }
-        intensity *= point.speed;
-
-        const red = (1 - point.vx) / 2 * 255;
-        const green = (1 + point.vy) / 2 * 255;
-        const blue = intensity * 255;
-
-        const offset = this.width * 5;
-        this.ctx.shadowOffsetX = offset;
-        this.ctx.shadowOffsetY = offset;
-        this.ctx.shadowBlur = this.radius;
-        this.ctx.shadowColor = `rgba(${red}, ${green}, ${blue}, ${this.intensity * intensity})`;
-
-        this.ctx.beginPath();
-        this.ctx.fillStyle = 'rgba(255, 0 , 0, 0, 1)';
-        this.ctx.arc(position.x - offset, position.y - offset, this.radius, 0, 2 * Math.PI);
-        this.ctx.fill();
-    }
-}
-
 const MAP_WIDTH = 1396;
@@ -138,8 +31,8 @@ const MAP_HEIGHT = 992;
 
-    // const render = new Kampos({ target: mapTarget, effects: [pointer], noSource: true });
-    const pointerTexture = new PointerTexture({
-        target,
+    const offscreen = mapTarget.transferControlToOffscreen();
+    worker.postMessage({
+        type: 'init',
+        canvas: offscreen,
         width,
         height,
-        canvas: DEBUG ? target : mapTarget,
         radius: 130,
@@ -149,2 +42,6 @@ intensity: 1.2,
         forceDecay: 0.01,
+    }, [offscreen]);
+
+    target.addEventListener('pointermove', ({ offsetX, offsetY}) => {
+        worker.postMessage({ type: 'addpoint', event: { offsetX, offsetY} });
     });
@@ -174,6 +71,4 @@
 
-        instance.play(() => {
-            pointerTexture.update();
-        });
+        instance.play();
     }
 });

package.json

 {
     "name": "kampos",
-    "version": "0.14.7",
+    "version": "0.14.8",
     "description": "Tiny and fast effects compositor on WebGL",
@@ -5,0 +5,0 @@ "registry": "https://registry.npmjs.org/",

src/effects/turbulence.js

@@ -153,5 +153,5 @@ /**
     FRAGCOORD_XY_MOUSE_TIME:
-        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), u_time * 0.0001);',
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy - u_mouse * u_resolution, u_time * 0.0001);',
     FRAGCOORD_XY_MOUSE_Z:
-        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), gl_FragCoord.z);',
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy - u_mouse * u_resolution, gl_FragCoord.z);',
 };
@@ -158,0 +158,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10549022

increased by0.01%

Number of package files

109

increased by0.93%

Lines of code

30004

increased by0.12%

No dependency changes