@tsparticles/engine 3.0.0-beta.2 → 3.0.0-beta.4

package/umd/Core/Particle.js

@@ -19,7 +19,27 @@
     const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const fixOutMode = (data) => {
+    function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
+        const effectData = effectOptions.options[effect];
+        if (!effectData) {
+            return;
+        }
+        return (0, Utils_js_1.deepExtend)({
+            close: effectOptions.close,
+            fill: effectOptions.fill,
+        }, (0, Utils_js_1.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));
+    }
+    function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+        const shapeData = shapeOptions.options[shape];
+        if (!shapeData) {
+            return;
+        }
+        return (0, Utils_js_1.deepExtend)({
+            close: shapeOptions.close,
+            fill: shapeOptions.fill,
+        }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));
+    }
+    function fixOutMode(data) {
         if (!(0, Utils_js_1.isInArray)(data.outMode, data.checkModes)) {
             return;
         }
@@ -30,7 +50,7 @@
         else if (data.coord < diameter) {
             data.setCb(data.radius);
         }
-    };
+    }
     class Particle {
         constructor(engine, id, container, position, overrideOptions, group) {
             this.container = container;
@@ -78,8 +98,8 @@
                     return res;
                 }
                 const rad = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value), radOffset = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset), range = {
-                    left: radOffset - rad / 2,
-                    right: radOffset + rad / 2,
+                    left: radOffset - rad * 0.5,
+                    right: radOffset + rad * 0.5,
                 };
                 if (!moveOptions.straight) {
                     res.angle += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
@@ -108,7 +128,7 @@
                 if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                     return color;
                 }
-                const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+                const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI * 0.5 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
                 if (!rolled) {
                     return color;
                 }
@@ -141,16 +161,6 @@
                 }
                 this.offset = Vector_js_1.Vector.origin;
             };
-            this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-                const shapeData = shapeOptions.options[this.shape];
-                if (!shapeData) {
-                    return;
-                }
-                return (0, Utils_js_1.deepExtend)({
-                    close: shapeOptions.close,
-                    fill: shapeOptions.fill,
-                }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, this.id, reduceDuplicates));
-            };
             this._engine = engine;
             this.init(id, position, overrideOptions, group);
         }
@@ -163,18 +173,12 @@
             this.slow.inRange = false;
             const container = this.container, pathGenerator = this.pathGenerator;
             for (const [, plugin] of container.plugins) {
-                if (plugin.particleDestroyed) {
-                    plugin.particleDestroyed(this, override);
-                }
+                plugin.particleDestroyed && plugin.particleDestroyed(this, override);
             }
             for (const updater of container.particles.updaters) {
-                if (updater.particleDestroyed) {
-                    updater.particleDestroyed(this, override);
-                }
-            }
-            if (pathGenerator) {
-                pathGenerator.reset(this);
+                updater.particleDestroyed && updater.particleDestroyed(this, override);
             }
