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.
90 lines (89 loc) • 3.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Attractor = void 0;
const Enums_1 = require("../../Enums");
const Utils_1 = require("../../Utils");
class Attractor {
constructor(container) {
this.container = container;
}
isEnabled() {
const container = this.container;
const options = container.actualOptions;
const mouse = container.interactivity.mouse;
const events = options.interactivity.events;
if (!((events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
return false;
}
const hoverMode = events.onHover.mode;
const clickMode = events.onClick.mode;
return Utils_1.Utils.isInArray(Enums_1.HoverMode.attract, hoverMode) || Utils_1.Utils.isInArray(Enums_1.ClickMode.attract, clickMode);
}
reset() {
}
interact() {
const container = this.container;
const options = container.actualOptions;
const mouseMoveStatus = container.interactivity.status === Utils_1.Constants.mouseMoveEvent;
const events = options.interactivity.events;
const hoverEnabled = events.onHover.enable;
const hoverMode = events.onHover.mode;
const clickEnabled = events.onClick.enable;
const clickMode = events.onClick.mode;
if (mouseMoveStatus && hoverEnabled && Utils_1.Utils.isInArray(Enums_1.HoverMode.attract, hoverMode)) {
this.hoverAttract();
}
else if (clickEnabled && Utils_1.Utils.isInArray(Enums_1.ClickMode.attract, clickMode)) {
this.clickAttract();
}
}
hoverAttract() {
const container = this.container;
const mousePos = container.interactivity.mouse.position;
if (!mousePos) {
return;
}
const attractRadius = container.retina.attractModeDistance;
this.processAttract(mousePos, attractRadius, new Utils_1.Circle(mousePos.x, mousePos.y, attractRadius));
}
processAttract(position, attractRadius, area) {
const container = this.container;
const query = container.particles.quadTree.query(area);
for (const particle of query) {
const { dx, dy, distance } = Utils_1.NumberUtils.getDistances(particle.position, position);
const normVec = {
x: dx / distance,
y: dy / distance,
};
const velocity = container.actualOptions.interactivity.modes.attract.speed;
const attractFactor = Utils_1.NumberUtils.clamp((1 - Math.pow(distance / attractRadius, 2)) * velocity, 0, 50);
particle.position.x -= normVec.x * attractFactor;
particle.position.y -= normVec.y * attractFactor;
}
}
clickAttract() {
const container = this.container;
if (!container.attract.finish) {
if (!container.attract.count) {
container.attract.count = 0;
}
container.attract.count++;
if (container.attract.count === container.particles.count) {
container.attract.finish = true;
}
}
if (container.attract.clicking) {
const mousePos = container.interactivity.mouse.clickPosition;
if (!mousePos) {
return;
}
const attractRadius = container.retina.attractModeDistance;
this.processAttract(mousePos, attractRadius, new Utils_1.Circle(mousePos.x, mousePos.y, attractRadius));
}
else if (container.attract.clicking === false) {
container.attract.particles = [];
}
return;
}
}
exports.Attractor = Attractor;