kinetic-slider
Version:
A WebGL-powered kinetic slider component using PIXI.js
136 lines (132 loc) • 4.77 kB
JavaScript
;
var pixiFilters = require('pixi-filters');
var gsap = require('gsap');
var ShaderResourceManager = require('../managers/ShaderResourceManager.cjs');
function createShockwaveFilter(config) {
const shaderManager = ShaderResourceManager.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 pixiFilters.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.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 };
}
exports.createShockwaveFilter = createShockwaveFilter;
//# sourceMappingURL=shockwaveFilter.cjs.map