Skip to content

Commit

Permalink
Added fade in + bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aneks1
Aneks1 committed Feb 7, 2025
1 parent 5216273 commit e78c3cc
Show file tree
Hide file tree
Showing 12 changed files with 234 additions and 288 deletions.
21 changes: 12 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,18 @@ system.ammount = 100

### Set the properties for the particles
```ts
system.speed = { x: { min: -5, max: 5 }, y: { min: -5, max: 5 } }
system.diameter = { min: 1, max: 4 },
system.life = { min: 5, max: 15 }
system.colors.push(new RGBA(255, 0, 0, 1))
system.colors.push(new HEX("#00ff00"))
system.opacity = particulab.range(0.5, 1)

// Could be either "opacity", "scale" or "opacity-scale"
system.setFadeOutType('opacity-scale', { duration: 2, opacity: 0, scaleFactor: 1 })
system.size = particulab.range(1, 3)
system.life = particulab.range(5, 10)
system.speed = { x: particulab.range(-2, 2), y: particulab.range(-2, 2) }
system.colors.push(new particulab.HEX("ffffff"))
system.colors.push(new particulab.RGBA(255, 255, 0, 1))
system.opacity = particulab.range(50, 100)
```

### You can set fade types!
```ts
system.fadeIn = { duration: 1, opacity: 0, scaleFactor: 0.5 }
system.fadeOut = { duration: 2, opacity: 0, scaleFactor: 2 }
```

