@tsparticles/interaction-particles-collisions 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 +26 -21
- package/browser/Bounce.js +11 -1
- package/browser/Collider.js +3 -0
- package/browser/Destroy.js +1 -1
- package/browser/index.js +2 -2
- package/cjs/Bounce.js +10 -0
- package/cjs/Collider.js +22 -30
- package/cjs/Destroy.js +1 -1
- package/cjs/index.js +2 -13
- package/esm/Bounce.js +11 -1
- package/esm/Collider.js +3 -0
- package/esm/Destroy.js +1 -1
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.interaction.particles.collisions.js +18 -5
- package/tsparticles.interaction.particles.collisions.min.js +1 -1
- package/tsparticles.interaction.particles.collisions.min.js.LICENSE.txt +1 -8
- package/types/Absorb.d.ts +1 -1
- package/types/Bounce.d.ts +6 -2
- package/types/Collider.d.ts +1 -2
- package/types/ResolveCollision.d.ts +1 -1
- package/types/index.d.ts +1 -1
- package/umd/Bounce.js +10 -0
- package/umd/Collider.js +3 -0
- package/umd/Destroy.js +1 -1
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Particles Collisions Interaction
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-particles-collisions)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-collisions)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-collisions) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for collisions effect between particles.
|
|
10
10
|
|
|
@@ -14,8 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
The CDN/Vanilla version JS has one required file in vanilla configuration:
|
|
16
16
|
|
|
17
|
-
Including the `tsparticles.interaction.particles.collisions.min.js` file will export the function to load the
|
|
18
|
-
interaction
|
|
17
|
+
Including the `tsparticles.interaction.particles.collisions.min.js` file will export the function to load the interaction
|
|
19
18
|
plugin:
|
|
20
19
|
|
|
21
20
|
```javascript
|
|
@@ -27,14 +26,16 @@ loadParticlesCollisionsInteraction;
|
|
|
27
26
|
Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
|
|
28
27
|
|
|
29
28
|
```javascript
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
29
|
+
(async () => {
|
|
30
|
+
await loadParticlesCollisionsInteraction(tsParticles);
|
|
31
|
+
|
|
32
|
+
await tsParticles.load({
|
|
33
|
+
id: "tsparticles",
|
|
34
|
+
options: {
|
|
35
|
+
/* options */
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
})();
|
|
38
39
|
```
|
|
39
40
|
|
|
40
41
|
### ESM / CommonJS
|
|
@@ -42,29 +43,33 @@ tsParticles.load({
|
|
|
42
43
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
44
|
|
|
44
45
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
46
|
+
$ npm install @tsparticles/interaction-particles-collisions
|
|
46
47
|
```
|
|
47
48
|
|
|
48
49
|
or
|
|
49
50
|
|
|
50
51
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
52
|
+
$ yarn add @tsparticles/interaction-particles-collisions
|
|
52
53
|
```
|
|
53
54
|
|
|
54
55
|
Then you need to import it in the app, like this:
|
|
55
56
|
|
|
56
57
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadParticlesCollisionsInteraction } = require("tsparticles
|
|
58
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
59
|
+
const { loadParticlesCollisionsInteraction } = require("@tsparticles/interaction-particles-collisions");
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
(async () => {
|
|
62
|
+
await loadParticlesCollisionsInteraction(tsParticles);
|
|
63
|
+
})();
|
|
61
64
|
```
|
|
62
65
|
|
|
63
66
|
or
|
|
64
67
|
|
|
65
68
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadParticlesCollisionsInteraction } from "tsparticles
|
|
69
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
70
|
+
import { loadParticlesCollisionsInteraction } from "@tsparticles/interaction-particles-collisions";
|
|
68
71
|
|
|
69
|
-
|
|
72
|
+
(async () => {
|
|
73
|
+
await loadParticlesCollisionsInteraction(tsParticles);
|
|
74
|
+
})();
|
|
70
75
|
```
|
package/browser/Bounce.js
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
import { circleBounce, circleBounceDataFromParticle } from "@tsparticles/engine";
|
|
1
|
+
import { circleBounce, circleBounceDataFromParticle, getRangeValue } from "@tsparticles/engine";
|
|
2
|
+
const fixBounceSpeed = (p) => {
|
|
3
|
+
if (p.collisionMaxSpeed === undefined) {
|
|
4
|
+
p.collisionMaxSpeed = getRangeValue(p.options.collisions.maxSpeed);
|
|
5
|
+
}
|
|
6
|
+
if (p.velocity.length > p.collisionMaxSpeed) {
|
|
7
|
+
p.velocity.length = p.collisionMaxSpeed;
|
|
8
|
+
}
|
|
9
|
+
};
|
|
2
10
|
export function bounce(p1, p2) {
|
|
3
11
|
circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
|
|
12
|
+
fixBounceSpeed(p1);
|
|
13
|
+
fixBounceSpeed(p2);
|
|
4
14
|
}
|
package/browser/Collider.js
CHANGED
|
@@ -9,6 +9,9 @@ export class Collider extends ParticlesInteractorBase {
|
|
|
9
9
|
init() {
|
|
10
10
|
}
|
|
11
11
|
async interact(p1, delta) {
|
|
12
|
+
if (p1.destroyed || p1.spawning) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
12
15
|
const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
|
|
13
16
|
for (const p2 of query) {
|
|
14
17
|
if (p1 === p2 ||
|
package/browser/Destroy.js
CHANGED
|
@@ -10,7 +10,7 @@ export function destroy(p1, p2) {
|
|
|
10
10
|
p2.destroy();
|
|
11
11
|
}
|
|
12
12
|
else if (p1.getRadius() !== undefined && p2.getRadius() !== undefined) {
|
|
13
|
-
const deleteP = p1.getRadius() >= p2.getRadius() ?
|
|
13
|
+
const deleteP = p1.getRadius() >= p2.getRadius() ? p2 : p1;
|
|
14
14
|
deleteP.destroy();
|
|
15
15
|
}
|
|
16
16
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Collider } from "./Collider";
|
|
2
|
-
export async function loadParticlesCollisionsInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("particlesCollisions", (container) => new Collider(container));
|
|
2
|
+
export async function loadParticlesCollisionsInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesCollisions", (container) => new Collider(container), refresh);
|
|
4
4
|
}
|
package/cjs/Bounce.js
CHANGED
|
@@ -2,7 +2,17 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.bounce = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
const fixBounceSpeed = (p) => {
|
|
6
|
+
if (p.collisionMaxSpeed === undefined) {
|
|
7
|
+
p.collisionMaxSpeed = (0, engine_1.getRangeValue)(p.options.collisions.maxSpeed);
|
|
8
|
+
}
|
|
9
|
+
if (p.velocity.length > p.collisionMaxSpeed) {
|
|
10
|
+
p.velocity.length = p.collisionMaxSpeed;
|
|
11
|
+
}
|
|
12
|
+
};
|
|
5
13
|
function bounce(p1, p2) {
|
|
6
14
|
(0, engine_1.circleBounce)((0, engine_1.circleBounceDataFromParticle)(p1), (0, engine_1.circleBounceDataFromParticle)(p2));
|
|
15
|
+
fixBounceSpeed(p1);
|
|
16
|
+
fixBounceSpeed(p2);
|
|
7
17
|
}
|
|
8
18
|
exports.bounce = bounce;
|
package/cjs/Collider.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.Collider = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
@@ -20,28 +11,29 @@ class Collider extends engine_1.ParticlesInteractorBase {
|
|
|
20
11
|
}
|
|
21
12
|
init() {
|
|
22
13
|
}
|
|
23
|
-
interact(p1, delta) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) > radius1 + radius2) {
|
|
36
|
-
continue;
|
|
37
|
-
}
|
|
38
|
-
const dist = (0, engine_1.getDistance)(pos1, pos2), distP = radius1 + radius2;
|
|
39
|
-
if (dist > distP) {
|
|
40
|
-
continue;
|
|
41
|
-
}
|
|
42
|
-
(0, ResolveCollision_1.resolveCollision)(p1, p2, delta, container.retina.pixelRatio);
|
|
14
|
+
async interact(p1, delta) {
|
|
15
|
+
if (p1.destroyed || p1.spawning) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
|
|
19
|
+
for (const p2 of query) {
|
|
20
|
+
if (p1 === p2 ||
|
|
21
|
+
!p2.options.collisions.enable ||
|
|
22
|
+
p1.options.collisions.mode !== p2.options.collisions.mode ||
|
|
23
|
+
p2.destroyed ||
|
|
24
|
+
p2.spawning) {
|
|
25
|
+
continue;
|
|
43
26
|
}
|
|
44
|
-
|
|
27
|
+
const pos2 = p2.getPosition(), radius2 = p2.getRadius();
|
|
28
|
+
if (Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) > radius1 + radius2) {
|
|
29
|
+
continue;
|
|
30
|
+
}
|
|
31
|
+
const dist = (0, engine_1.getDistance)(pos1, pos2), distP = radius1 + radius2;
|
|
32
|
+
if (dist > distP) {
|
|
33
|
+
continue;
|
|
34
|
+
}
|
|
35
|
+
(0, ResolveCollision_1.resolveCollision)(p1, p2, delta, container.retina.pixelRatio);
|
|
36
|
+
}
|
|
45
37
|
}
|
|
46
38
|
isEnabled(particle) {
|
|
47
39
|
return particle.options.collisions.enable;
|
package/cjs/Destroy.js
CHANGED
|
@@ -13,7 +13,7 @@ function destroy(p1, p2) {
|
|
|
13
13
|
p2.destroy();
|
|
14
14
|
}
|
|
15
15
|
else if (p1.getRadius() !== undefined && p2.getRadius() !== undefined) {
|
|
16
|
-
const deleteP = p1.getRadius() >= p2.getRadius() ?
|
|
16
|
+
const deleteP = p1.getRadius() >= p2.getRadius() ? p2 : p1;
|
|
17
17
|
deleteP.destroy();
|
|
18
18
|
}
|
|
19
19
|
}
|
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.loadParticlesCollisionsInteraction = void 0;
|
|
13
4
|
const Collider_1 = require("./Collider");
|
|
14
|
-
function loadParticlesCollisionsInteraction(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addInteractor("particlesCollisions", (container) => new Collider_1.Collider(container));
|
|
17
|
-
});
|
|
5
|
+
async function loadParticlesCollisionsInteraction(engine, refresh = true) {
|
|
6
|
+
await engine.addInteractor("particlesCollisions", (container) => new Collider_1.Collider(container), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadParticlesCollisionsInteraction = loadParticlesCollisionsInteraction;
|
package/esm/Bounce.js
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
import { circleBounce, circleBounceDataFromParticle } from "@tsparticles/engine";
|
|
1
|
+
import { circleBounce, circleBounceDataFromParticle, getRangeValue } from "@tsparticles/engine";
|
|
2
|
+
const fixBounceSpeed = (p) => {
|
|
3
|
+
if (p.collisionMaxSpeed === undefined) {
|
|
4
|
+
p.collisionMaxSpeed = getRangeValue(p.options.collisions.maxSpeed);
|
|
5
|
+
}
|
|
6
|
+
if (p.velocity.length > p.collisionMaxSpeed) {
|
|
7
|
+
p.velocity.length = p.collisionMaxSpeed;
|
|
8
|
+
}
|
|
9
|
+
};
|
|
2
10
|
export function bounce(p1, p2) {
|
|
3
11
|
circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
|
|
12
|
+
fixBounceSpeed(p1);
|
|
13
|
+
fixBounceSpeed(p2);
|
|
4
14
|
}
|
package/esm/Collider.js
CHANGED
|
@@ -9,6 +9,9 @@ export class Collider extends ParticlesInteractorBase {
|
|
|
9
9
|
init() {
|
|
10
10
|
}
|
|
11
11
|
async interact(p1, delta) {
|
|
12
|
+
if (p1.destroyed || p1.spawning) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
12
15
|
const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
|
|
13
16
|
for (const p2 of query) {
|
|
14
17
|
if (p1 === p2 ||
|
package/esm/Destroy.js
CHANGED
|
@@ -10,7 +10,7 @@ export function destroy(p1, p2) {
|
|
|
10
10
|
p2.destroy();
|
|
11
11
|
}
|
|
12
12
|
else if (p1.getRadius() !== undefined && p2.getRadius() !== undefined) {
|
|
13
|
-
const deleteP = p1.getRadius() >= p2.getRadius() ?
|
|
13
|
+
const deleteP = p1.getRadius() >= p2.getRadius() ? p2 : p1;
|
|
14
14
|
deleteP.destroy();
|
|
15
15
|
}
|
|
16
16
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Collider } from "./Collider";
|
|
2
|
-
export async function loadParticlesCollisionsInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("particlesCollisions", (container) => new Collider(container));
|
|
2
|
+
export async function loadParticlesCollisionsInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesCollisions", (container) => new Collider(container), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-particles-collisions",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles collisions particles interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,10 +73,11 @@
|
|
|
73
73
|
"unpkg": "tsparticles.interaction.particles.collisions.min.js",
|
|
74
74
|
"module": "esm/index.js",
|
|
75
75
|
"types": "types/index.d.ts",
|
|
76
|
+
"sideEffects": false,
|
|
77
|
+
"dependencies": {
|
|
78
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
|
79
|
+
},
|
|
76
80
|
"publishConfig": {
|
|
77
81
|
"access": "public"
|
|
78
|
-
},
|
|
79
|
-
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-alpha.1"
|
|
81
82
|
}
|
|
82
|
-
}
|
|
83
|
+
}
|