@nightshadeui/particle-system 2.15.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/dist/ParticleSystemController.d.ts +59 -0
- package/dist/ParticleSystemController.d.ts.map +1 -0
- package/dist/components/ParticleSystem.vue.d.ts +47 -0
- package/dist/components/ParticleSystem.vue.d.ts.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/particle-system.css +1 -0
- package/dist/particle-system.mjs +400 -0
- package/dist/particles.d.ts +31 -0
- package/dist/particles.d.ts.map +1 -0
- package/dist/types.d.ts +51 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +31 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Event } from 'nanoevent';
|
|
2
|
+
import { ParticleState, ParticleSystemConfig } from './types.js';
|
|
3
|
+
export declare class ParticleSystemController {
|
|
4
|
+
started: Event<void>;
|
|
5
|
+
paused: Event<void>;
|
|
6
|
+
resumed: Event<void>;
|
|
7
|
+
finished: Event<void>;
|
|
8
|
+
particles: import('vue').Reactive<ParticleState[]>;
|
|
9
|
+
config: {
|
|
10
|
+
seed: number;
|
|
11
|
+
isPaused: boolean;
|
|
12
|
+
startCount: number;
|
|
13
|
+
rateOverTime: number;
|
|
14
|
+
lifetime: import('./types.js').NumberValue;
|
|
15
|
+
shape: import('./types.js').Vector2Value;
|
|
16
|
+
size: import('./types.js').NumberValue;
|
|
17
|
+
sizeOverTime: import('./types.js').NumberValue;
|
|
18
|
+
scale: import('./types.js').Vector2Value;
|
|
19
|
+
scaleOverTime: import('./types.js').Vector2Value;
|
|
20
|
+
opacity: import('./types.js').NumberValue;
|
|
21
|
+
opacityOverTime: import('./types.js').NumberValue;
|
|
22
|
+
linearVelocity: import('./types.js').Vector2Value;
|
|
23
|
+
linearAcceleration: import('./types.js').Vector2Value;
|
|
24
|
+
radialVelocity: import('./types.js').NumberValue;
|
|
25
|
+
radialAcceleration: import('./types.js').NumberValue;
|
|
26
|
+
rotation: import('./types.js').NumberValue;
|
|
27
|
+
rotationOverTime: import('./types.js').NumberValue;
|
|
28
|
+
turbulence: import('./types.js').NumberValue;
|
|
29
|
+
noiseScale: import('./types.js').NumberValue;
|
|
30
|
+
};
|
|
31
|
+
private index;
|
|
32
|
+
private spawnAccumulator;
|
|
33
|
+
private random;
|
|
34
|
+
private noise;
|
|
35
|
+
private lastTime;
|
|
36
|
+
private frame;
|
|
37
|
+
private mounted;
|
|
38
|
+
private state;
|
|
39
|
+
constructor(config?: ParticleSystemConfig);
|
|
40
|
+
get isDrained(): boolean;
|
|
41
|
+
get isRunning(): boolean;
|
|
42
|
+
get isPaused(): boolean;
|
|
43
|
+
setConfig(config?: ParticleSystemConfig): void;
|
|
44
|
+
mount(): void;
|
|
45
|
+
unmount(): void;
|
|
46
|
+
reset(isPaused?: boolean): void;
|
|
47
|
+
pause(): void;
|
|
48
|
+
resume(): void;
|
|
49
|
+
stop(): void;
|
|
50
|
+
finish(): void;
|
|
51
|
+
tick(time?: number): void;
|
|
52
|
+
private startFrame;
|
|
53
|
+
private spawnOverTime;
|
|
54
|
+
private spawn;
|
|
55
|
+
private nextIndex;
|
|
56
|
+
private step;
|
|
57
|
+
private finishIfDrained;
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=ParticleSystemController.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleSystemController.d.ts","sourceRoot":"","sources":["../src/ParticleSystemController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAUlC,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAItE,qBAAa,wBAAwB;IAEjC,OAAO,cAAqB;IAC5B,MAAM,cAAqB;IAC3B,OAAO,cAAqB;IAC5B,QAAQ,cAAqB;IAE7B,SAAS,0CAAiC;IAC1C,MAAM;;;;;;;;;;;;;;;;;;;;;MAA2B;IAEjC,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAEV;gBAES,MAAM,GAAE,oBAAyB;IAI7C,IAAI,SAAS,YAEZ;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,QAAQ,YAEX;IAED,SAAS,CAAC,MAAM,GAAE,oBAAyB;IAS3C,KAAK;IAKL,OAAO;IAKP,KAAK,CAAC,QAAQ,UAAgB;IAc9B,KAAK;IAQL,MAAM;IAUN,IAAI;IAIJ,MAAM;IASN,IAAI,CAAC,IAAI,SAAoB;IAY7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,eAAe;CAM1B"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
controller: {
|
|
3
|
+
type: ObjectConstructor;
|
|
4
|
+
};
|
|
5
|
+
config: {
|
|
6
|
+
type: ObjectConstructor;
|
|
7
|
+
};
|
|
8
|
+
}>, {}, {
|
|
9
|
+
localController: null;
|
|
10
|
+
eventCleanups: never[];
|
|
11
|
+
}, {
|
|
12
|
+
particleController(): Record<string, any> | null;
|
|
13
|
+
isRunning(): any;
|
|
14
|
+
isPaused(): any;
|
|
15
|
+
}, {
|
|
16
|
+
mountController(controller: any): void;
|
|
17
|
+
unmountController(): void;
|
|
18
|
+
reset(): void;
|
|
19
|
+
pause(): void;
|
|
20
|
+
resume(): void;
|
|
21
|
+
stop(): void;
|
|
22
|
+
getParticleStyle(particle: any): {
|
|
23
|
+
position: string;
|
|
24
|
+
top: number;
|
|
25
|
+
left: number;
|
|
26
|
+
width: string;
|
|
27
|
+
height: string;
|
|
28
|
+
opacity: any;
|
|
29
|
+
transform: string;
|
|
30
|
+
'transform-origin': string;
|
|
31
|
+
'will-change': string;
|
|
32
|
+
};
|
|
33
|
+
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("started" | "paused" | "resumed" | "finished")[], "started" | "paused" | "resumed" | "finished", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
34
|
+
controller: {
|
|
35
|
+
type: ObjectConstructor;
|
|
36
|
+
};
|
|
37
|
+
config: {
|
|
38
|
+
type: ObjectConstructor;
|
|
39
|
+
};
|
|
40
|
+
}>> & Readonly<{
|
|
41
|
+
onStarted?: ((...args: any[]) => any) | undefined;
|
|
42
|
+
onPaused?: ((...args: any[]) => any) | undefined;
|
|
43
|
+
onResumed?: ((...args: any[]) => any) | undefined;
|
|
44
|
+
onFinished?: ((...args: any[]) => any) | undefined;
|
|
45
|
+
}>, {}, {}, {}, {}, "isPaused" | "reset" | "pause" | "resume" | "stop" | "isRunning", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
46
|
+
export default _default;
|
|
47
|
+
//# sourceMappingURL=ParticleSystem.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleSystem.vue.d.ts","sourceRoot":"","sources":["../../src/components/ParticleSystem.vue"],"names":[],"mappings":"AAWA;"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAE7D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAE3B,OAAO,EACH,cAAc,GACjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer nightshade-components{.ParticleSystem[data-v-47a4e782]{position:relative}}
|
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
import { reactive as E, openBlock as N, createElementBlock as j, Fragment as H, renderList as J, renderSlot as K, normalizeStyle as W } from "vue";
|
|
2
|
+
class O {
|
|
3
|
+
constructor() {
|
|
4
|
+
this._groups = /* @__PURE__ */ new Map();
|
|
5
|
+
}
|
|
6
|
+
on(e, s = /* @__PURE__ */ Symbol()) {
|
|
7
|
+
let i = this._groups.get(s);
|
|
8
|
+
return i || (i = /* @__PURE__ */ new Set(), this._groups.set(s, i)), i.add(e), () => this.remove(e, s);
|
|
9
|
+
}
|
|
10
|
+
once(e, s = /* @__PURE__ */ Symbol()) {
|
|
11
|
+
const i = (n) => {
|
|
12
|
+
e(n), this.remove(i, s);
|
|
13
|
+
};
|
|
14
|
+
return this.on(i, s);
|
|
15
|
+
}
|
|
16
|
+
remove(e, s) {
|
|
17
|
+
const i = this._groups.get(s);
|
|
18
|
+
i && (i.delete(e), i.size === 0 && this._groups.delete(s));
|
|
19
|
+
}
|
|
20
|
+
removeAll(e) {
|
|
21
|
+
this._groups.delete(e);
|
|
22
|
+
}
|
|
23
|
+
emit(e) {
|
|
24
|
+
for (const s of this._groups.values())
|
|
25
|
+
for (const i of s)
|
|
26
|
+
i(e);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function c(t, e) {
|
|
30
|
+
return [t, e];
|
|
31
|
+
}
|
|
32
|
+
function X(t) {
|
|
33
|
+
return Math.hypot(t[0], t[1]);
|
|
34
|
+
}
|
|
35
|
+
function Z(t) {
|
|
36
|
+
const e = X(t);
|
|
37
|
+
return e === 0 ? c(0, 0) : c(t[0] / e, t[1] / e);
|
|
38
|
+
}
|
|
39
|
+
function q(t, e) {
|
|
40
|
+
return c(t[0] + e[0], t[1] + e[1]);
|
|
41
|
+
}
|
|
42
|
+
function U(t, e) {
|
|
43
|
+
return c(t[0] * e, t[1] * e);
|
|
44
|
+
}
|
|
45
|
+
const B = /* @__PURE__ */ Math.sqrt(3), tt = 0.5 * (B - 1), A = (3 - B) / 6, k = (t) => Math.floor(t) | 0, G = /* @__PURE__ */ new Float64Array([
|
|
46
|
+
1,
|
|
47
|
+
1,
|
|
48
|
+
-1,
|
|
49
|
+
1,
|
|
50
|
+
1,
|
|
51
|
+
-1,
|
|
52
|
+
-1,
|
|
53
|
+
-1,
|
|
54
|
+
1,
|
|
55
|
+
0,
|
|
56
|
+
-1,
|
|
57
|
+
0,
|
|
58
|
+
1,
|
|
59
|
+
0,
|
|
60
|
+
-1,
|
|
61
|
+
0,
|
|
62
|
+
0,
|
|
63
|
+
1,
|
|
64
|
+
0,
|
|
65
|
+
-1,
|
|
66
|
+
0,
|
|
67
|
+
1,
|
|
68
|
+
0,
|
|
69
|
+
-1
|
|
70
|
+
]);
|
|
71
|
+
function et(t = Math.random) {
|
|
72
|
+
const e = st(t), s = new Float64Array(e).map((n) => G[n % 12 * 2]), i = new Float64Array(e).map((n) => G[n % 12 * 2 + 1]);
|
|
73
|
+
return function(r, o) {
|
|
74
|
+
let m = 0, f = 0, d = 0;
|
|
75
|
+
const P = (r + o) * tt, _ = k(r + P), S = k(o + P), R = (_ + S) * A, Q = _ - R, Y = S - R, h = r - Q, u = o - Y;
|
|
76
|
+
let w, x;
|
|
77
|
+
h > u ? (w = 1, x = 0) : (w = 0, x = 1);
|
|
78
|
+
const M = h - w + A, b = u - x + A, z = h - 1 + 2 * A, F = u - 1 + 2 * A, V = _ & 255, $ = S & 255;
|
|
79
|
+
let p = 0.5 - h * h - u * u;
|
|
80
|
+
if (p >= 0) {
|
|
81
|
+
const l = V + e[$], v = s[l], C = i[l];
|
|
82
|
+
p *= p, m = p * p * (v * h + C * u);
|
|
83
|
+
}
|
|
84
|
+
let y = 0.5 - M * M - b * b;
|
|
85
|
+
if (y >= 0) {
|
|
86
|
+
const l = V + w + e[$ + x], v = s[l], C = i[l];
|
|
87
|
+
y *= y, f = y * y * (v * M + C * b);
|
|
88
|
+
}
|
|
89
|
+
let g = 0.5 - z * z - F * F;
|
|
90
|
+
if (g >= 0) {
|
|
91
|
+
const l = V + 1 + e[$ + 1], v = s[l], C = i[l];
|
|
92
|
+
g *= g, d = g * g * (v * z + C * F);
|
|
93
|
+
}
|
|
94
|
+
return 70 * (m + f + d);
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
function st(t) {
|
|
98
|
+
const s = new Uint8Array(512);
|
|
99
|
+
for (let i = 0; i < 512 / 2; i++)
|
|
100
|
+
s[i] = i;
|
|
101
|
+
for (let i = 0; i < 512 / 2 - 1; i++) {
|
|
102
|
+
const n = i + ~~(t() * (256 - i)), r = s[i];
|
|
103
|
+
s[i] = s[n], s[n] = r;
|
|
104
|
+
}
|
|
105
|
+
for (let i = 256; i < 512; i++)
|
|
106
|
+
s[i] = s[i - 256];
|
|
107
|
+
return s;
|
|
108
|
+
}
|
|
109
|
+
const it = {
|
|
110
|
+
seed: 1,
|
|
111
|
+
isPaused: !1,
|
|
112
|
+
startCount: 24,
|
|
113
|
+
rateOverTime: 0,
|
|
114
|
+
lifetime: 1,
|
|
115
|
+
shape: [0, 0],
|
|
116
|
+
size: 16,
|
|
117
|
+
sizeOverTime: 0,
|
|
118
|
+
scale: [1, 1],
|
|
119
|
+
scaleOverTime: [0, 0],
|
|
120
|
+
opacity: 1,
|
|
121
|
+
opacityOverTime: 0,
|
|
122
|
+
linearVelocity: [0, 0],
|
|
123
|
+
linearAcceleration: [0, 0],
|
|
124
|
+
radialVelocity: 0,
|
|
125
|
+
radialAcceleration: 0,
|
|
126
|
+
rotation: 0,
|
|
127
|
+
rotationOverTime: 0,
|
|
128
|
+
turbulence: 0,
|
|
129
|
+
noiseScale: 0.01
|
|
130
|
+
};
|
|
131
|
+
function L(t = {}) {
|
|
132
|
+
return {
|
|
133
|
+
...it,
|
|
134
|
+
...t
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
function I(t) {
|
|
138
|
+
let e = t >>> 0;
|
|
139
|
+
return () => {
|
|
140
|
+
e += 1831565813;
|
|
141
|
+
let s = e;
|
|
142
|
+
return s = Math.imul(s ^ s >>> 15, s | 1), s ^= s + Math.imul(s ^ s >>> 7, s | 61), ((s ^ s >>> 14) >>> 0) / 4294967296;
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
function nt(t, e, s) {
|
|
146
|
+
const i = T(e.shape, s), n = s() * Math.PI * 2, r = Math.sqrt(s()), o = c(
|
|
147
|
+
Math.cos(n) * r * i[0],
|
|
148
|
+
Math.sin(n) * r * i[1]
|
|
149
|
+
), m = X(o) === 0 ? c(Math.cos(n), Math.sin(n)) : Z(o), f = T(e.linearVelocity, s), d = a(e.radialVelocity, s), P = U(m, d);
|
|
150
|
+
return {
|
|
151
|
+
index: t,
|
|
152
|
+
age: 0,
|
|
153
|
+
lifetime: Math.max(1e-3, a(e.lifetime, s)),
|
|
154
|
+
position: o,
|
|
155
|
+
velocity: f,
|
|
156
|
+
effectiveVelocity: q(f, P),
|
|
157
|
+
radialDirection: m,
|
|
158
|
+
size: a(e.size, s),
|
|
159
|
+
sizeOverTime: a(e.sizeOverTime, s),
|
|
160
|
+
scale: T(e.scale, s),
|
|
161
|
+
scaleOverTime: T(e.scaleOverTime, s),
|
|
162
|
+
opacity: a(e.opacity, s),
|
|
163
|
+
opacityOverTime: a(e.opacityOverTime, s),
|
|
164
|
+
linearAcceleration: T(e.linearAcceleration, s),
|
|
165
|
+
radialVelocity: d,
|
|
166
|
+
radialAcceleration: a(e.radialAcceleration, s),
|
|
167
|
+
rotation: a(e.rotation, s),
|
|
168
|
+
rotationOverTime: a(e.rotationOverTime, s),
|
|
169
|
+
turbulence: a(e.turbulence, s),
|
|
170
|
+
noiseScale: a(e.noiseScale, s),
|
|
171
|
+
t: 0
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
function rt(t, e, s) {
|
|
175
|
+
t.age += e, t.radialVelocity += t.radialAcceleration * e, t.velocity[0] += (t.linearAcceleration[0] + s(
|
|
176
|
+
t.position[0] * t.noiseScale,
|
|
177
|
+
t.position[1] * t.noiseScale
|
|
178
|
+
) * t.turbulence) * e, t.velocity[1] += (t.linearAcceleration[1] + s(
|
|
179
|
+
t.position[0] * t.noiseScale + 100,
|
|
180
|
+
t.position[1] * t.noiseScale - 100
|
|
181
|
+
) * t.turbulence) * e;
|
|
182
|
+
const i = U(t.radialDirection, t.radialVelocity);
|
|
183
|
+
t.effectiveVelocity = q(t.velocity, i), t.position[0] += t.effectiveVelocity[0] * e, t.position[1] += t.effectiveVelocity[1] * e, t.size += t.sizeOverTime * e, t.scale[0] += t.scaleOverTime[0] * e, t.scale[1] += t.scaleOverTime[1] * e, t.opacity += t.opacityOverTime * e, t.rotation += t.rotationOverTime * e, t.t = Math.min(1, t.age / t.lifetime);
|
|
184
|
+
}
|
|
185
|
+
function D(t) {
|
|
186
|
+
return et(t);
|
|
187
|
+
}
|
|
188
|
+
function a(t, e) {
|
|
189
|
+
return Array.isArray(t) ? t[0] + (t[1] - t[0]) * e() : t;
|
|
190
|
+
}
|
|
191
|
+
function T(t, e) {
|
|
192
|
+
if (ot(t)) {
|
|
193
|
+
const [s, i] = t;
|
|
194
|
+
return c(
|
|
195
|
+
s[0] + (i[0] - s[0]) * e(),
|
|
196
|
+
s[1] + (i[1] - s[1]) * e()
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
return c(t[0], t[1]);
|
|
200
|
+
}
|
|
201
|
+
function ot(t) {
|
|
202
|
+
return Array.isArray(t[0]);
|
|
203
|
+
}
|
|
204
|
+
const at = Number.MAX_SAFE_INTEGER;
|
|
205
|
+
class lt {
|
|
206
|
+
constructor(e = {}) {
|
|
207
|
+
this.started = new O(), this.paused = new O(), this.resumed = new O(), this.finished = new O(), this.particles = E([]), this.config = L(), this.index = 0, this.spawnAccumulator = 0, this.random = I(this.config.seed), this.noise = D(this.random), this.lastTime = 0, this.frame = 0, this.mounted = !1, this.state = E({
|
|
208
|
+
isPaused: this.config.isPaused
|
|
209
|
+
}), this.setConfig(e);
|
|
210
|
+
}
|
|
211
|
+
get isDrained() {
|
|
212
|
+
return this.config.rateOverTime === 0 && this.particles.length === 0;
|
|
213
|
+
}
|
|
214
|
+
get isRunning() {
|
|
215
|
+
return !this.state.isPaused;
|
|
216
|
+
}
|
|
217
|
+
get isPaused() {
|
|
218
|
+
return this.state.isPaused;
|
|
219
|
+
}
|
|
220
|
+
setConfig(e = {}) {
|
|
221
|
+
const s = this.config.seed;
|
|
222
|
+
this.config = L(e), this.config.seed !== s && (this.random = I(this.config.seed), this.noise = D(this.random));
|
|
223
|
+
}
|
|
224
|
+
mount() {
|
|
225
|
+
this.mounted = !0, this.reset(this.config.isPaused);
|
|
226
|
+
}
|
|
227
|
+
unmount() {
|
|
228
|
+
this.mounted = !1, cancelAnimationFrame(this.frame);
|
|
229
|
+
}
|
|
230
|
+
reset(e = this.isPaused) {
|
|
231
|
+
this.particles.splice(0), this.index = 0, this.spawnAccumulator = 0, this.lastTime = performance.now(), this.state.isPaused = e, this.random = I(this.config.seed), this.noise = D(this.random), this.spawn(this.config.startCount), this.started.emit(), this.finishIfDrained(), this.startFrame();
|
|
232
|
+
}
|
|
233
|
+
pause() {
|
|
234
|
+
this.isPaused || (this.state.isPaused = !0, this.paused.emit());
|
|
235
|
+
}
|
|
236
|
+
resume() {
|
|
237
|
+
this.isPaused && (this.state.isPaused = !1, this.lastTime = performance.now(), this.resumed.emit(), this.startFrame());
|
|
238
|
+
}
|
|
239
|
+
stop() {
|
|
240
|
+
this.reset(!0);
|
|
241
|
+
}
|
|
242
|
+
finish() {
|
|
243
|
+
this.isPaused || (this.state.isPaused = !0, cancelAnimationFrame(this.frame), this.finished.emit());
|
|
244
|
+
}
|
|
245
|
+
tick(e = performance.now()) {
|
|
246
|
+
if (this.isPaused) {
|
|
247
|
+
this.lastTime = e;
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
const s = Math.min(0.05, Math.max(0, (e - this.lastTime) / 1e3));
|
|
251
|
+
this.lastTime = e, this.spawnOverTime(s), this.step(s), this.finishIfDrained();
|
|
252
|
+
}
|
|
253
|
+
startFrame() {
|
|
254
|
+
!this.mounted || this.isPaused || (cancelAnimationFrame(this.frame), this.frame = requestAnimationFrame((e) => {
|
|
255
|
+
this.tick(e), this.startFrame();
|
|
256
|
+
}));
|
|
257
|
+
}
|
|
258
|
+
spawnOverTime(e) {
|
|
259
|
+
this.spawnAccumulator += this.config.rateOverTime * e;
|
|
260
|
+
const s = Math.floor(this.spawnAccumulator);
|
|
261
|
+
this.spawnAccumulator -= s, this.spawn(s);
|
|
262
|
+
}
|
|
263
|
+
spawn(e) {
|
|
264
|
+
for (let s = 0; s < e; s++)
|
|
265
|
+
this.particles.push(nt(
|
|
266
|
+
this.nextIndex(),
|
|
267
|
+
this.config,
|
|
268
|
+
this.random
|
|
269
|
+
));
|
|
270
|
+
}
|
|
271
|
+
nextIndex() {
|
|
272
|
+
const e = this.index;
|
|
273
|
+
return this.index = e === at ? 0 : e + 1, e;
|
|
274
|
+
}
|
|
275
|
+
step(e) {
|
|
276
|
+
for (let s = this.particles.length - 1; s >= 0; s--) {
|
|
277
|
+
const i = this.particles[s];
|
|
278
|
+
rt(i, e, this.noise), i.age >= i.lifetime && this.particles.splice(s, 1);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
finishIfDrained() {
|
|
282
|
+
this.isRunning && this.isDrained && this.finish();
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
const ct = (t, e) => {
|
|
286
|
+
const s = t.__vccOpts || t;
|
|
287
|
+
for (const [i, n] of e)
|
|
288
|
+
s[i] = n;
|
|
289
|
+
return s;
|
|
290
|
+
}, ht = {
|
|
291
|
+
props: {
|
|
292
|
+
controller: { type: Object },
|
|
293
|
+
config: { type: Object }
|
|
294
|
+
},
|
|
295
|
+
emits: [
|
|
296
|
+
"started",
|
|
297
|
+
"paused",
|
|
298
|
+
"resumed",
|
|
299
|
+
"finished"
|
|
300
|
+
],
|
|
301
|
+
expose: [
|
|
302
|
+
"reset",
|
|
303
|
+
"pause",
|
|
304
|
+
"resume",
|
|
305
|
+
"stop",
|
|
306
|
+
"isRunning",
|
|
307
|
+
"isPaused"
|
|
308
|
+
],
|
|
309
|
+
data() {
|
|
310
|
+
return {
|
|
311
|
+
localController: null,
|
|
312
|
+
eventCleanups: []
|
|
313
|
+
};
|
|
314
|
+
},
|
|
315
|
+
computed: {
|
|
316
|
+
particleController() {
|
|
317
|
+
return this.controller ?? this.localController;
|
|
318
|
+
},
|
|
319
|
+
isRunning() {
|
|
320
|
+
return this.particleController.isRunning;
|
|
321
|
+
},
|
|
322
|
+
isPaused() {
|
|
323
|
+
return this.particleController.isPaused;
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
watch: {
|
|
327
|
+
config: {
|
|
328
|
+
deep: !0,
|
|
329
|
+
handler(t) {
|
|
330
|
+
t != null && this.particleController?.setConfig(t);
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
controller(t, e) {
|
|
334
|
+
e?.unmount(), this.unmountController(), this.mountController(t ?? this.localController);
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
created() {
|
|
338
|
+
this.localController = new lt(this.config ?? {});
|
|
339
|
+
},
|
|
340
|
+
mounted() {
|
|
341
|
+
this.mountController(this.particleController);
|
|
342
|
+
},
|
|
343
|
+
beforeUnmount() {
|
|
344
|
+
this.unmountController();
|
|
345
|
+
},
|
|
346
|
+
methods: {
|
|
347
|
+
mountController(t) {
|
|
348
|
+
this.config != null && t.setConfig(this.config), t.started.on(() => this.$emit("started"), this), t.paused.on(() => this.$emit("paused"), this), t.resumed.on(() => this.$emit("resumed"), this), t.finished.on(() => this.$emit("finished"), this), t.mount();
|
|
349
|
+
},
|
|
350
|
+
unmountController() {
|
|
351
|
+
this.particleController && (this.particleController.started.removeAll(this), this.particleController.paused.removeAll(this), this.particleController.resumed.removeAll(this), this.particleController.finished.removeAll(this), this.particleController.unmount());
|
|
352
|
+
},
|
|
353
|
+
reset() {
|
|
354
|
+
this.particleController.reset();
|
|
355
|
+
},
|
|
356
|
+
pause() {
|
|
357
|
+
this.particleController.pause();
|
|
358
|
+
},
|
|
359
|
+
resume() {
|
|
360
|
+
this.particleController.resume();
|
|
361
|
+
},
|
|
362
|
+
stop() {
|
|
363
|
+
this.particleController.stop();
|
|
364
|
+
},
|
|
365
|
+
getParticleStyle(t) {
|
|
366
|
+
const e = Math.max(0, t.size);
|
|
367
|
+
return {
|
|
368
|
+
position: "absolute",
|
|
369
|
+
top: 0,
|
|
370
|
+
left: 0,
|
|
371
|
+
width: `${e}px`,
|
|
372
|
+
height: `${e}px`,
|
|
373
|
+
opacity: t.opacity,
|
|
374
|
+
transform: `translate(${t.position[0]}px, ${t.position[1]}px) rotate(${t.rotation}deg) scale(${t.scale[0]}, ${t.scale[1]})`,
|
|
375
|
+
"transform-origin": "center",
|
|
376
|
+
"will-change": "transform, opacity"
|
|
377
|
+
};
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
}, ut = { class: "ParticleSystem" };
|
|
381
|
+
function mt(t, e, s, i, n, r) {
|
|
382
|
+
return N(), j("div", ut, [
|
|
383
|
+
(N(!0), j(H, null, J(r.particleController.particles, (o) => K(t.$slots, "default", {
|
|
384
|
+
key: o.index,
|
|
385
|
+
particle: o,
|
|
386
|
+
style: W(r.getParticleStyle(o))
|
|
387
|
+
}, void 0, !0)), 128))
|
|
388
|
+
]);
|
|
389
|
+
}
|
|
390
|
+
const dt = /* @__PURE__ */ ct(ht, [["render", mt], ["__scopeId", "data-v-47a4e782"]]);
|
|
391
|
+
export {
|
|
392
|
+
it as DEFAULT_PARTICLE_CONFIG,
|
|
393
|
+
dt as ParticleSystem,
|
|
394
|
+
lt as ParticleSystemController,
|
|
395
|
+
D as createNoise,
|
|
396
|
+
nt as createParticle,
|
|
397
|
+
I as createRandom,
|
|
398
|
+
L as resolveParticleConfig,
|
|
399
|
+
rt as stepParticle
|
|
400
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { createNoise2D } from 'simplex-noise';
|
|
2
|
+
import { NumberValue, ParticleState, ParticleSystemConfig, Vector2Value } from './types.js';
|
|
3
|
+
export type ResolvedParticleSystemConfig = Required<ParticleSystemConfig>;
|
|
4
|
+
export declare const DEFAULT_PARTICLE_CONFIG: ResolvedParticleSystemConfig;
|
|
5
|
+
export declare function resolveParticleConfig(config?: ParticleSystemConfig): {
|
|
6
|
+
seed: number;
|
|
7
|
+
isPaused: boolean;
|
|
8
|
+
startCount: number;
|
|
9
|
+
rateOverTime: number;
|
|
10
|
+
lifetime: NumberValue;
|
|
11
|
+
shape: Vector2Value;
|
|
12
|
+
size: NumberValue;
|
|
13
|
+
sizeOverTime: NumberValue;
|
|
14
|
+
scale: Vector2Value;
|
|
15
|
+
scaleOverTime: Vector2Value;
|
|
16
|
+
opacity: NumberValue;
|
|
17
|
+
opacityOverTime: NumberValue;
|
|
18
|
+
linearVelocity: Vector2Value;
|
|
19
|
+
linearAcceleration: Vector2Value;
|
|
20
|
+
radialVelocity: NumberValue;
|
|
21
|
+
radialAcceleration: NumberValue;
|
|
22
|
+
rotation: NumberValue;
|
|
23
|
+
rotationOverTime: NumberValue;
|
|
24
|
+
turbulence: NumberValue;
|
|
25
|
+
noiseScale: NumberValue;
|
|
26
|
+
};
|
|
27
|
+
export declare function createRandom(seed: number): () => number;
|
|
28
|
+
export declare function createParticle(index: number, config: ReturnType<typeof resolveParticleConfig>, random: () => number): ParticleState;
|
|
29
|
+
export declare function stepParticle(particle: ParticleState, dt: number, noise: ReturnType<typeof createNoise2D>): void;
|
|
30
|
+
export declare function createNoise(random: () => number): import('simplex-noise').NoiseFunction2D;
|
|
31
|
+
//# sourceMappingURL=particles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EACR,WAAW,EACX,aAAa,EACb,oBAAoB,EAEpB,YAAY,EACf,MAAM,YAAY,CAAC;AAEpB,MAAM,MAAM,4BAA4B,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,EAAE,4BAqBrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,MAAM,GAAE,oBAAyB;;;;;;;;;;;;;;;;;;;;;EAKtE;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,gBASxC;AAED,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAChD,MAAM,EAAE,MAAM,MAAM,GACrB,aAAa,CAqCf;AAED,wBAAgB,YAAY,CACxB,QAAQ,EAAE,aAAa,EACvB,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,QA4B1C;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,MAAM,2CAE/C"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Vector2 } from '@nightshadeui/util/vector2';
|
|
2
|
+
export type NumberRange = [number, number];
|
|
3
|
+
export type Vector2Range = [Vector2, Vector2];
|
|
4
|
+
export type NumberValue = number | NumberRange;
|
|
5
|
+
export type Vector2Value = Vector2 | Vector2Range;
|
|
6
|
+
export interface ParticleSystemConfig {
|
|
7
|
+
seed?: number;
|
|
8
|
+
isPaused?: boolean;
|
|
9
|
+
startCount?: number;
|
|
10
|
+
rateOverTime?: number;
|
|
11
|
+
lifetime?: NumberValue;
|
|
12
|
+
shape?: Vector2Value;
|
|
13
|
+
size?: NumberValue;
|
|
14
|
+
sizeOverTime?: NumberValue;
|
|
15
|
+
scale?: Vector2Value;
|
|
16
|
+
scaleOverTime?: Vector2Value;
|
|
17
|
+
opacity?: NumberValue;
|
|
18
|
+
opacityOverTime?: NumberValue;
|
|
19
|
+
linearVelocity?: Vector2Value;
|
|
20
|
+
linearAcceleration?: Vector2Value;
|
|
21
|
+
radialVelocity?: NumberValue;
|
|
22
|
+
radialAcceleration?: NumberValue;
|
|
23
|
+
rotation?: NumberValue;
|
|
24
|
+
rotationOverTime?: NumberValue;
|
|
25
|
+
turbulence?: NumberValue;
|
|
26
|
+
noiseScale?: NumberValue;
|
|
27
|
+
}
|
|
28
|
+
export interface ParticleState {
|
|
29
|
+
index: number;
|
|
30
|
+
age: number;
|
|
31
|
+
lifetime: number;
|
|
32
|
+
position: Vector2;
|
|
33
|
+
velocity: Vector2;
|
|
34
|
+
effectiveVelocity: Vector2;
|
|
35
|
+
radialDirection: Vector2;
|
|
36
|
+
size: number;
|
|
37
|
+
sizeOverTime: number;
|
|
38
|
+
scale: Vector2;
|
|
39
|
+
scaleOverTime: Vector2;
|
|
40
|
+
opacity: number;
|
|
41
|
+
opacityOverTime: number;
|
|
42
|
+
linearAcceleration: Vector2;
|
|
43
|
+
radialVelocity: number;
|
|
44
|
+
radialAcceleration: number;
|
|
45
|
+
rotation: number;
|
|
46
|
+
rotationOverTime: number;
|
|
47
|
+
turbulence: number;
|
|
48
|
+
noiseScale: number;
|
|
49
|
+
t: number;
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACb"}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nightshadeui/particle-system",
|
|
3
|
+
"version": "2.15.0",
|
|
4
|
+
"description": "Nightshade particle system component",
|
|
5
|
+
"author": "Boris Okunskiy",
|
|
6
|
+
"license": "ISC",
|
|
7
|
+
"sideEffects": false,
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/particle-system.mjs"
|
|
12
|
+
},
|
|
13
|
+
"./css": "./dist/particle-system.css",
|
|
14
|
+
"./src": "./src/index.ts"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build:watch": "vite build --watch",
|
|
21
|
+
"build": "NODE_ENV=production vite build"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"vue": "^3.5.22"
|
|
25
|
+
},
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"@nightshadeui/util": "2.15.0",
|
|
28
|
+
"nanoevent": "^1.0.0",
|
|
29
|
+
"simplex-noise": "^4.0.3"
|
|
30
|
+
}
|
|
31
|
+
}
|