### Init the particle system
Expand Down
220 changes: 100 additions & 120 deletions dist/particulab.es.js
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1,144 @@
var d = Object.defineProperty;
var p = (a, t, e) => t in a ? d(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
var i = (a, t, e) => p(a, typeof t != "symbol" ? t + "" : t, e);
class l {
constructor(t, e, o, h) {
i(this, "red");
i(this, "green");
i(this, "blue");
i(this, "alpha");
if (this.red = t, this.green = e, this.blue = o, this.alpha = h, t > 255 || t < 0 || e > 255 || e < 0 || o > 255 || o < 0 || h > 1 || h < 0) throw new TypeError("Invalid rgba color.");
var I = Object.defineProperty;
var y = (s, t, i) => t in s ? I(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
var e = (s, t, i) => y(s, typeof t != "symbol" ? t + "" : t, i);
class p {
constructor(t, i, a, o) {
e(this, "red");
e(this, "green");
e(this, "blue");
e(this, "alpha");
if (this.red = t, this.green = i, this.blue = a, this.alpha = o, t > 255 || t < 0 || i > 255 || i < 0 || a > 255 || a < 0 || o > 1 || o < 0) throw new TypeError("Invalid rgba color.");
}
toHex() {
const t = this._componentToHex(this.red), e = this._componentToHex(this.green), o = this._componentToHex(this.blue);
return new r(`#${t}${e}${o}`);
const t = this._componentToHex(this.red), i = this._componentToHex(this.green), a = this._componentToHex(this.blue);
return new r(`#${t}${i}${a}`);
}
_componentToHex(t) {
const e = t.toString(16);
return e.length === 1 ? "0" + e : e;
const i = t.toString(16);
return i.length === 1 ? "0" + i : i;
}
toString() {
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
}
}
class r {
constructor(t) {
i(this, "hex");
t[0] === "#" && (t = t.slice(1)), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), this.hex = t;
e(this, "hex");
t[0] === "#" && (t = t.slice(1)), t.length === 3 && (t = t.split("").map((i) => i + i).join("")), this.hex = t;
}
toRGB() {
const t = parseInt(this.hex.slice(0, 2), 16), e = parseInt(this.hex.slice(2, 4), 16), o = parseInt(this.hex.slice(4, 6), 16);
return new l(t, e, o, 1);
const t = parseInt(this.hex.slice(0, 2), 16), i = parseInt(this.hex.slice(2, 4), 16), a = parseInt(this.hex.slice(4, 6), 16);
return new p(t, i, a, 1);
}
toString() {
return `#${this.hex}`;
}
}
class c {
constructor(t, e) {
i(this, "parent");
i(this, "id");
i(this, "position", { x: 0, y: 0 });
i(this, "diameter", 0);
i(this, "life", 0);
i(this, "speed", { x: 0, y: 0 });
i(this, "color", new r("#ffffff"));
i(this, "opacity", 100);
i(this, "deltaDiameter", 0);
i(this, "deltaOpacity", 0);
i(this, "fadeOut", {
type: null,
options: null
});
i(this, "fadeIn", {
type: null,
options: null
});
this.parent = e, this.id = t;
class u {
constructor(t, i) {
e(this, "parent");
e(this, "options");
e(this, "deltaSize", 0);
e(this, "deltaOpacity", 0);
if (!i.opacity && !i.scaleFactor) throw new TypeError("Can not create a FadeHandler with opacity and scaleFactor both undefined .");
this.parent = t, this.options = i;
}
}
class g extends u {
constructor(t, i) {
super(t, i), this.calculateDeltas();
}
calculateDeltas() {
this.options.opacity != null && (this.deltaOpacity = (this.options.opacity - this.parent.opacity) / this.options.duration), this.options.scaleFactor != null && (this.deltaSize = (this.options.scaleFactor * this.parent.size - this.parent.size) / this.options.duration);
}
}
class x extends u {
constructor(i, a) {
super(i, a);
e(this, "initialLife");
this.calculateDeltas(), this.initialLife = this.parent.life;
}
calculateDeltas() {
this.options.opacity != null && (this.deltaOpacity = (this.parent.opacity - this.options.opacity) / this.options.duration), this.options.scaleFactor != null && (this.deltaSize = (this.parent.size - this.options.scaleFactor * this.parent.size) / this.options.duration);
}
}
class m {
constructor(t, i) {
e(this, "parent");
e(this, "id");
e(this, "position", { x: 0, y: 0 });
e(this, "size", 0);
e(this, "life", 0);
e(this, "speed", { x: 0, y: 0 });
e(this, "color", new r("#ffffff"));
e(this, "opacity", 100);
// Fade Properties
e(this, "fadeOut");
e(this, "fadeIn");
e(this, "fadeOutHandler");
e(this, "fadeInHandler");
this.parent = i, this.id = t;
}
init() {
if (this.fadeOut.type && this.fadeOut.options) {
if (this.fadeOut.type == "opacity" || this.fadeOut.type == "opacity-scale") {
const e = this.fadeOut.options;
this.deltaOpacity = (e.opacity - this.opacity) / e.duration;
}
if (this.fadeOut.type == "scale" || this.fadeOut.type == "opacity-scale") {
const e = this.fadeOut.options;
this.deltaDiameter = (e.scaleFactor * this.diameter - this.diameter) / e.duration;
}
}
var i, a, o, d;
this.fadeOut && (this.fadeOut.opacity || this.fadeOut.scaleFactor) && (this.fadeOutHandler = new g(this, this.fadeOut)), this.fadeIn && (this.fadeIn.opacity || this.fadeIn.scaleFactor) && (this.fadeInHandler = new x(this, this.fadeIn)), this.opacity = ((i = this.fadeIn) == null ? void 0 : i.opacity) != null ? (a = this.fadeIn) == null ? void 0 : a.opacity : Math.max(0, Math.min(100, this.opacity)), this.size = ((o = this.fadeIn) == null ? void 0 : o.scaleFactor) != null ? (d = this.fadeIn) == null ? void 0 : d.scaleFactor : Math.max(0, this.size), this.life = Math.max(0, this.life);
const t = setInterval(() => {
this.position.x += this.speed.x * 60 / 1e3, this.position.y -= this.speed.y * 60 / 1e3, this.life -= 1 / 60, this.fadeOut.type && this.fadeOut.options && this.life <= this.fadeOut.options.duration && (this.opacity += this.deltaOpacity * (1 / 60), this.opacity = Math.max(0, Math.min(100, this.opacity)), this.diameter += this.deltaDiameter * (1 / 60), this.diameter = Math.max(0, this.diameter)), this.life <= 0 && (clearInterval(t), this.parent.particles.delete(this.id));
var l, c, f;
this.position.x += this.speed.x * 60 / 1e3, this.position.y -= this.speed.y * 60 / 1e3, this.fadeIn && this.fadeInHandler && this.life >= this.fadeInHandler.initialLife - this.fadeIn.duration && (this.opacity += ((l = this.fadeInHandler) == null ? void 0 : l.deltaOpacity) * (1 / 60), this.opacity = Math.max(0, Math.min(100, this.opacity)), this.size += this.fadeInHandler.deltaSize * (1 / 60), this.size = Math.max(0, this.size)), this.fadeOut && this.fadeOutHandler && this.life <= ((c = this.fadeOut) == null ? void 0 : c.duration) && (this.opacity += ((f = this.fadeOutHandler) == null ? void 0 : f.deltaOpacity) * (1 / 60), this.opacity = Math.max(0, Math.min(100, this.opacity)), this.size += this.fadeOutHandler.deltaSize * (1 / 60), this.size = Math.max(0, this.size)), this.life -= 1 / 60, this.life <= 0 && (clearInterval(t), this.parent.particles.delete(this.id));
}, this.parent.deltaTime);
}
}
function n(a, t) {
return { min: a, max: t };
function h(s, t) {
return { min: s, max: t };
}
class s {
constructor(t, e) {
i(this, "canvas");
i(this, "size");
i(this, "lastId", 0);
i(this, "deltaTime", 1e3 / 60);
i(this, "ammount", 0);
i(this, "particles", /* @__PURE__ */ new Map());
i(this, "diameter", n(1, 5));
i(this, "life", n(10, 15));
i(this, "speed", { x: n(-10, 10), y: n(-10, 10) });
i(this, "colors", []);
i(this, "opacity", n(50, 100));
i(this, "fadeOut", {
type: null,
options: null
});
i(this, "fadeIn", {
type: null,
options: null
});
this.canvas = t, this.size = e, t.width = e.x, t.height = e.y;
class n {
constructor(t, i) {
e(this, "canvas");
e(this, "canvasSize");
e(this, "lastId", 0);
e(this, "deltaTime", 1e3 / 60);
e(this, "ammount", 0);
e(this, "particles", /* @__PURE__ */ new Map());
e(this, "size", h(1, 5));
e(this, "life", h(10, 15));
e(this, "speed", { x: h(-10, 10), y: h(-10, 10) });
e(this, "colors", []);
e(this, "opacity", h(50, 100));
e(this, "fadeOut");
e(this, "fadeIn");
this.canvas = t, this.canvasSize = i, t.width = i.x, t.height = i.y;
}
static getRandomNumberInInterval(t) {
const e = Math.ceil(t.min), o = Math.floor(t.max);
return Math.floor(Math.random() * (o - e + 1)) + e;
const i = Math.ceil(t.min), a = Math.floor(t.max);
return Math.floor(Math.random() * (a - i + 1)) + i;
}
static getRandomElementFromArray(t) {
const e = Math.floor(Math.random() * t.length);
return t[e];
const i = Math.floor(Math.random() * t.length);
return t[i];
}
createParticle() {
const t = new c(this.lastId.toString(), this);
t.position.x = s.getRandomNumberInInterval({ min: 0, max: this.size.x }), t.position.y = s.getRandomNumberInInterval({ min: 0, max: this.size.y }), t.diameter = s.getRandomNumberInInterval(this.diameter), t.life = s.getRandomNumberInInterval(this.life), t.speed.x = s.getRandomNumberInInterval(this.speed.x), t.speed.y = s.getRandomNumberInInterval(this.speed.y), t.color = s.getRandomElementFromArray(this.colors || new r("fff")), t.opacity = s.getRandomNumberInInterval(this.opacity), t.fadeOut = this.fadeOut, t.init(), this.particles.set(this.lastId.toString(), t), this.lastId++;
}
/**
*
* @param type The fade in type for the particle
* @param options The options for the final state of the particle
*/
setFadeOutType(t, e) {
if (t == "opacity" && e.opacity < 0 || e.opacity > 100 || t == "opacity-scale" && e.opacity < 0 || e.opacity > 100)
throw new Error("opacity must be between 0 and 100");
if (t == "scale" && e.scaleFactor < 0 || t == "opacity-scale" && e.scaleFactor < 0)
throw new Error("scaleFactor must be greater than 0");
this.fadeOut = {
type: t,
options: e
};
}
/**
*
* @param type The fade in type for the particle
* @param options The options for the initial state of the particle
*/
setFadeInType(t, e) {
if (t == "opacity" && e.opacity < 0 || e.opacity > 100 || t == "opacity-scale" && e.opacity < 0 || e.opacity > 100)
throw new Error("opacity must be between 0 and 100");
if (t == "scale" && e.scaleFactor < 0 || t == "opacity-scale" && e.scaleFactor < 0)
throw new Error("scaleFactor must be greater than 0");
this.fadeIn = {
type: t,
options: e
};
const t = new m(this.lastId.toString(), this);
t.position.x = n.getRandomNumberInInterval({ min: 0, max: this.canvasSize.x }), t.position.y = n.getRandomNumberInInterval({ min: 0, max: this.canvasSize.y }), t.size = n.getRandomNumberInInterval(this.size), t.life = n.getRandomNumberInInterval(this.life), t.speed.x = n.getRandomNumberInInterval(this.speed.x), t.speed.y = n.getRandomNumberInInterval(this.speed.y), t.color = n.getRandomElementFromArray(this.colors || new r("fff")), t.opacity = n.getRandomNumberInInterval(this.opacity), t.fadeOut = this.fadeOut, t.fadeIn = this.fadeIn, t.init(), this.particles.set(this.lastId.toString(), t), this.lastId++;
}
init() {
const t = this.canvas.getContext("2d");
for (let e = 0; e < this.ammount; e++) this.createParticle();
for (let i = 0; i < this.ammount; i++) this.createParticle();
setInterval(() => {
if (this.particles.size < this.ammount)
for (let e = this.particles.size; e < this.ammount; e++) this.createParticle();
t == null || t.clearRect(0, 0, this.canvas.width, this.canvas.height), this.particles.forEach((e) => {
t.fillStyle = e.color.toString(), t.globalAlpha = e.opacity / 100, t == null || t.beginPath(), t == null || t.arc(e.position.x, e.position.y, e.diameter / 2, 0, 2 * Math.PI, !1), t == null || t.closePath(), t == null || t.fill();
for (let i = this.particles.size; i < this.ammount; i++) this.createParticle();
t == null || t.clearRect(0, 0, this.canvas.width, this.canvas.height), this.particles.forEach((i) => {
t.fillStyle = i.color.toString(), t.globalAlpha = i.opacity / 100, t == null || t.beginPath(), t == null || t.arc(i.position.x, i.position.y, i.size / 2, 0, 2 * Math.PI, !1), t == null || t.closePath(), t == null || t.fill();
});
}, this.deltaTime);
}
}
const f = {
Particle: c,
ParticleSystem: s,
RGBA: l,
const H = {
Particle: m,
ParticleSystem: n,
RGBA: p,
HEX: r,
range: n
range: h
};
export {
f as default
H as default
};
Loading

0 comments on commit e78c3cc

Please sign in to comment.