kinetic-slider/dist/esm/filters/shockwaveFilter.js

A WebGL-powered kinetic slider component using PIXI.js

import { ShockwaveFilter } from 'pixi-filters';
import { gsap } from 'gsap';
import { ShaderResourceManager } from '../managers/ShaderResourceManager.js';

function createShockwaveFilter(config) {
  const shaderManager = ShaderResourceManager.getInstance();
  const options = {};
  if (config.amplitude !== void 0) options.amplitude = config.amplitude;
  if (config.brightness !== void 0) options.brightness = config.brightness;
  if (config.center !== void 0) options.center = config.center;
  if (config.centerX !== void 0) options.centerX = config.centerX;
  if (config.centerY !== void 0) options.centerY = config.centerY;
  if (config.radius !== void 0) options.radius = config.radius;
  if (config.speed !== void 0) options.speed = config.speed;
  if (config.wavelength !== void 0) options.wavelength = config.wavelength;
  if (config.time !== void 0) options.time = config.time;
  const shaderKey = "shockwave-filter";
  const filter = new ShockwaveFilter(options);
  try {
    shaderManager.registerFilter(filter, shaderKey);
  } catch (error) {
    console.warn("Error registering shockwave filter with shader manager:", error);
  }
  let animationActive = false;
  let animationFrameId = null;
  let lastTime = 0;
  let pulseTween = null;
  const updateIntensity = (intensity) => {
    const normalizedIntensity = Math.max(0, Math.min(10, intensity));
    if (config.primaryProperty) {
      switch (config.primaryProperty) {
        case "amplitude":
          filter.amplitude = normalizedIntensity * 6;
          break;
        case "wavelength":
          filter.wavelength = 80 + normalizedIntensity * 16;
          break;
        case "radius":
          filter.radius = normalizedIntensity === 10 ? -1 : normalizedIntensity * 30;
          break;
        case "brightness":
          filter.brightness = 0.5 + normalizedIntensity / 10;
          break;
        case "speed":
          filter.speed = 100 + normalizedIntensity * 90;
          break;
        default:
          filter.amplitude = normalizedIntensity * 6;
      }
    } else {
      filter.amplitude = normalizedIntensity * 6;
      filter.brightness = 0.8 + normalizedIntensity / 50;
    }
    if (config.animate) {
      if (normalizedIntensity > 0 && !animationActive) {
        startAnimation();
      } else if (normalizedIntensity === 0 && animationActive) {
        stopAnimation();
      }
    }
  };
  const startAnimation = () => {
    if (animationActive) return;
    animationActive = true;
    lastTime = Date.now();
    const animate = () => {
      const now = Date.now();
      const delta = (now - lastTime) / 1e3;
      lastTime = now;
      const animationSpeed = config.animationSpeed || 0.5;
      if ("time" in filter) {
        filter.time += delta * animationSpeed;
      }
      animationFrameId = requestAnimationFrame(animate);
    };
    animate();
  };
  const stopAnimation = () => {
    if (!animationActive) return;
    animationActive = false;
    if (animationFrameId !== null) {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = null;
    }
  };
  updateIntensity(config.intensity);
  if (config.pulse) {
    const pulseIntensity = config.pulseIntensity || 0.5;
    const pulseDuration = config.pulseDuration || 1.5;
    pulseTween = gsap.to(filter, {
      amplitude: filter.amplitude * (1 + pulseIntensity),
      duration: pulseDuration / 2,
      repeat: -1,
      yoyo: true,
      ease: "sine.inOut"
    });
  }
  const reset = () => {
    stopAnimation();
    filter.amplitude = config.amplitude !== void 0 ? config.amplitude : 30;
    filter.wavelength = config.wavelength !== void 0 ? config.wavelength : 160;
    filter.radius = config.radius !== void 0 ? config.radius : -1;
    filter.brightness = config.brightness !== void 0 ? config.brightness : 1;
    filter.speed = config.speed !== void 0 ? config.speed : 500;
    if (config.center !== void 0) {
      filter.center = config.center;
    } else {
      const centerX = config.centerX !== void 0 ? config.centerX : 0.5;
      const centerY = config.centerY !== void 0 ? config.centerY : 0.5;
      filter.center = { x: centerX, y: centerY };
    }
    if ("time" in filter) {
      filter.time = config.time !== void 0 ? config.time : 0;
    }
  };
  const dispose = () => {
    stopAnimation();
    if (pulseTween) {
      pulseTween.kill();
      pulseTween = null;
    }
    try {
      shaderManager.releaseFilter(filter, shaderKey);
    } catch (error) {
      console.warn("Error releasing shockwave filter shader:", error);
    }
    filter.destroy();
  };
  return { filter, updateIntensity, reset, dispose };
}

export { createShockwaveFilter };
//# sourceMappingURL=shockwaveFilter.js.map