tsparticles
Version:
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
80 lines (79 loc) • 3.63 kB
JavaScript
import { NumberUtils, Utils } from "../Utils";
export class Retina {
constructor(container) {
this.container = container;
}
init() {
const container = this.container;
const options = container.actualOptions;
this.pixelRatio = !options.detectRetina || Utils.isSsr() ? 1 : window.devicePixelRatio;
const motionOptions = this.container.actualOptions.motion;
if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
if (Utils.isSsr() || typeof matchMedia === "undefined" || !matchMedia) {
this.reduceFactor = 1;
}
else {
const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)");
if (mediaQuery) {
this.handleMotionChange(mediaQuery);
const handleChange = () => {
this.handleMotionChange(mediaQuery);
container.refresh().catch(() => {
});
};
if (mediaQuery.addEventListener !== undefined) {
mediaQuery.addEventListener("change", handleChange);
}
else if (mediaQuery.addListener !== undefined) {
mediaQuery.addListener(handleChange);
}
}
}
}
else {
this.reduceFactor = 1;
}
const ratio = this.pixelRatio;
if (container.canvas.element) {
const element = container.canvas.element;
container.canvas.size.width = element.offsetWidth * ratio;
container.canvas.size.height = element.offsetHeight * ratio;
}
const particles = options.particles;
this.linksDistance = particles.links.distance * ratio;
this.linksWidth = particles.links.width * ratio;
this.sizeAnimationSpeed = particles.size.animation.speed * ratio;
const modes = options.interactivity.modes;
this.connectModeDistance = modes.connect.distance * ratio;
this.connectModeRadius = modes.connect.radius * ratio;
this.grabModeDistance = modes.grab.distance * ratio;
this.repulseModeDistance = modes.repulse.distance * ratio;
this.bounceModeDistance = modes.bounce.distance * ratio;
this.attractModeDistance = modes.attract.distance * ratio;
this.slowModeRadius = modes.slow.radius * ratio;
this.bubbleModeDistance = modes.bubble.distance * ratio;
if (modes.bubble.size) {
this.bubbleModeSize = modes.bubble.size * ratio;
}
}
initParticle(particle) {
const particlesOptions = particle.options;
const ratio = this.pixelRatio;
particle.linksDistance = particlesOptions.links.distance * ratio;
particle.linksWidth = particlesOptions.links.width * ratio;
particle.moveDrift = NumberUtils.getRangeValue(particlesOptions.move.drift) * ratio;
particle.moveSpeed = NumberUtils.getRangeValue(particlesOptions.move.speed) * ratio;
particle.sizeAnimationSpeed = particlesOptions.size.animation.speed * ratio;
particle.maxDistance = particlesOptions.move.distance * ratio;
}
handleMotionChange(mediaQuery) {
const options = this.container.actualOptions;
if (mediaQuery.matches) {
const motion = options.motion;
this.reduceFactor = motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1;
}
else {
this.reduceFactor = 1;
}
}
}