@tsparticles/plugin-absorbers 3.0.0-alpha.1 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -11
- package/browser/AbsorberInstance.js +59 -61
- package/browser/Absorbers.js +3 -3
- package/browser/Options/Classes/Absorber.js +1 -1
- package/browser/Options/Classes/AbsorberSize.js +2 -2
- package/browser/index.js +7 -10
- package/cjs/AbsorberInstance.js +59 -61
- package/cjs/Absorbers.js +7 -18
- package/cjs/Options/Classes/AbsorberSize.js +2 -2
- package/cjs/index.js +6 -20
- package/esm/AbsorberInstance.js +59 -61
- package/esm/Absorbers.js +3 -3
- package/esm/Options/Classes/Absorber.js +1 -1
- package/esm/Options/Classes/AbsorberSize.js +2 -2
- package/esm/index.js +7 -10
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.plugin.absorbers.js +71 -76
- package/tsparticles.plugin.absorbers.min.js +1 -1
- package/tsparticles.plugin.absorbers.min.js.LICENSE.txt +1 -8
- package/types/AbsorberInstance.d.ts +3 -4
- package/types/Absorbers.d.ts +1 -1
- package/types/Options/Classes/Absorber.d.ts +1 -2
- package/types/Options/Classes/AbsorberSize.d.ts +1 -2
- package/types/index.d.ts +2 -2
- package/umd/AbsorberInstance.js +59 -61
- package/umd/Absorbers.js +2 -2
- package/umd/Options/Classes/AbsorberSize.js +3 -3
- package/umd/index.js +6 -9
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Absorbers Plugin
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-absorbers)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/plugin-absorbers)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/plugin-absorbers) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles absorbers.
|
|
10
10
|
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the plugin like thi
|
|
|
42
42
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
43
|
|
|
44
44
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
45
|
+
$ npm install @tsparticles/plugin-absorbers
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/plugin-absorbers
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Then you need to import it in the app, like this:
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadAbsorbersPlugin } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadAbsorbersPlugin } = require("@tsparticles/plugin-absorbers");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadAbsorbersPlugin(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadAbsorbersPlugin } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadAbsorbersPlugin } from "@tsparticles/plugin-absorbers";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadAbsorbersPlugin(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
|
@@ -2,9 +2,61 @@ import { Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRange
|
|
|
2
2
|
import { Absorber } from "./Options/Classes/Absorber";
|
|
3
3
|
export class AbsorberInstance {
|
|
4
4
|
constructor(absorbers, container, options, position) {
|
|
5
|
-
var _a, _b, _c;
|
|
6
5
|
this.absorbers = absorbers;
|
|
7
6
|
this.container = container;
|
|
7
|
+
this._calcPosition = () => {
|
|
8
|
+
const exactPosition = calcPositionOrRandomFromSizeRanged({
|
|
9
|
+
size: this.container.canvas.size,
|
|
10
|
+
position: this.options.position,
|
|
11
|
+
});
|
|
12
|
+
return Vector.create(exactPosition.x, exactPosition.y);
|
|
13
|
+
};
|
|
14
|
+
this._updateParticlePosition = (particle, v) => {
|
|
15
|
+
if (particle.destroyed) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const container = this.container, canvasSize = container.canvas.size;
|
|
19
|
+
if (particle.needsNewPosition) {
|
|
20
|
+
const newPosition = calcPositionOrRandomFromSize({ size: canvasSize });
|
|
21
|
+
particle.position.setTo(newPosition);
|
|
22
|
+
particle.velocity.setTo(particle.initialVelocity);
|
|
23
|
+
particle.absorberOrbit = undefined;
|
|
24
|
+
particle.needsNewPosition = false;
|
|
25
|
+
}
|
|
26
|
+
if (this.options.orbits) {
|
|
27
|
+
if (particle.absorberOrbit === undefined) {
|
|
28
|
+
particle.absorberOrbit = Vector.create(0, 0);
|
|
29
|
+
particle.absorberOrbit.length = getDistance(particle.getPosition(), this.position);
|
|
30
|
+
particle.absorberOrbit.angle = getRandom() * Math.PI * 2;
|
|
31
|
+
}
|
|
32
|
+
if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
|
|
33
|
+
const minSize = Math.min(canvasSize.width, canvasSize.height);
|
|
34
|
+
particle.absorberOrbit.length = minSize * (1 + (getRandom() * 0.2 - 0.1));
|
|
35
|
+
}
|
|
36
|
+
if (particle.absorberOrbitDirection === undefined) {
|
|
37
|
+
particle.absorberOrbitDirection =
|
|
38
|
+
particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
|
|
39
|
+
}
|
|
40
|
+
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
41
|
+
particle.velocity.setTo(Vector.origin);
|
|
42
|
+
const updateFunc = {
|
|
43
|
+
x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
|
|
44
|
+
y: orbitDirection === "clockwise" ? Math.sin : Math.cos,
|
|
45
|
+
};
|
|
46
|
+
particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
|
|
47
|
+
particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
|
|
48
|
+
particle.absorberOrbit.length -= v.length;
|
|
49
|
+
particle.absorberOrbit.angle +=
|
|
50
|
+
(((particle.retina.moveSpeed ?? 0) * container.retina.pixelRatio) / 100) *
|
|
51
|
+
container.retina.reduceFactor;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
const addV = Vector.origin;
|
|
55
|
+
addV.length = v.length;
|
|
56
|
+
addV.angle = v.angle;
|
|
57
|
+
particle.velocity.addTo(addV);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
8
60
|
this.initialPosition = position ? Vector.create(position.x, position.y) : undefined;
|
|
9
61
|
if (options instanceof Absorber) {
|
|
10
62
|
this.options = options;
|
|
@@ -23,12 +75,12 @@ export class AbsorberInstance {
|
|
|
23
75
|
radius: limit.radius * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
24
76
|
mass: limit.mass,
|
|
25
77
|
};
|
|
26
|
-
this.color =
|
|
78
|
+
this.color = rangeColorToRgb(this.options.color) ?? {
|
|
27
79
|
b: 0,
|
|
28
80
|
g: 0,
|
|
29
81
|
r: 0,
|
|
30
82
|
};
|
|
31
|
-
this.position =
|
|
83
|
+
this.position = this.initialPosition?.copy() ?? this._calcPosition();
|
|
32
84
|
}
|
|
33
85
|
attract(particle) {
|
|
34
86
|
const container = this.container, options = this.options;
|
|
@@ -59,14 +111,14 @@ export class AbsorberInstance {
|
|
|
59
111
|
}
|
|
60
112
|
else {
|
|
61
113
|
particle.needsNewPosition = true;
|
|
62
|
-
this.
|
|
114
|
+
this._updateParticlePosition(particle, v);
|
|
63
115
|
}
|
|
64
116
|
}
|
|
65
117
|
else {
|
|
66
118
|
if (options.destroy) {
|
|
67
119
|
particle.size.value -= sizeFactor;
|
|
68
120
|
}
|
|
69
|
-
this.
|
|
121
|
+
this._updateParticlePosition(particle, v);
|
|
70
122
|
}
|
|
71
123
|
if (this.limit.radius <= 0 || this.size < this.limit.radius) {
|
|
72
124
|
this.size += sizeFactor;
|
|
@@ -76,7 +128,7 @@ export class AbsorberInstance {
|
|
|
76
128
|
}
|
|
77
129
|
}
|
|
78
130
|
else {
|
|
79
|
-
this.
|
|
131
|
+
this._updateParticlePosition(particle, v);
|
|
80
132
|
}
|
|
81
133
|
}
|
|
82
134
|
draw(context) {
|
|
@@ -92,60 +144,6 @@ export class AbsorberInstance {
|
|
|
92
144
|
this.position =
|
|
93
145
|
initialPosition && isPointInside(initialPosition, this.container.canvas.size, Vector.origin)
|
|
94
146
|
? initialPosition
|
|
95
|
-
: this.
|
|
96
|
-
}
|
|
97
|
-
calcPosition() {
|
|
98
|
-
const exactPosition = calcPositionOrRandomFromSizeRanged({
|
|
99
|
-
size: this.container.canvas.size,
|
|
100
|
-
position: this.options.position,
|
|
101
|
-
});
|
|
102
|
-
return Vector.create(exactPosition.x, exactPosition.y);
|
|
103
|
-
}
|
|
104
|
-
updateParticlePosition(particle, v) {
|
|
105
|
-
var _a;
|
|
106
|
-
if (particle.destroyed) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const container = this.container, canvasSize = container.canvas.size;
|
|
110
|
-
if (particle.needsNewPosition) {
|
|
111
|
-
const newPosition = calcPositionOrRandomFromSize({ size: canvasSize });
|
|
112
|
-
particle.position.setTo(newPosition);
|
|
113
|
-
particle.velocity.setTo(particle.initialVelocity);
|
|
114
|
-
particle.absorberOrbit = undefined;
|
|
115
|
-
particle.needsNewPosition = false;
|
|
116
|
-
}
|
|
117
|
-
if (this.options.orbits) {
|
|
118
|
-
if (particle.absorberOrbit === undefined) {
|
|
119
|
-
particle.absorberOrbit = Vector.create(0, 0);
|
|
120
|
-
particle.absorberOrbit.length = getDistance(particle.getPosition(), this.position);
|
|
121
|
-
particle.absorberOrbit.angle = getRandom() * Math.PI * 2;
|
|
122
|
-
}
|
|
123
|
-
if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
|
|
124
|
-
const minSize = Math.min(canvasSize.width, canvasSize.height);
|
|
125
|
-
particle.absorberOrbit.length = minSize * (1 + (getRandom() * 0.2 - 0.1));
|
|
126
|
-
}
|
|
127
|
-
if (particle.absorberOrbitDirection === undefined) {
|
|
128
|
-
particle.absorberOrbitDirection =
|
|
129
|
-
particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
|
|
130
|
-
}
|
|
131
|
-
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
132
|
-
particle.velocity.setTo(Vector.origin);
|
|
133
|
-
const updateFunc = {
|
|
134
|
-
x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
|
|
135
|
-
y: orbitDirection === "clockwise" ? Math.sin : Math.cos,
|
|
136
|
-
};
|
|
137
|
-
particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
|
|
138
|
-
particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
|
|
139
|
-
particle.absorberOrbit.length -= v.length;
|
|
140
|
-
particle.absorberOrbit.angle +=
|
|
141
|
-
((((_a = particle.retina.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio) / 100) *
|
|
142
|
-
container.retina.reduceFactor;
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
const addV = Vector.origin;
|
|
146
|
-
addV.length = v.length;
|
|
147
|
-
addV.angle = v.angle;
|
|
148
|
-
particle.velocity.addTo(addV);
|
|
149
|
-
}
|
|
147
|
+
: this._calcPosition();
|
|
150
148
|
}
|
|
151
149
|
}
|
package/browser/Absorbers.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { executeOnSingleOrMultiple, itemFromSingleOrMultiple } from "@tsparticles/engine";
|
|
1
|
+
import { executeOnSingleOrMultiple, isNumber, itemFromSingleOrMultiple, } from "@tsparticles/engine";
|
|
2
2
|
import { AbsorberInstance } from "./AbsorberInstance";
|
|
3
3
|
export class Absorbers {
|
|
4
4
|
constructor(container) {
|
|
@@ -6,7 +6,7 @@ export class Absorbers {
|
|
|
6
6
|
this.array = [];
|
|
7
7
|
this.absorbers = [];
|
|
8
8
|
this.interactivityAbsorbers = [];
|
|
9
|
-
container.getAbsorber = (idxOrName) => idxOrName === undefined ||
|
|
9
|
+
container.getAbsorber = (idxOrName) => idxOrName === undefined || isNumber(idxOrName)
|
|
10
10
|
? this.array[idxOrName || 0]
|
|
11
11
|
: this.array.find((t) => t.name === idxOrName);
|
|
12
12
|
container.addAbsorber = (options, position) => this.addAbsorber(options, position);
|
|
@@ -24,7 +24,7 @@ export class Absorbers {
|
|
|
24
24
|
handleClickMode(mode) {
|
|
25
25
|
const absorberOptions = this.absorbers, modeAbsorbers = this.interactivityAbsorbers;
|
|
26
26
|
if (mode === "absorber") {
|
|
27
|
-
const absorbersModeOptions = itemFromSingleOrMultiple(modeAbsorbers), absorbersOptions = absorbersModeOptions
|
|
27
|
+
const absorbersModeOptions = itemFromSingleOrMultiple(modeAbsorbers), absorbersOptions = absorbersModeOptions ?? itemFromSingleOrMultiple(absorberOptions), aPosition = this.container.interactivity.mouse.clickPosition;
|
|
28
28
|
this.addAbsorber(absorbersOptions, aPosition);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ValueWithRandom, isNumber } from "@tsparticles/engine";
|
|
1
2
|
import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
|
|
2
|
-
import { ValueWithRandom } from "@tsparticles/engine";
|
|
3
3
|
export class AbsorberSize extends ValueWithRandom {
|
|
4
4
|
constructor() {
|
|
5
5
|
super();
|
|
@@ -15,7 +15,7 @@ export class AbsorberSize extends ValueWithRandom {
|
|
|
15
15
|
if (data.density !== undefined) {
|
|
16
16
|
this.density = data.density;
|
|
17
17
|
}
|
|
18
|
-
if (
|
|
18
|
+
if (isNumber(data.limit)) {
|
|
19
19
|
this.limit.radius = data.limit;
|
|
20
20
|
}
|
|
21
21
|
else {
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { executeOnSingleOrMultiple, isInArray } from "@tsparticles/engine";
|
|
1
|
+
import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
|
|
2
2
|
import { Absorber } from "./Options/Classes/Absorber";
|
|
3
3
|
import { Absorbers } from "./Absorbers";
|
|
4
4
|
class AbsorbersPlugin {
|
|
@@ -9,45 +9,42 @@ class AbsorbersPlugin {
|
|
|
9
9
|
return new Absorbers(container);
|
|
10
10
|
}
|
|
11
11
|
loadOptions(options, source) {
|
|
12
|
-
var _a, _b;
|
|
13
12
|
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
14
13
|
return;
|
|
15
14
|
}
|
|
16
|
-
if (source
|
|
15
|
+
if (source?.absorbers) {
|
|
17
16
|
options.absorbers = executeOnSingleOrMultiple(source.absorbers, (absorber) => {
|
|
18
17
|
const tmp = new Absorber();
|
|
19
18
|
tmp.load(absorber);
|
|
20
19
|
return tmp;
|
|
21
20
|
});
|
|
22
21
|
}
|
|
23
|
-
options.interactivity.modes.absorbers = executeOnSingleOrMultiple(
|
|
22
|
+
options.interactivity.modes.absorbers = executeOnSingleOrMultiple(source?.interactivity?.modes?.absorbers, (absorber) => {
|
|
24
23
|
const tmp = new Absorber();
|
|
25
24
|
tmp.load(absorber);
|
|
26
25
|
return tmp;
|
|
27
26
|
});
|
|
28
27
|
}
|
|
29
28
|
needsPlugin(options) {
|
|
30
|
-
var _a, _b, _c;
|
|
31
29
|
if (!options) {
|
|
32
30
|
return false;
|
|
33
31
|
}
|
|
34
32
|
const absorbers = options.absorbers;
|
|
35
|
-
if (absorbers
|
|
33
|
+
if (isArray(absorbers)) {
|
|
36
34
|
return !!absorbers.length;
|
|
37
35
|
}
|
|
38
36
|
else if (absorbers) {
|
|
39
37
|
return true;
|
|
40
38
|
}
|
|
41
|
-
else if (
|
|
39
|
+
else if (options.interactivity?.events?.onClick?.mode &&
|
|
42
40
|
isInArray("absorber", options.interactivity.events.onClick.mode)) {
|
|
43
41
|
return true;
|
|
44
42
|
}
|
|
45
43
|
return false;
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
|
-
export async function loadAbsorbersPlugin(engine) {
|
|
49
|
-
|
|
50
|
-
await engine.addPlugin(plugin);
|
|
46
|
+
export async function loadAbsorbersPlugin(engine, refresh = true) {
|
|
47
|
+
await engine.addPlugin(new AbsorbersPlugin(), refresh);
|
|
51
48
|
}
|
|
52
49
|
export * from "./AbsorberContainer";
|
|
53
50
|
export * from "./Enums/AbsorberClickMode";
|
package/cjs/AbsorberInstance.js
CHANGED
|
@@ -5,9 +5,61 @@ const engine_1 = require("@tsparticles/engine");
|
|
|
5
5
|
const Absorber_1 = require("./Options/Classes/Absorber");
|
|
6
6
|
class AbsorberInstance {
|
|
7
7
|
constructor(absorbers, container, options, position) {
|
|
8
|
-
var _a, _b, _c;
|
|
9
8
|
this.absorbers = absorbers;
|
|
10
9
|
this.container = container;
|
|
10
|
+
this._calcPosition = () => {
|
|
11
|
+
const exactPosition = (0, engine_1.calcPositionOrRandomFromSizeRanged)({
|
|
12
|
+
size: this.container.canvas.size,
|
|
13
|
+
position: this.options.position,
|
|
14
|
+
});
|
|
15
|
+
return engine_1.Vector.create(exactPosition.x, exactPosition.y);
|
|
16
|
+
};
|
|
17
|
+
this._updateParticlePosition = (particle, v) => {
|
|
18
|
+
if (particle.destroyed) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const container = this.container, canvasSize = container.canvas.size;
|
|
22
|
+
if (particle.needsNewPosition) {
|
|
23
|
+
const newPosition = (0, engine_1.calcPositionOrRandomFromSize)({ size: canvasSize });
|
|
24
|
+
particle.position.setTo(newPosition);
|
|
25
|
+
particle.velocity.setTo(particle.initialVelocity);
|
|
26
|
+
particle.absorberOrbit = undefined;
|
|
27
|
+
particle.needsNewPosition = false;
|
|
28
|
+
}
|
|
29
|
+
if (this.options.orbits) {
|
|
30
|
+
if (particle.absorberOrbit === undefined) {
|
|
31
|
+
particle.absorberOrbit = engine_1.Vector.create(0, 0);
|
|
32
|
+
particle.absorberOrbit.length = (0, engine_1.getDistance)(particle.getPosition(), this.position);
|
|
33
|
+
particle.absorberOrbit.angle = (0, engine_1.getRandom)() * Math.PI * 2;
|
|
34
|
+
}
|
|
35
|
+
if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
|
|
36
|
+
const minSize = Math.min(canvasSize.width, canvasSize.height);
|
|
37
|
+
particle.absorberOrbit.length = minSize * (1 + ((0, engine_1.getRandom)() * 0.2 - 0.1));
|
|
38
|
+
}
|
|
39
|
+
if (particle.absorberOrbitDirection === undefined) {
|
|
40
|
+
particle.absorberOrbitDirection =
|
|
41
|
+
particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
|
|
42
|
+
}
|
|
43
|
+
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
44
|
+
particle.velocity.setTo(engine_1.Vector.origin);
|
|
45
|
+
const updateFunc = {
|
|
46
|
+
x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
|
|
47
|
+
y: orbitDirection === "clockwise" ? Math.sin : Math.cos,
|
|
48
|
+
};
|
|
49
|
+
particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
|
|
50
|
+
particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
|
|
51
|
+
particle.absorberOrbit.length -= v.length;
|
|
52
|
+
particle.absorberOrbit.angle +=
|
|
53
|
+
(((particle.retina.moveSpeed ?? 0) * container.retina.pixelRatio) / 100) *
|
|
54
|
+
container.retina.reduceFactor;
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
const addV = engine_1.Vector.origin;
|
|
58
|
+
addV.length = v.length;
|
|
59
|
+
addV.angle = v.angle;
|
|
60
|
+
particle.velocity.addTo(addV);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
11
63
|
this.initialPosition = position ? engine_1.Vector.create(position.x, position.y) : undefined;
|
|
12
64
|
if (options instanceof Absorber_1.Absorber) {
|
|
13
65
|
this.options = options;
|
|
@@ -26,12 +78,12 @@ class AbsorberInstance {
|
|
|
26
78
|
radius: limit.radius * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
27
79
|
mass: limit.mass,
|
|
28
80
|
};
|
|
29
|
-
this.color = (
|
|
81
|
+
this.color = (0, engine_1.rangeColorToRgb)(this.options.color) ?? {
|
|
30
82
|
b: 0,
|
|
31
83
|
g: 0,
|
|
32
84
|
r: 0,
|
|
33
85
|
};
|
|
34
|
-
this.position =
|
|
86
|
+
this.position = this.initialPosition?.copy() ?? this._calcPosition();
|
|
35
87
|
}
|
|
36
88
|
attract(particle) {
|
|
37
89
|
const container = this.container, options = this.options;
|
|
@@ -62,14 +114,14 @@ class AbsorberInstance {
|
|
|
62
114
|
}
|
|
63
115
|
else {
|
|
64
116
|
particle.needsNewPosition = true;
|
|
65
|
-
this.
|
|
117
|
+
this._updateParticlePosition(particle, v);
|
|
66
118
|
}
|
|
67
119
|
}
|
|
68
120
|
else {
|
|
69
121
|
if (options.destroy) {
|
|
70
122
|
particle.size.value -= sizeFactor;
|
|
71
123
|
}
|
|
72
|
-
this.
|
|
124
|
+
this._updateParticlePosition(particle, v);
|
|
73
125
|
}
|
|
74
126
|
if (this.limit.radius <= 0 || this.size < this.limit.radius) {
|
|
75
127
|
this.size += sizeFactor;
|
|
@@ -79,7 +131,7 @@ class AbsorberInstance {
|
|
|
79
131
|
}
|
|
80
132
|
}
|
|
81
133
|
else {
|
|
82
|
-
this.
|
|
134
|
+
this._updateParticlePosition(particle, v);
|
|
83
135
|
}
|
|
84
136
|
}
|
|
85
137
|
draw(context) {
|
|
@@ -95,61 +147,7 @@ class AbsorberInstance {
|
|
|
95
147
|
this.position =
|
|
96
148
|
initialPosition && (0, engine_1.isPointInside)(initialPosition, this.container.canvas.size, engine_1.Vector.origin)
|
|
97
149
|
? initialPosition
|
|
98
|
-
: this.
|
|
99
|
-
}
|
|
100
|
-
calcPosition() {
|
|
101
|
-
const exactPosition = (0, engine_1.calcPositionOrRandomFromSizeRanged)({
|
|
102
|
-
size: this.container.canvas.size,
|
|
103
|
-
position: this.options.position,
|
|
104
|
-
});
|
|
105
|
-
return engine_1.Vector.create(exactPosition.x, exactPosition.y);
|
|
106
|
-
}
|
|
107
|
-
updateParticlePosition(particle, v) {
|
|
108
|
-
var _a;
|
|
109
|
-
if (particle.destroyed) {
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
const container = this.container, canvasSize = container.canvas.size;
|
|
113
|
-
if (particle.needsNewPosition) {
|
|
114
|
-
const newPosition = (0, engine_1.calcPositionOrRandomFromSize)({ size: canvasSize });
|
|
115
|
-
particle.position.setTo(newPosition);
|
|
116
|
-
particle.velocity.setTo(particle.initialVelocity);
|
|
117
|
-
particle.absorberOrbit = undefined;
|
|
118
|
-
particle.needsNewPosition = false;
|
|
119
|
-
}
|
|
120
|
-
if (this.options.orbits) {
|
|
121
|
-
if (particle.absorberOrbit === undefined) {
|
|
122
|
-
particle.absorberOrbit = engine_1.Vector.create(0, 0);
|
|
123
|
-
particle.absorberOrbit.length = (0, engine_1.getDistance)(particle.getPosition(), this.position);
|
|
124
|
-
particle.absorberOrbit.angle = (0, engine_1.getRandom)() * Math.PI * 2;
|
|
125
|
-
}
|
|
126
|
-
if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
|
|
127
|
-
const minSize = Math.min(canvasSize.width, canvasSize.height);
|
|
128
|
-
particle.absorberOrbit.length = minSize * (1 + ((0, engine_1.getRandom)() * 0.2 - 0.1));
|
|
129
|
-
}
|
|
130
|
-
if (particle.absorberOrbitDirection === undefined) {
|
|
131
|
-
particle.absorberOrbitDirection =
|
|
132
|
-
particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
|
|
133
|
-
}
|
|
134
|
-
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
135
|
-
particle.velocity.setTo(engine_1.Vector.origin);
|
|
136
|
-
const updateFunc = {
|
|
137
|
-
x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
|
|
138
|
-
y: orbitDirection === "clockwise" ? Math.sin : Math.cos,
|
|
139
|
-
};
|
|
140
|
-
particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
|
|
141
|
-
particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
|
|
142
|
-
particle.absorberOrbit.length -= v.length;
|
|
143
|
-
particle.absorberOrbit.angle +=
|
|
144
|
-
((((_a = particle.retina.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio) / 100) *
|
|
145
|
-
container.retina.reduceFactor;
|
|
146
|
-
}
|
|
147
|
-
else {
|
|
148
|
-
const addV = engine_1.Vector.origin;
|
|
149
|
-
addV.length = v.length;
|
|
150
|
-
addV.angle = v.angle;
|
|
151
|
-
particle.velocity.addTo(addV);
|
|
152
|
-
}
|
|
150
|
+
: this._calcPosition();
|
|
153
151
|
}
|
|
154
152
|
}
|
|
155
153
|
exports.AbsorberInstance = AbsorberInstance;
|
package/cjs/Absorbers.js
CHANGED
|
@@ -1,13 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.Absorbers = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
@@ -18,7 +9,7 @@ class Absorbers {
|
|
|
18
9
|
this.array = [];
|
|
19
10
|
this.absorbers = [];
|
|
20
11
|
this.interactivityAbsorbers = [];
|
|
21
|
-
container.getAbsorber = (idxOrName) => idxOrName === undefined ||
|
|
12
|
+
container.getAbsorber = (idxOrName) => idxOrName === undefined || (0, engine_1.isNumber)(idxOrName)
|
|
22
13
|
? this.array[idxOrName || 0]
|
|
23
14
|
: this.array.find((t) => t.name === idxOrName);
|
|
24
15
|
container.addAbsorber = (options, position) => this.addAbsorber(options, position);
|
|
@@ -36,17 +27,15 @@ class Absorbers {
|
|
|
36
27
|
handleClickMode(mode) {
|
|
37
28
|
const absorberOptions = this.absorbers, modeAbsorbers = this.interactivityAbsorbers;
|
|
38
29
|
if (mode === "absorber") {
|
|
39
|
-
const absorbersModeOptions = (0, engine_1.itemFromSingleOrMultiple)(modeAbsorbers), absorbersOptions = absorbersModeOptions
|
|
30
|
+
const absorbersModeOptions = (0, engine_1.itemFromSingleOrMultiple)(modeAbsorbers), absorbersOptions = absorbersModeOptions ?? (0, engine_1.itemFromSingleOrMultiple)(absorberOptions), aPosition = this.container.interactivity.mouse.clickPosition;
|
|
40
31
|
this.addAbsorber(absorbersOptions, aPosition);
|
|
41
32
|
}
|
|
42
33
|
}
|
|
43
|
-
init() {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.addAbsorber(absorber);
|
|
49
|
-
});
|
|
34
|
+
async init() {
|
|
35
|
+
this.absorbers = this.container.actualOptions.absorbers;
|
|
36
|
+
this.interactivityAbsorbers = this.container.actualOptions.interactivity.modes.absorbers;
|
|
37
|
+
(0, engine_1.executeOnSingleOrMultiple)(this.absorbers, (absorber) => {
|
|
38
|
+
this.addAbsorber(absorber);
|
|
50
39
|
});
|
|
51
40
|
}
|
|
52
41
|
particleUpdate(particle) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.AbsorberSize = void 0;
|
|
4
|
-
const AbsorberSizeLimit_1 = require("./AbsorberSizeLimit");
|
|
5
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
const AbsorberSizeLimit_1 = require("./AbsorberSizeLimit");
|
|
6
6
|
class AbsorberSize extends engine_1.ValueWithRandom {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
@@ -18,7 +18,7 @@ class AbsorberSize extends engine_1.ValueWithRandom {
|
|
|
18
18
|
if (data.density !== undefined) {
|
|
19
19
|
this.density = data.density;
|
|
20
20
|
}
|
|
21
|
-
if (
|
|
21
|
+
if ((0, engine_1.isNumber)(data.limit)) {
|
|
22
22
|
this.limit.radius = data.limit;
|
|
23
23
|
}
|
|
24
24
|
else {
|
package/cjs/index.js
CHANGED
|
@@ -13,15 +13,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
13
13
|
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
17
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
18
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
19
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
20
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
21
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
22
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
17
|
exports.loadAbsorbersPlugin = void 0;
|
|
27
18
|
const engine_1 = require("@tsparticles/engine");
|
|
@@ -35,47 +26,42 @@ class AbsorbersPlugin {
|
|
|
35
26
|
return new Absorbers_1.Absorbers(container);
|
|
36
27
|
}
|
|
37
28
|
loadOptions(options, source) {
|
|
38
|
-
var _a, _b;
|
|
39
29
|
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
40
30
|
return;
|
|
41
31
|
}
|
|
42
|
-
if (source
|
|
32
|
+
if (source?.absorbers) {
|
|
43
33
|
options.absorbers = (0, engine_1.executeOnSingleOrMultiple)(source.absorbers, (absorber) => {
|
|
44
34
|
const tmp = new Absorber_1.Absorber();
|
|
45
35
|
tmp.load(absorber);
|
|
46
36
|
return tmp;
|
|
47
37
|
});
|
|
48
38
|
}
|
|
49
|
-
options.interactivity.modes.absorbers = (0, engine_1.executeOnSingleOrMultiple)(
|
|
39
|
+
options.interactivity.modes.absorbers = (0, engine_1.executeOnSingleOrMultiple)(source?.interactivity?.modes?.absorbers, (absorber) => {
|
|
50
40
|
const tmp = new Absorber_1.Absorber();
|
|
51
41
|
tmp.load(absorber);
|
|
52
42
|
return tmp;
|
|
53
43
|
});
|
|
54
44
|
}
|
|
55
45
|
needsPlugin(options) {
|
|
56
|
-
var _a, _b, _c;
|
|
57
46
|
if (!options) {
|
|
58
47
|
return false;
|
|
59
48
|
}
|
|
60
49
|
const absorbers = options.absorbers;
|
|
61
|
-
if (
|
|
50
|
+
if ((0, engine_1.isArray)(absorbers)) {
|
|
62
51
|
return !!absorbers.length;
|
|
63
52
|
}
|
|
64
53
|
else if (absorbers) {
|
|
65
54
|
return true;
|
|
66
55
|
}
|
|
67
|
-
else if (
|
|
56
|
+
else if (options.interactivity?.events?.onClick?.mode &&
|
|
68
57
|
(0, engine_1.isInArray)("absorber", options.interactivity.events.onClick.mode)) {
|
|
69
58
|
return true;
|
|
70
59
|
}
|
|
71
60
|
return false;
|
|
72
61
|
}
|
|
73
62
|
}
|
|
74
|
-
function loadAbsorbersPlugin(engine) {
|
|
75
|
-
|
|
76
|
-
const plugin = new AbsorbersPlugin();
|
|
77
|
-
yield engine.addPlugin(plugin);
|
|
78
|
-
});
|
|
63
|
+
async function loadAbsorbersPlugin(engine, refresh = true) {
|
|
64
|
+
await engine.addPlugin(new AbsorbersPlugin(), refresh);
|
|
79
65
|
}
|
|
80
66
|
exports.loadAbsorbersPlugin = loadAbsorbersPlugin;
|
|
81
67
|
__exportStar(require("./AbsorberContainer"), exports);
|