@tsparticles/interaction-particles-attract 3.0.0-alpha.1 → 3.0.0-beta.1
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 +25 -19
- package/browser/Attractor.js +2 -3
- package/browser/index.js +3 -3
- package/browser/package.json +1 -0
- package/cjs/Attractor.js +11 -23
- package/cjs/index.js +3 -14
- package/cjs/package.json +1 -0
- package/esm/Attractor.js +2 -3
- package/esm/index.js +3 -3
- package/esm/package.json +1 -0
- package/package.json +19 -6
- package/report.html +4 -4
- package/tsparticles.interaction.particles.attract.js +5 -6
- package/tsparticles.interaction.particles.attract.min.js +1 -1
- package/tsparticles.interaction.particles.attract.min.js.LICENSE.txt +1 -8
- package/types/Attractor.d.ts +1 -2
- package/types/index.d.ts +1 -1
- package/umd/Attractor.js +1 -2
- package/umd/index.js +4 -4
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Particles Attraction Interaction
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-particles-attract)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-attract)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-attract) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for attract effect between particles.
|
|
10
10
|
|
|
@@ -26,14 +26,16 @@ loadParticlesAttractInteraction;
|
|
|
26
26
|
Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
|
|
27
27
|
|
|
28
28
|
```javascript
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
29
|
+
(async () => {
|
|
30
|
+
await loadParticlesAttractInteraction(tsParticles);
|
|
31
|
+
|
|
32
|
+
await tsParticles.load({
|
|
33
|
+
id: "tsparticles",
|
|
34
|
+
options: {
|
|
35
|
+
/* options */
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
})();
|
|
37
39
|
```
|
|
38
40
|
|
|
39
41
|
### ESM / CommonJS
|
|
@@ -41,29 +43,33 @@ tsParticles.load({
|
|
|
41
43
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
42
44
|
|
|
43
45
|
```shell
|
|
44
|
-
$ npm install tsparticles
|
|
46
|
+
$ npm install @tsparticles/interaction-particles-attract
|
|
45
47
|
```
|
|
46
48
|
|
|
47
49
|
or
|
|
48
50
|
|
|
49
51
|
```shell
|
|
50
|
-
$ yarn add tsparticles
|
|
52
|
+
$ yarn add @tsparticles/interaction-particles-attract
|
|
51
53
|
```
|
|
52
54
|
|
|
53
55
|
Then you need to import it in the app, like this:
|
|
54
56
|
|
|
55
57
|
```javascript
|
|
56
|
-
const { tsParticles } = require("tsparticles
|
|
57
|
-
const { loadParticlesAttractInteraction } = require("tsparticles
|
|
58
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
59
|
+
const { loadParticlesAttractInteraction } = require("@tsparticles/interaction-particles-attract");
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
(async () => {
|
|
62
|
+
await loadParticlesAttractInteraction(tsParticles);
|
|
63
|
+
})();
|
|
60
64
|
```
|
|
61
65
|
|
|
62
66
|
or
|
|
63
67
|
|
|
64
68
|
```javascript
|
|
65
|
-
import { tsParticles } from "tsparticles
|
|
66
|
-
import { loadParticlesAttractInteraction } from "tsparticles
|
|
69
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
70
|
+
import { loadParticlesAttractInteraction } from "@tsparticles/interaction-particles-attract";
|
|
67
71
|
|
|
68
|
-
|
|
72
|
+
(async () => {
|
|
73
|
+
await loadParticlesAttractInteraction(tsParticles);
|
|
74
|
+
})();
|
|
69
75
|
```
|
package/browser/Attractor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ParticlesInteractorBase, getDistances } from "@tsparticles/engine";
|
|
1
|
+
import { ParticlesInteractorBase, getDistances, } from "@tsparticles/engine";
|
|
2
2
|
export class Attractor extends ParticlesInteractorBase {
|
|
3
3
|
constructor(container) {
|
|
4
4
|
super(container);
|
|
@@ -8,8 +8,7 @@ export class Attractor extends ParticlesInteractorBase {
|
|
|
8
8
|
init() {
|
|
9
9
|
}
|
|
10
10
|
async interact(p1) {
|
|
11
|
-
|
|
12
|
-
const container = this.container, distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
|
|
11
|
+
const container = this.container, distance = p1.retina.attractDistance ?? container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
|
|
13
12
|
for (const p2 of query) {
|
|
14
13
|
if (p1 === p2 || !p2.options.move.attract.enable || p2.destroyed || p2.spawning) {
|
|
15
14
|
continue;
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Attractor } from "./Attractor";
|
|
2
|
-
export async function loadParticlesAttractInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("particlesAttract", (container) => new Attractor(container));
|
|
1
|
+
import { Attractor } from "./Attractor.js";
|
|
2
|
+
export async function loadParticlesAttractInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesAttract", (container) => new Attractor(container), refresh);
|
|
4
4
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/cjs/Attractor.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.Attractor = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
@@ -19,21 +10,18 @@ class Attractor extends engine_1.ParticlesInteractorBase {
|
|
|
19
10
|
}
|
|
20
11
|
init() {
|
|
21
12
|
}
|
|
22
|
-
interact(p1) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (p1 === p2 || !p2.options.move.attract.enable || p2.destroyed || p2.spawning) {
|
|
28
|
-
continue;
|
|
29
|
-
}
|
|
30
|
-
const pos2 = p2.getPosition(), { dx, dy } = (0, engine_1.getDistances)(pos1, pos2), rotate = p1.options.move.attract.rotate, ax = dx / (rotate.x * 1000), ay = dy / (rotate.y * 1000), p1Factor = p2.size.value / p1.size.value, p2Factor = 1 / p1Factor;
|
|
31
|
-
p1.velocity.x -= ax * p1Factor;
|
|
32
|
-
p1.velocity.y -= ay * p1Factor;
|
|
33
|
-
p2.velocity.x += ax * p2Factor;
|
|
34
|
-
p2.velocity.y += ay * p2Factor;
|
|
13
|
+
async interact(p1) {
|
|
14
|
+
const container = this.container, distance = p1.retina.attractDistance ?? container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
|
|
15
|
+
for (const p2 of query) {
|
|
16
|
+
if (p1 === p2 || !p2.options.move.attract.enable || p2.destroyed || p2.spawning) {
|
|
17
|
+
continue;
|
|
35
18
|
}
|
|
36
|
-
|
|
19
|
+
const pos2 = p2.getPosition(), { dx, dy } = (0, engine_1.getDistances)(pos1, pos2), rotate = p1.options.move.attract.rotate, ax = dx / (rotate.x * 1000), ay = dy / (rotate.y * 1000), p1Factor = p2.size.value / p1.size.value, p2Factor = 1 / p1Factor;
|
|
20
|
+
p1.velocity.x -= ax * p1Factor;
|
|
21
|
+
p1.velocity.y -= ay * p1Factor;
|
|
22
|
+
p2.velocity.x += ax * p2Factor;
|
|
23
|
+
p2.velocity.y += ay * p2Factor;
|
|
24
|
+
}
|
|
37
25
|
}
|
|
38
26
|
isEnabled(particle) {
|
|
39
27
|
return particle.options.move.attract.enable;
|
package/cjs/index.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
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.loadParticlesAttractInteraction = void 0;
|
|
13
|
-
const
|
|
14
|
-
function loadParticlesAttractInteraction(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addInteractor("particlesAttract", (container) => new Attractor_1.Attractor(container));
|
|
17
|
-
});
|
|
4
|
+
const Attractor_js_1 = require("./Attractor.js");
|
|
5
|
+
async function loadParticlesAttractInteraction(engine, refresh = true) {
|
|
6
|
+
await engine.addInteractor("particlesAttract", (container) => new Attractor_js_1.Attractor(container), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadParticlesAttractInteraction = loadParticlesAttractInteraction;
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
package/esm/Attractor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ParticlesInteractorBase, getDistances } from "@tsparticles/engine";
|
|
1
|
+
import { ParticlesInteractorBase, getDistances, } from "@tsparticles/engine";
|
|
2
2
|
export class Attractor extends ParticlesInteractorBase {
|
|
3
3
|
constructor(container) {
|
|
4
4
|
super(container);
|
|
@@ -8,8 +8,7 @@ export class Attractor extends ParticlesInteractorBase {
|
|
|
8
8
|
init() {
|
|
9
9
|
}
|
|
10
10
|
async interact(p1) {
|
|
11
|
-
|
|
12
|
-
const container = this.container, distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
|
|
11
|
+
const container = this.container, distance = p1.retina.attractDistance ?? container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
|
|
13
12
|
for (const p2 of query) {
|
|
14
13
|
if (p1 === p2 || !p2.options.move.attract.enable || p2.destroyed || p2.spawning) {
|
|
15
14
|
continue;
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Attractor } from "./Attractor";
|
|
2
|
-
export async function loadParticlesAttractInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("particlesAttract", (container) => new Attractor(container));
|
|
1
|
+
import { Attractor } from "./Attractor.js";
|
|
2
|
+
export async function loadParticlesAttractInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesAttract", (container) => new Attractor(container), refresh);
|
|
4
4
|
}
|
package/esm/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-particles-attract",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
4
4
|
"description": "tsParticles attract particles interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -68,15 +68,28 @@
|
|
|
68
68
|
"bugs": {
|
|
69
69
|
"url": "https://github.com/matteobruni/tsparticles/issues"
|
|
70
70
|
},
|
|
71
|
-
"
|
|
71
|
+
"sideEffects": false,
|
|
72
72
|
"jsdelivr": "tsparticles.interaction.particles.attract.min.js",
|
|
73
73
|
"unpkg": "tsparticles.interaction.particles.attract.min.js",
|
|
74
|
+
"browser": "browser/index.js",
|
|
75
|
+
"main": "cjs/index.js",
|
|
74
76
|
"module": "esm/index.js",
|
|
75
77
|
"types": "types/index.d.ts",
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
+
"exports": {
|
|
79
|
+
".": {
|
|
80
|
+
"types": "./types/index.d.ts",
|
|
81
|
+
"browser": "./browser/index.js",
|
|
82
|
+
"import": "./esm/index.js",
|
|
83
|
+
"require": "./cjs/index.js",
|
|
84
|
+
"umd": "./umd/index.js",
|
|
85
|
+
"default": "./cjs/index.js"
|
|
86
|
+
},
|
|
87
|
+
"./package.json": "./package.json"
|
|
78
88
|
},
|
|
79
89
|
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-
|
|
90
|
+
"@tsparticles/engine": "^3.0.0-beta.1"
|
|
91
|
+
},
|
|
92
|
+
"publishConfig": {
|
|
93
|
+
"access": "public"
|
|
81
94
|
}
|
|
82
|
-
}
|
|
95
|
+
}
|