@tsparticles/updater-roll 3.0.0-alpha.0 → 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 +16 -12
- package/browser/Options/Classes/Roll.js +1 -1
- package/browser/RollUpdater.js +5 -57
- package/browser/Types.js +1 -0
- package/browser/Utils.js +54 -0
- package/browser/index.js +2 -2
- package/cjs/RollUpdater.js +6 -58
- package/cjs/Types.js +2 -0
- package/cjs/Utils.js +59 -0
- package/cjs/index.js +2 -13
- package/esm/Options/Classes/Roll.js +1 -1
- package/esm/RollUpdater.js +5 -57
- package/esm/Types.js +1 -0
- package/esm/Utils.js +54 -0
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.updater.roll.js +62 -57
- package/tsparticles.updater.roll.min.js +1 -1
- package/tsparticles.updater.roll.min.js.LICENSE.txt +1 -8
- package/types/Options/Classes/Roll.d.ts +1 -2
- package/types/Options/Classes/RollLight.d.ts +1 -1
- package/types/RollUpdater.d.ts +2 -13
- package/types/Types.d.ts +12 -0
- package/types/Utils.d.ts +4 -0
- package/types/index.d.ts +1 -1
- package/umd/RollUpdater.js +7 -59
- package/umd/Types.js +12 -0
- package/umd/Utils.js +69 -0
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Roll Updater
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/updater-roll)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-roll)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-roll) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for roll animations.
|
|
10
10
|
|
|
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
26
26
|
|
|
27
27
|
```javascript
|
|
28
28
|
(async () => {
|
|
29
|
-
await loadRollUpdater();
|
|
29
|
+
await loadRollUpdater(tsParticles);
|
|
30
30
|
|
|
31
31
|
await tsParticles.load({
|
|
32
32
|
id: "tsparticles",
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
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/updater-roll
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/updater-roll
|
|
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 { loadRollUpdater } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadRollUpdater } = require("@tsparticles/updater-roll");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadRollUpdater(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadRollUpdater } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadRollUpdater } from "@tsparticles/updater-roll";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadRollUpdater(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
package/browser/RollUpdater.js
CHANGED
|
@@ -1,78 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { initParticle, updateRoll } from "./Utils";
|
|
2
2
|
import { Roll } from "./Options/Classes/Roll";
|
|
3
|
-
function updateRoll(particle, delta) {
|
|
4
|
-
const roll = particle.options.roll;
|
|
5
|
-
if (!particle.roll || !(roll === null || roll === void 0 ? void 0 : roll.enable)) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
const speed = particle.roll.speed * delta.factor, max = 2 * Math.PI;
|
|
9
|
-
particle.roll.angle += speed;
|
|
10
|
-
if (particle.roll.angle > max) {
|
|
11
|
-
particle.roll.angle -= max;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
3
|
export class RollUpdater {
|
|
15
4
|
getTransformValues(particle) {
|
|
16
|
-
|
|
17
|
-
const roll = ((_a = particle.roll) === null || _a === void 0 ? void 0 : _a.enable) && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
5
|
+
const roll = particle.roll?.enable && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
18
6
|
return {
|
|
19
7
|
a: rollHorizontal ? Math.cos(roll.angle) : undefined,
|
|
20
8
|
d: rollVertical ? Math.sin(roll.angle) : undefined,
|
|
21
9
|
};
|
|
22
10
|
}
|
|
23
11
|
init(particle) {
|
|
24
|
-
|
|
25
|
-
if (rollOpt === null || rollOpt === void 0 ? void 0 : rollOpt.enable) {
|
|
26
|
-
particle.roll = {
|
|
27
|
-
enable: rollOpt.enable,
|
|
28
|
-
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
29
|
-
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
30
|
-
angle: getRandom() * Math.PI * 2,
|
|
31
|
-
speed: getRangeValue(rollOpt.speed) / 360,
|
|
32
|
-
};
|
|
33
|
-
if (rollOpt.backColor) {
|
|
34
|
-
particle.backColor = rangeColorToHsl(rollOpt.backColor);
|
|
35
|
-
}
|
|
36
|
-
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
37
|
-
const alterType = getRandom() >= 0.5 ? "darken" : "enlighten";
|
|
38
|
-
particle.roll.alter = {
|
|
39
|
-
type: alterType,
|
|
40
|
-
value: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
else if (rollOpt.darken.enable) {
|
|
44
|
-
particle.roll.alter = {
|
|
45
|
-
type: "darken",
|
|
46
|
-
value: getRangeValue(rollOpt.darken.value),
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
else if (rollOpt.enlighten.enable) {
|
|
50
|
-
particle.roll.alter = {
|
|
51
|
-
type: "enlighten",
|
|
52
|
-
value: getRangeValue(rollOpt.enlighten.value),
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
particle.roll = {
|
|
58
|
-
enable: false,
|
|
59
|
-
horizontal: false,
|
|
60
|
-
vertical: false,
|
|
61
|
-
angle: 0,
|
|
62
|
-
speed: 0,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
12
|
+
initParticle(particle);
|
|
65
13
|
}
|
|
66
14
|
isEnabled(particle) {
|
|
67
15
|
const roll = particle.options.roll;
|
|
68
|
-
return !particle.destroyed && !particle.spawning && !!
|
|
16
|
+
return !particle.destroyed && !particle.spawning && !!roll?.enable;
|
|
69
17
|
}
|
|
70
18
|
loadOptions(options, ...sources) {
|
|
71
19
|
if (!options.roll) {
|
|
72
20
|
options.roll = new Roll();
|
|
73
21
|
}
|
|
74
22
|
for (const source of sources) {
|
|
75
|
-
options.roll.load(source
|
|
23
|
+
options.roll.load(source?.roll);
|
|
76
24
|
}
|
|
77
25
|
}
|
|
78
26
|
update(particle, delta) {
|
package/browser/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/browser/Utils.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { getRandom, getRangeValue, rangeColorToHsl } from "@tsparticles/engine";
|
|
2
|
+
export function initParticle(particle) {
|
|
3
|
+
const rollOpt = particle.options.roll;
|
|
4
|
+
if (!rollOpt?.enable) {
|
|
5
|
+
particle.roll = {
|
|
6
|
+
enable: false,
|
|
7
|
+
horizontal: false,
|
|
8
|
+
vertical: false,
|
|
9
|
+
angle: 0,
|
|
10
|
+
speed: 0,
|
|
11
|
+
};
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
particle.roll = {
|
|
15
|
+
enable: rollOpt.enable,
|
|
16
|
+
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
17
|
+
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
18
|
+
angle: getRandom() * Math.PI * 2,
|
|
19
|
+
speed: getRangeValue(rollOpt.speed) / 360,
|
|
20
|
+
};
|
|
21
|
+
if (rollOpt.backColor) {
|
|
22
|
+
particle.backColor = rangeColorToHsl(rollOpt.backColor);
|
|
23
|
+
}
|
|
24
|
+
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
25
|
+
const alterType = getRandom() >= 0.5 ? "darken" : "enlighten";
|
|
26
|
+
particle.roll.alter = {
|
|
27
|
+
type: alterType,
|
|
28
|
+
value: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
else if (rollOpt.darken.enable) {
|
|
32
|
+
particle.roll.alter = {
|
|
33
|
+
type: "darken",
|
|
34
|
+
value: getRangeValue(rollOpt.darken.value),
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
else if (rollOpt.enlighten.enable) {
|
|
38
|
+
particle.roll.alter = {
|
|
39
|
+
type: "enlighten",
|
|
40
|
+
value: getRangeValue(rollOpt.enlighten.value),
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
export function updateRoll(particle, delta) {
|
|
45
|
+
const roll = particle.options.roll, data = particle.roll;
|
|
46
|
+
if (!data || !roll?.enable) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const speed = data.speed * delta.factor, max = 2 * Math.PI;
|
|
50
|
+
data.angle += speed;
|
|
51
|
+
if (data.angle > max) {
|
|
52
|
+
data.angle -= max;
|
|
53
|
+
}
|
|
54
|
+
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { RollUpdater } from "./RollUpdater";
|
|
2
|
-
export async function loadRollUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("roll", () => new RollUpdater());
|
|
2
|
+
export async function loadRollUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("roll", () => new RollUpdater(), refresh);
|
|
4
4
|
}
|
package/cjs/RollUpdater.js
CHANGED
|
@@ -1,88 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.RollUpdater = void 0;
|
|
4
|
-
const
|
|
4
|
+
const Utils_1 = require("./Utils");
|
|
5
5
|
const Roll_1 = require("./Options/Classes/Roll");
|
|
6
|
-
function updateRoll(particle, delta) {
|
|
7
|
-
const roll = particle.options.roll;
|
|
8
|
-
if (!particle.roll || !(roll === null || roll === void 0 ? void 0 : roll.enable)) {
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
const speed = particle.roll.speed * delta.factor, max = 2 * Math.PI;
|
|
12
|
-
particle.roll.angle += speed;
|
|
13
|
-
if (particle.roll.angle > max) {
|
|
14
|
-
particle.roll.angle -= max;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
6
|
class RollUpdater {
|
|
18
7
|
getTransformValues(particle) {
|
|
19
|
-
|
|
20
|
-
const roll = ((_a = particle.roll) === null || _a === void 0 ? void 0 : _a.enable) && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
8
|
+
const roll = particle.roll?.enable && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
21
9
|
return {
|
|
22
10
|
a: rollHorizontal ? Math.cos(roll.angle) : undefined,
|
|
23
11
|
d: rollVertical ? Math.sin(roll.angle) : undefined,
|
|
24
12
|
};
|
|
25
13
|
}
|
|
26
14
|
init(particle) {
|
|
27
|
-
|
|
28
|
-
if (rollOpt === null || rollOpt === void 0 ? void 0 : rollOpt.enable) {
|
|
29
|
-
particle.roll = {
|
|
30
|
-
enable: rollOpt.enable,
|
|
31
|
-
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
32
|
-
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
33
|
-
angle: (0, engine_1.getRandom)() * Math.PI * 2,
|
|
34
|
-
speed: (0, engine_1.getRangeValue)(rollOpt.speed) / 360,
|
|
35
|
-
};
|
|
36
|
-
if (rollOpt.backColor) {
|
|
37
|
-
particle.backColor = (0, engine_1.rangeColorToHsl)(rollOpt.backColor);
|
|
38
|
-
}
|
|
39
|
-
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
40
|
-
const alterType = (0, engine_1.getRandom)() >= 0.5 ? "darken" : "enlighten";
|
|
41
|
-
particle.roll.alter = {
|
|
42
|
-
type: alterType,
|
|
43
|
-
value: (0, engine_1.getRangeValue)(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
else if (rollOpt.darken.enable) {
|
|
47
|
-
particle.roll.alter = {
|
|
48
|
-
type: "darken",
|
|
49
|
-
value: (0, engine_1.getRangeValue)(rollOpt.darken.value),
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
else if (rollOpt.enlighten.enable) {
|
|
53
|
-
particle.roll.alter = {
|
|
54
|
-
type: "enlighten",
|
|
55
|
-
value: (0, engine_1.getRangeValue)(rollOpt.enlighten.value),
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
particle.roll = {
|
|
61
|
-
enable: false,
|
|
62
|
-
horizontal: false,
|
|
63
|
-
vertical: false,
|
|
64
|
-
angle: 0,
|
|
65
|
-
speed: 0,
|
|
66
|
-
};
|
|
67
|
-
}
|
|
15
|
+
(0, Utils_1.initParticle)(particle);
|
|
68
16
|
}
|
|
69
17
|
isEnabled(particle) {
|
|
70
18
|
const roll = particle.options.roll;
|
|
71
|
-
return !particle.destroyed && !particle.spawning && !!
|
|
19
|
+
return !particle.destroyed && !particle.spawning && !!roll?.enable;
|
|
72
20
|
}
|
|
73
21
|
loadOptions(options, ...sources) {
|
|
74
22
|
if (!options.roll) {
|
|
75
23
|
options.roll = new Roll_1.Roll();
|
|
76
24
|
}
|
|
77
25
|
for (const source of sources) {
|
|
78
|
-
options.roll.load(source
|
|
26
|
+
options.roll.load(source?.roll);
|
|
79
27
|
}
|
|
80
28
|
}
|
|
81
29
|
update(particle, delta) {
|
|
82
30
|
if (!this.isEnabled(particle)) {
|
|
83
31
|
return;
|
|
84
32
|
}
|
|
85
|
-
updateRoll(particle, delta);
|
|
33
|
+
(0, Utils_1.updateRoll)(particle, delta);
|
|
86
34
|
}
|
|
87
35
|
}
|
|
88
36
|
exports.RollUpdater = RollUpdater;
|
package/cjs/Types.js
ADDED
package/cjs/Utils.js
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.updateRoll = exports.initParticle = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
function initParticle(particle) {
|
|
6
|
+
const rollOpt = particle.options.roll;
|
|
7
|
+
if (!rollOpt?.enable) {
|
|
8
|
+
particle.roll = {
|
|
9
|
+
enable: false,
|
|
10
|
+
horizontal: false,
|
|
11
|
+
vertical: false,
|
|
12
|
+
angle: 0,
|
|
13
|
+
speed: 0,
|
|
14
|
+
};
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
particle.roll = {
|
|
18
|
+
enable: rollOpt.enable,
|
|
19
|
+
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
20
|
+
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
21
|
+
angle: (0, engine_1.getRandom)() * Math.PI * 2,
|
|
22
|
+
speed: (0, engine_1.getRangeValue)(rollOpt.speed) / 360,
|
|
23
|
+
};
|
|
24
|
+
if (rollOpt.backColor) {
|
|
25
|
+
particle.backColor = (0, engine_1.rangeColorToHsl)(rollOpt.backColor);
|
|
26
|
+
}
|
|
27
|
+
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
28
|
+
const alterType = (0, engine_1.getRandom)() >= 0.5 ? "darken" : "enlighten";
|
|
29
|
+
particle.roll.alter = {
|
|
30
|
+
type: alterType,
|
|
31
|
+
value: (0, engine_1.getRangeValue)(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
else if (rollOpt.darken.enable) {
|
|
35
|
+
particle.roll.alter = {
|
|
36
|
+
type: "darken",
|
|
37
|
+
value: (0, engine_1.getRangeValue)(rollOpt.darken.value),
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
else if (rollOpt.enlighten.enable) {
|
|
41
|
+
particle.roll.alter = {
|
|
42
|
+
type: "enlighten",
|
|
43
|
+
value: (0, engine_1.getRangeValue)(rollOpt.enlighten.value),
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
exports.initParticle = initParticle;
|
|
48
|
+
function updateRoll(particle, delta) {
|
|
49
|
+
const roll = particle.options.roll, data = particle.roll;
|
|
50
|
+
if (!data || !roll?.enable) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const speed = data.speed * delta.factor, max = 2 * Math.PI;
|
|
54
|
+
data.angle += speed;
|
|
55
|
+
if (data.angle > max) {
|
|
56
|
+
data.angle -= max;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
exports.updateRoll = updateRoll;
|
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.loadRollUpdater = void 0;
|
|
13
4
|
const RollUpdater_1 = require("./RollUpdater");
|
|
14
|
-
function loadRollUpdater(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addParticleUpdater("roll", () => new RollUpdater_1.RollUpdater());
|
|
17
|
-
});
|
|
5
|
+
async function loadRollUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("roll", () => new RollUpdater_1.RollUpdater(), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadRollUpdater = loadRollUpdater;
|
package/esm/RollUpdater.js
CHANGED
|
@@ -1,78 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { initParticle, updateRoll } from "./Utils";
|
|
2
2
|
import { Roll } from "./Options/Classes/Roll";
|
|
3
|
-
function updateRoll(particle, delta) {
|
|
4
|
-
const roll = particle.options.roll;
|
|
5
|
-
if (!particle.roll || !(roll === null || roll === void 0 ? void 0 : roll.enable)) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
const speed = particle.roll.speed * delta.factor, max = 2 * Math.PI;
|
|
9
|
-
particle.roll.angle += speed;
|
|
10
|
-
if (particle.roll.angle > max) {
|
|
11
|
-
particle.roll.angle -= max;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
3
|
export class RollUpdater {
|
|
15
4
|
getTransformValues(particle) {
|
|
16
|
-
|
|
17
|
-
const roll = ((_a = particle.roll) === null || _a === void 0 ? void 0 : _a.enable) && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
5
|
+
const roll = particle.roll?.enable && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
|
|
18
6
|
return {
|
|
19
7
|
a: rollHorizontal ? Math.cos(roll.angle) : undefined,
|
|
20
8
|
d: rollVertical ? Math.sin(roll.angle) : undefined,
|
|
21
9
|
};
|
|
22
10
|
}
|
|
23
11
|
init(particle) {
|
|
24
|
-
|
|
25
|
-
if (rollOpt === null || rollOpt === void 0 ? void 0 : rollOpt.enable) {
|
|
26
|
-
particle.roll = {
|
|
27
|
-
enable: rollOpt.enable,
|
|
28
|
-
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
29
|
-
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
30
|
-
angle: getRandom() * Math.PI * 2,
|
|
31
|
-
speed: getRangeValue(rollOpt.speed) / 360,
|
|
32
|
-
};
|
|
33
|
-
if (rollOpt.backColor) {
|
|
34
|
-
particle.backColor = rangeColorToHsl(rollOpt.backColor);
|
|
35
|
-
}
|
|
36
|
-
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
37
|
-
const alterType = getRandom() >= 0.5 ? "darken" : "enlighten";
|
|
38
|
-
particle.roll.alter = {
|
|
39
|
-
type: alterType,
|
|
40
|
-
value: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
else if (rollOpt.darken.enable) {
|
|
44
|
-
particle.roll.alter = {
|
|
45
|
-
type: "darken",
|
|
46
|
-
value: getRangeValue(rollOpt.darken.value),
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
else if (rollOpt.enlighten.enable) {
|
|
50
|
-
particle.roll.alter = {
|
|
51
|
-
type: "enlighten",
|
|
52
|
-
value: getRangeValue(rollOpt.enlighten.value),
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
particle.roll = {
|
|
58
|
-
enable: false,
|
|
59
|
-
horizontal: false,
|
|
60
|
-
vertical: false,
|
|
61
|
-
angle: 0,
|
|
62
|
-
speed: 0,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
12
|
+
initParticle(particle);
|
|
65
13
|
}
|
|
66
14
|
isEnabled(particle) {
|
|
67
15
|
const roll = particle.options.roll;
|
|
68
|
-
return !particle.destroyed && !particle.spawning && !!
|
|
16
|
+
return !particle.destroyed && !particle.spawning && !!roll?.enable;
|
|
69
17
|
}
|
|
70
18
|
loadOptions(options, ...sources) {
|
|
71
19
|
if (!options.roll) {
|
|
72
20
|
options.roll = new Roll();
|
|
73
21
|
}
|
|
74
22
|
for (const source of sources) {
|
|
75
|
-
options.roll.load(source
|
|
23
|
+
options.roll.load(source?.roll);
|
|
76
24
|
}
|
|
77
25
|
}
|
|
78
26
|
update(particle, delta) {
|
package/esm/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/Utils.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { getRandom, getRangeValue, rangeColorToHsl } from "@tsparticles/engine";
|
|
2
|
+
export function initParticle(particle) {
|
|
3
|
+
const rollOpt = particle.options.roll;
|
|
4
|
+
if (!rollOpt?.enable) {
|
|
5
|
+
particle.roll = {
|
|
6
|
+
enable: false,
|
|
7
|
+
horizontal: false,
|
|
8
|
+
vertical: false,
|
|
9
|
+
angle: 0,
|
|
10
|
+
speed: 0,
|
|
11
|
+
};
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
particle.roll = {
|
|
15
|
+
enable: rollOpt.enable,
|
|
16
|
+
horizontal: rollOpt.mode === "horizontal" || rollOpt.mode === "both",
|
|
17
|
+
vertical: rollOpt.mode === "vertical" || rollOpt.mode === "both",
|
|
18
|
+
angle: getRandom() * Math.PI * 2,
|
|
19
|
+
speed: getRangeValue(rollOpt.speed) / 360,
|
|
20
|
+
};
|
|
21
|
+
if (rollOpt.backColor) {
|
|
22
|
+
particle.backColor = rangeColorToHsl(rollOpt.backColor);
|
|
23
|
+
}
|
|
24
|
+
else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
|
|
25
|
+
const alterType = getRandom() >= 0.5 ? "darken" : "enlighten";
|
|
26
|
+
particle.roll.alter = {
|
|
27
|
+
type: alterType,
|
|
28
|
+
value: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
else if (rollOpt.darken.enable) {
|
|
32
|
+
particle.roll.alter = {
|
|
33
|
+
type: "darken",
|
|
34
|
+
value: getRangeValue(rollOpt.darken.value),
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
else if (rollOpt.enlighten.enable) {
|
|
38
|
+
particle.roll.alter = {
|
|
39
|
+
type: "enlighten",
|
|
40
|
+
value: getRangeValue(rollOpt.enlighten.value),
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
export function updateRoll(particle, delta) {
|
|
45
|
+
const roll = particle.options.roll, data = particle.roll;
|
|
46
|
+
if (!data || !roll?.enable) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const speed = data.speed * delta.factor, max = 2 * Math.PI;
|
|
50
|
+
data.angle += speed;
|
|
51
|
+
if (data.angle > max) {
|
|
52
|
+
data.angle -= max;
|
|
53
|
+
}
|
|
54
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { RollUpdater } from "./RollUpdater";
|
|
2
|
-
export async function loadRollUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("roll", () => new RollUpdater());
|
|
2
|
+
export async function loadRollUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("roll", () => new RollUpdater(), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/updater-roll",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles particles roll updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,10 +73,11 @@
|
|
|
73
73
|
"unpkg": "tsparticles.updater.roll.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.0"
|
|
81
82
|
}
|
|
82
|
-
}
|
|
83
|
+
}
|