+            pathGenerator && pathGenerator.reset(this);
         }
         draw(delta) {
             const container = this.container, canvas = container.canvas;
@@ -187,7 +191,7 @@
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
         }
         getMass() {
-            return (this.getRadius() ** 2 * Math.PI) / 2;
+            return this.getRadius() ** 2 * Math.PI * 0.5;
         }
         getPosition() {
             return {
@@ -206,9 +210,11 @@
             const container = this.container, engine = this._engine;
             this.id = id;
             this.group = group;
-            this.fill = true;
+            this.effectClose = true;
+            this.effectFill = true;
+            this.shapeClose = true;
+            this.shapeFill = true;
             this.pathRotation = false;
-            this.close = true;
             this.lastPathTime = 0;
             this.destroyed = false;
             this.unbreakable = false;
@@ -219,18 +225,33 @@
             };
             this.outType = "normal";
             this.ignoresResizeRatio = true;
-            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+            this.effect = (0, Utils_js_1.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);
             this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
-            const shapeOptions = particlesOptions.shape;
-            if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-                const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
-                if (shape) {
-                    this.shape = shape;
-                    shapeOptions.load(overrideOptions.shape);
+            const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
+            if (overrideOptions) {
+                if (overrideOptions.effect && overrideOptions.effect.type) {
+                    const overrideEffectType = overrideOptions.effect.type, effect = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);
+                    if (effect) {
+                        this.effect = effect;
+                        effectOptions.load(overrideOptions.effect);
+                    }
+                }
+                if (overrideOptions.shape && overrideOptions.shape.type) {
+                    const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
+                    if (shape) {
+                        this.shape = shape;
+                        shapeOptions.load(overrideOptions.shape);
+                    }
                 }
             }
-            this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+            this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
+            this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
             particlesOptions.load(overrideOptions);
+            const effectData = this.effectData;
+            if (effectData) {
+                particlesOptions.load(effectData.particles);
+            }
             const shapeData = this.shapeData;
             if (shapeData) {
                 particlesOptions.load(shapeData.particles);
@@ -239,11 +260,13 @@
             interactivity.load(container.actualOptions.interactivity);
             interactivity.load(particlesOptions.interactivity);
             this.interactivity = interactivity;
-            this.fill = shapeData?.fill ?? particlesOptions.shape.fill;
-            this.close = shapeData?.close ?? particlesOptions.shape.close;
+            this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
+            this.effectClose = effectData?.close ?? particlesOptions.effect.close;
+            this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
+            this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
             const pathOptions = this.options.move.path;
-            this.pathDelay = (0, NumberUtils_js_1.getValue)(pathOptions.delay) * 1000;
+            this.pathDelay = (0, NumberUtils_js_1.getRangeValue)(pathOptions.delay.value) * 1000;
             if (pathOptions.generator) {
                 this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
                 if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -264,34 +287,46 @@
             this.velocity = this.initialVelocity.copy();
             this.moveDecay = 1 - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
-            particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
-            particles.lastZIndex = this.position.z;
+            particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
-            let drawer = container.drawers.get(this.shape);
-            if (!drawer) {
-                drawer = this._engine.getShapeDrawer(this.shape);
-                if (drawer) {
-                    container.drawers.set(this.shape, drawer);
+            let effectDrawer = container.effectDrawers.get(this.effect);
+            if (!effectDrawer) {
+                effectDrawer = this._engine.getEffectDrawer(this.effect);
+                if (effectDrawer) {
+                    container.effectDrawers.set(this.effect, effectDrawer);
                 }
             }
-            if (drawer && drawer.loadShape) {
-                drawer.loadShape(this);
+            if (effectDrawer && effectDrawer.loadEffect) {
+                effectDrawer.loadEffect(this);
             }
-            const sideCountFunc = drawer?.getSidesCount;
+            let shapeDrawer = container.shapeDrawers.get(this.shape);
+            if (!shapeDrawer) {
+                shapeDrawer = this._engine.getShapeDrawer(this.shape);
+                if (shapeDrawer) {
+                    container.shapeDrawers.set(this.shape, shapeDrawer);
+                }
+            }
+            if (shapeDrawer && shapeDrawer.loadShape) {
+                shapeDrawer.loadShape(this);
+            }
+            const sideCountFunc = shapeDrawer?.getSidesCount;
             if (sideCountFunc) {
                 this.sides = sideCountFunc(this);
             }
             this.spawning = false;
             this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
-            for (const updater of container.particles.updaters) {
+            for (const updater of particles.updaters) {
                 updater.init(this);
             }
-            for (const mover of container.particles.movers) {
+            for (const mover of particles.movers) {
                 mover.init && mover.init(this);
             }
-            if (drawer && drawer.particleInit) {
-                drawer.particleInit(container, this);
+            if (effectDrawer && effectDrawer.particleInit) {
+                effectDrawer.particleInit(container, this);
+            }
+            if (shapeDrawer && shapeDrawer.particleInit) {
+                shapeDrawer.particleInit(container, this);
             }
             for (const [, plugin] of container.plugins) {
                 plugin.particleCreated && plugin.particleCreated(this);

package/umd/Core/Particles.js

@@ -19,16 +19,29 @@
     const Constants_js_1 = require("./Utils/Constants.js");
     const qTreeCapacity = 4;
     const qTreeRectangle = (canvasSize) => {
-        return new Rectangle_js_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+        const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
+        return new Rectangle_js_1.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
     };
     class Particles {
         constructor(engine, container) {
             this._applyDensity = (options, manualCount, group) => {
+                const numberOptions = options.number;
                 if (!options.number.density?.enable) {
+                    if (group === undefined) {
+                        this._limit = numberOptions.limit.value;
+                    }
+                    else {
+                        this._groupLimits.set(group, numberOptions.limit.value);
+                    }
                     return;
                 }
-                const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
-                this.limit = numberOptions.limit * densityFactor;
+                const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > 0 ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value * densityFactor;
+                }
+                else {
+                    this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+                }
                 if (particlesCount < particlesNumber) {
                     this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
                 }
@@ -46,7 +59,7 @@
             };
             this._pushParticle = (position, overrideOptions, group, initializer) => {
                 try {
-                    let particle = this.pool.pop();
+                    let particle = this._pool.pop();
                     if (particle) {
                         particle.init(this._nextId, position, overrideOptions, group);
                     }
@@ -85,7 +98,7 @@
                 const zIdx = this._zArray.indexOf(particle);
                 this._array.splice(index, 1);
                 this._zArray.splice(zIdx, 1);
-                this.pool.push(particle);
+                this._pool.push(particle);
                 this._engine.dispatchEvent("particleRemoved", {
                     container: this._container,
                     data: {
@@ -99,10 +112,11 @@
             this._nextId = 0;
             this._array = [];
             this._zArray = [];
-            this.pool = [];
-            this.limit = 0;
-            this.needsSort = false;
-            this.lastZIndex = 0;
+            this._pool = [];
+            this._limit = 0;
+            this._groupLimits = new Map();
+            this._needsSort = false;
+            this._lastZIndex = 0;
             this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
             const canvasSize = container.canvas.size;
             this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -119,17 +133,21 @@
             }
         }
         addParticle(position, overrideOptions, group, initializer) {
-            this.pushing = true;
-            const container = this._container, options = container.actualOptions, limit = options.particles.number.limit;
+            const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;
             if (limit > 0) {
-                const countToRemove = this.count + 1 - limit;
-                if (countToRemove > 0) {
-                    this.removeQuantity(countToRemove);
+                if (limitOptions.mode === "delete") {
+                    const countToRemove = currentCount + 1 - limit;
+                    if (countToRemove > 0) {
+                        this.removeQuantity(countToRemove);
+                    }
+                }
+                else if (limitOptions.mode === "wait") {
+                    if (currentCount >= limit) {
+                        return;
+                    }
                 }
             }
-            const res = this._pushParticle(position, overrideOptions, group, initializer);
-            this.pushing = false;
-            return res;
+            return this._pushParticle(position, overrideOptions, group, initializer);
         }
         clear() {
             this._array = [];
@@ -166,8 +184,8 @@
         }
         init() {
             const container = this._container, options = container.actualOptions;
-            this.lastZIndex = 0;
-            this.needsSort = false;
+            this._lastZIndex = 0;
+            this._needsSort = false;
             let handled = false;
             this.updaters = this._engine.getUpdaters(container, true);
             this._interactionManager.init();
@@ -229,6 +247,13 @@
             }
             this._applyDensity(options.particles, options.manualParticles.length);
         }
+        setLastZIndex(zIndex) {
+            this._lastZIndex = zIndex;
+            this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+        }
+        setResizeFactor(factor) {
+            this._resizeFactor = factor;
+        }
         async update(delta) {
             const container = this._container, particlesToDelete = new Set();
             this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
@@ -236,10 +261,10 @@
                 pathGenerator.update();
             }
             for (const [, plugin] of container.plugins) {
-                plugin.update && plugin.update(delta);
+                plugin.update && (await plugin.update(delta));
             }
+            const resizeFactor = this._resizeFactor;
             for (const particle of this._array) {
-                const resizeFactor = container.canvas.resizeFactor;
                 if (resizeFactor && !particle.ignoresResizeRatio) {
                     particle.position.x *= resizeFactor.width;
                     particle.position.y *= resizeFactor.height;
@@ -267,7 +292,7 @@
                 const checkDelete = (p) => !particlesToDelete.has(p);
                 this._array = this.filter(checkDelete);
                 this._zArray = this._zArray.filter(checkDelete);
-                this.pool.push(...particlesToDelete);
+                this._pool.push(...particlesToDelete);
             }
             await this._interactionManager.externalInteract(delta);
             for (const particle of this._array) {
@@ -278,12 +303,12 @@
                     await this._interactionManager.particlesInteract(particle, delta);
                 }
             }
-            delete container.canvas.resizeFactor;
-            if (this.needsSort) {
+            delete this._resizeFactor;
+            if (this._needsSort) {
                 const zArray = this._zArray;
                 zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                this.lastZIndex = zArray[zArray.length - 1].position.z;
-                this.needsSort = false;
+                this._lastZIndex = zArray[zArray.length - 1].position.z;
+                this._needsSort = false;
             }
         }
     }

package/umd/Core/Retina.js

@@ -29,13 +29,11 @@
                 canvas.size.height = element.offsetHeight * ratio;
             }
             const particles = options.particles, moveOptions = particles.move;
-            this.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
             this.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
             this.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
         }
         initParticle(particle) {
             const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-            props.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
             props.moveDrift = (0, NumberUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
             props.moveSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
             props.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;

package/umd/Core/Utils/QuadTree.js

@@ -20,7 +20,7 @@
             this._subdivide = () => {
                 const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
                 for (let i = 0; i < 4; i++) {
-                    this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
+                    this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - (i % 2)), width * 0.5, height * 0.5), capacity));
                 }
                 this._divided = true;
             };

package/umd/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -26,8 +26,7 @@
                 this.composite = data.composite;
             }
             if (data.cover !== undefined) {
-                const cover = data.cover;
-                const color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
+                const cover = data.cover, color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
                 this.cover.load(cover.color !== undefined ? cover : { color: color });
             }
             if (data.enable !== undefined) {

package/umd/Options/Classes/ColorAnimation.js

@@ -4,48 +4,28 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./AnimationOptions.js", "../../Utils/NumberUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ColorAnimation = void 0;
+    const AnimationOptions_js_1 = require("./AnimationOptions.js");
     const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
-    class ColorAnimation {
+    class ColorAnimation extends AnimationOptions_js_1.AnimationOptions {
         constructor() {
-            this.count = 0;
-            this.enable = false;
+            super();
             this.offset = 0;
-            this.speed = 1;
-            this.delay = 0;
-            this.decay = 0;
             this.sync = true;
         }
         load(data) {
+            super.load(data);
             if (!data) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = (0, NumberUtils_js_1.setRangeValue)(data.count);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
             if (data.offset !== undefined) {
                 this.offset = (0, NumberUtils_js_1.setRangeValue)(data.offset);
             }
-            if (data.speed !== undefined) {
-                this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
-            }
-            if (data.decay !== undefined) {
-                this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
-            }
-            if (data.delay !== undefined) {
-                this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
-            }
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
         }
     }
     exports.ColorAnimation = ColorAnimation;

package/umd/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js

@@ -14,7 +14,6 @@
     class ParticlesBounceFactor extends ValueWithRandom_js_1.ValueWithRandom {
         constructor() {
             super();
-            this.random.minimumValue = 0.1;
             this.value = 1;
         }
     }

package/umd/Options/Classes/Particles/Effect/Effect.js

@@ -0,0 +1,46 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "../../../../Utils/Utils.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Effect = void 0;
+    const Utils_js_1 = require("../../../../Utils/Utils.js");
+    class Effect {
+        constructor() {
+            this.close = true;
+            this.fill = true;
+            this.options = {};
+            this.type = [];
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            const options = data.options;
+            if (options !== undefined) {
+                for (const effect in options) {
+                    const item = options[effect];
+                    if (item) {
+                        this.options[effect] = (0, Utils_js_1.deepExtend)(this.options[effect] ?? {}, item);
+                    }
+                }
+            }
+            if (data.close !== undefined) {
+                this.close = data.close;
+            }
+            if (data.fill !== undefined) {
+                this.fill = data.fill;
+            }
+            if (data.type !== undefined) {
+                this.type = data.type;
+            }
+        }
+    }
+    exports.Effect = Effect;
+});

package/umd/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -4,17 +4,18 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./ParticlesDensity.js"], factory);
+        define(["require", "exports", "./ParticlesDensity.js", "./ParticlesNumberLimit.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ParticlesNumber = void 0;
     const ParticlesDensity_js_1 = require("./ParticlesDensity.js");
+    const ParticlesNumberLimit_js_1 = require("./ParticlesNumberLimit.js");
     class ParticlesNumber {
         constructor() {
             this.density = new ParticlesDensity_js_1.ParticlesDensity();
-            this.limit = 0;
+            this.limit = new ParticlesNumberLimit_js_1.ParticlesNumberLimit();
             this.value = 0;
         }
         load(data) {
@@ -22,10 +23,7 @@
                 return;
             }
             this.density.load(data.density);
-            const limit = data.limit;
-            if (limit !== undefined) {
-                this.limit = limit;
-            }
+            this.limit.load(data.limit);
             if (data.value !== undefined) {
                 this.value = data.value;
             }

package/umd/Options/Classes/{Random.js → Particles/Number/ParticlesNumberLimit.js}

@@ -9,23 +9,23 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Random = void 0;
-    class Random {
+    exports.ParticlesNumberLimit = void 0;
+    class ParticlesNumberLimit {
         constructor() {
-            this.enable = false;
-            this.minimumValue = 0;
+            this.mode = "delete";
+            this.value = 0;
         }
         load(data) {
             if (!data) {
                 return;
             }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
+            if (data.mode !== undefined) {
+                this.mode = data.mode;
             }
-            if (data.minimumValue !== undefined) {
-                this.minimumValue = data.minimumValue;
+            if (data.value !== undefined) {
+                this.value = data.value;
             }
         }
     }
-    exports.Random = Random;
+    exports.ParticlesNumberLimit = ParticlesNumberLimit;
 });

package/umd/Options/Classes/Particles/Opacity/Opacity.js

@@ -12,11 +12,10 @@
     exports.Opacity = void 0;
     const OpacityAnimation_js_1 = require("./OpacityAnimation.js");
     const ValueWithRandom_js_1 = require("../../ValueWithRandom.js");
-    class Opacity extends ValueWithRandom_js_1.ValueWithRandom {
+    class Opacity extends ValueWithRandom_js_1.RangedAnimationValueWithRandom {
         constructor() {
             super();
             this.animation = new OpacityAnimation_js_1.OpacityAnimation();
-            this.random.minimumValue = 0.1;
             this.value = 1;
         }
         load(data) {