@tsparticles/preset-fireworks 3.0.2 → 3.2.0

package/README.md

@@ -6,7 +6,7 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) preset for fireworks effect.
 
-[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
+[![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 
 [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
 
@@ -27,12 +27,16 @@
 Once the scripts are loaded you can set up `tsParticles` like this:
 
 ```javascript
-tsParticles.load({
-  id: "tsparticles",
-  options: {
-    preset: "fireworks",
-  },
-});
+(async () => {
+  await loadFireworksPreset(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      preset: "fireworks",
+    },
+  });
+})();
 ```
 
 #### Customization

package/browser/bundle.js

@@ -1,4 +1,3 @@
 import { loadFireworksPreset } from "./index.js";
 import { tsParticles } from "@tsparticles/engine";
-void loadFireworksPreset(tsParticles);
 export { loadFireworksPreset, tsParticles };

package/browser/index.js

@@ -1,3 +1,4 @@
+import { initOptions } from "./options.js";
 import { loadBasic } from "@tsparticles/basic";
 import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
 import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
@@ -7,7 +8,6 @@ import { loadLineShape } from "@tsparticles/shape-line";
 import { loadRotateUpdater } from "@tsparticles/updater-rotate";
 import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
 import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
-import { options } from "./options.js";
 export async function loadFireworksPreset(engine, refresh = true) {
     await loadBasic(engine, false);
     await loadEmittersPlugin(engine, false);
@@ -18,5 +18,6 @@ export async function loadFireworksPreset(engine, refresh = true) {
     await loadDestroyUpdater(engine, false);
     await loadLifeUpdater(engine, false);
     await loadStrokeColorUpdater(engine, false);
-    await engine.addPreset("fireworks", options, refresh);
+    await engine.addPreset("fireworks", initOptions(engine), false);
+    await engine.refresh(refresh);
 }

package/browser/options.js

@@ -1,211 +1,217 @@
-import { rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
-const explodeSoundCheck = (args) => {
-    const data = args.data;
-    return data.particle.shape === "line";
-};
-const fixRange = (value, min, max) => {
-    const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
-    let res = setRangeValue(value);
-    if (diffSMax) {
-        res = setRangeValue(value.min - diffSMax, max);
-    }
-    const diffSMin = value.min < min ? value.min : minValue;
-    if (diffSMin) {
-        res = setRangeValue(minValue, value.max + diffSMin);
-    }
-    return res;
-};
-const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-    .map((color) => {
-    const rgb = stringToRgb(color);
-    if (!rgb) {
-        return undefined;
-    }
-    const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
-        min: 0,
-        max: 100,
-    }, lBounds = {
-        min: 0,
-        max: 100,
-    }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
-    return {
-        color: {
-            value: {
-                h: hsl.h,
-                s: sRange,
-                l: lRange,
-            },
-        },
-        stroke: {
-            width: 0,
-        },
-        number: {
-            value: 0,
-        },
-        opacity: {
-            value: {
-                min: 0.1,
-                max: 1,
+import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
+export function initOptions(engine) {
+    const explodeSoundCheck = (args) => {
+        const data = args.data;
+        return data.particle.shape === "line";
+    }, fixRange = (value, min, max) => {
+        const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
+        let res = setRangeValue(value);
+        if (diffSMax) {
+            res = setRangeValue(value.min - diffSMax, max);
+        }
+        const diffSMin = value.min < min ? value.min : minValue;
+        if (diffSMin) {
+            res = setRangeValue(minValue, value.max + diffSMin);
+        }
+        return res;
+    }, fireworksOptions = [
+        "#ff595e",
+        "#ffca3a",
+        "#8ac926",
+        "#1982c4",
+        "#6a4c93",
+    ]
+        .map(color => {
+        const rgb = stringToRgb(engine, color);
+        if (!rgb) {
+            return undefined;
+        }
+        const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
+            min: 0,
+            max: 100,
+        }, lBounds = {
+            min: 0,
+            max: 100,
+        }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
+        return {
+            color: {
+                value: {
+                    h: hsl.h,
+                    s: sRange,
+                    l: lRange,
+                },
             },
-            animation: {
-                enable: true,
-                speed: 0.7,
-                sync: false,
-                startValue: "max",
-                destroy: "min",
+            stroke: {
+                width: 0,
             },
-        },
-        shape: {
-            type: "circle",
-        },
-        size: {
-            value: { min: 1, max: 2 },
-            animation: {
-                enable: true,
-                speed: 5,
-                count: 1,
-                sync: false,
-                startValue: "min",
-                destroy: "none",
+            number: {
+                value: 0,
             },
-        },
-        life: {
-            count: 1,
-            duration: {
+            opacity: {
                 value: {
-                    min: 1,
-                    max: 2,
+                    min: 0.1,
+                    max: 1,
+                },
+                animation: {
+                    enable: true,
+                    speed: 0.7,
+                    sync: false,
+                    startValue: StartValueType.max,
+                    destroy: DestroyType.min,
                 },
             },
-        },
-        move: {
-            decay: { min: 0.075, max: 0.1 },
-            enable: true,
-            gravity: {
-                enable: true,
-                inverse: false,
-                acceleration: 5,
-            },
-            speed: { min: 5, max: 15 },
-            direction: "none",
-            outModes: "destroy",
-        },
-    };
-})
-    .filter((t) => t !== undefined);
-export const options = {
-    detectRetina: true,
-    background: {
-        color: "#000",
-    },
-    fpsLimit: 120,
-    emitters: {
-        direction: "top",
-        life: {
-            count: 0,
-            duration: 0.1,
-            delay: 0.1,
-        },
-        rate: {
-            delay: 0.05,
-            quantity: 1,
-        },
-        size: {
-            width: 100,
-            height: 0,
-        },
-        position: {
-            y: 100,
-            x: 50,
-        },
-    },
-    particles: {
-        number: {
-            value: 0,
-        },
-        destroy: {
-            mode: "split",
-            bounds: {
-                top: { min: 10, max: 30 },
+            shape: {
+                type: "circle",
+            },
+            size: {
+                value: { min: 1, max: 2 },
+                animation: {
+                    enable: true,
+                    speed: 5,
+                    count: 1,
+                    sync: false,
+                    startValue: StartValueType.min,
+                    destroy: DestroyType.none,
+                },
             },
-            split: {
-                sizeOffset: false,
+            life: {
                 count: 1,
-                factor: {
-                    value: 0.333333,
-                },
-                rate: {
-                    value: { min: 75, max: 150 },
+                duration: {
+                    value: {
+                        min: 1,
+                        max: 2,
+                    },
                 },
-                particles: fireworksOptions,
             },
-        },
-        life: {
-            count: 1,
-        },
-        shape: {
-            type: "line",
-        },
-        size: {
-            value: {
-                min: 0.1,
-                max: 50,
-            },
-            animation: {
+            move: {
+                decay: { min: 0.075, max: 0.1 },
                 enable: true,
-                sync: true,
-                speed: 90,
-                startValue: "max",
-                destroy: "min",
+                gravity: {
+                    enable: true,
+                    inverse: false,
+                    acceleration: 5,
+                },
+                speed: { min: 5, max: 15 },
+                direction: "none",
+                outModes: OutMode.destroy,
             },
-        },
-        stroke: {
-            color: {
-                value: "#ffffff",
+        };
+    })
+        .filter(t => t !== undefined);
+    return {
+        detectRetina: true,
+        background: {
+            color: "#000",
+        },
+        fpsLimit: 120,
+        emitters: {
+            direction: MoveDirection.top,
+            life: {
+                count: 0,
+                duration: 0.1,
+                delay: 0.1,
+            },
+            rate: {
+                delay: 0.05,
+                quantity: 1,
+            },
+            size: {
+                width: 100,
+                height: 0,
+            },
+            position: {
+                y: 100,
+                x: 50,
+            },
+        },
+        particles: {
+            number: {
+                value: 0,
+            },
+            destroy: {
+                mode: "split",
+                bounds: {
+                    top: { min: 10, max: 30 },
+                },
+                split: {
+                    sizeOffset: false,
+                    count: 1,
+                    factor: {
+                        value: 0.333333,
+                    },
+                    rate: {
+                        value: { min: 75, max: 150 },
+                    },
+                    particles: fireworksOptions,
+                },
             },
-            width: 1,
-        },
-        rotate: {
-            path: true,
-        },
-        move: {
-            enable: true,
-            gravity: {
-                acceleration: 15,
-                enable: true,
-                inverse: true,
-                maxSpeed: 100,
+            life: {
+                count: 1,
             },
-            speed: {
-                min: 10,
-                max: 20,
+            shape: {
+                type: "line",
             },
-            outModes: {
-                default: "destroy",
-                top: "none",
+            size: {
+                value: {
+                    min: 0.1,
+                    max: 50,
+                },
+                animation: {
+                    enable: true,
+                    sync: true,
+                    speed: 90,
+                    startValue: StartValueType.max,
+                    destroy: DestroyType.min,
+                },
             },
-            trail: {
-                fill: {
-                    color: "#000",
+            stroke: {
+                color: {
+                    value: "#ffffff",
                 },
+                width: 1,
+            },
+            rotate: {
+                path: true,
+            },
+            move: {
                 enable: true,
-                length: 10,
+                gravity: {
+                    acceleration: 15,
+                    enable: true,
+                    inverse: true,
+                    maxSpeed: 100,
+                },
+                speed: {
+                    min: 10,
+                    max: 20,
+                },
+                outModes: {
+                    default: OutMode.destroy,
+                    top: OutMode.none,
+                },
+                trail: {
+                    fill: {
+                        color: "#000",
+                    },
+                    enable: true,
+                    length: 10,
+                },
             },
         },
-    },
-    sounds: {
-        enable: true,
-        events: [
-            {
-                event: "particleRemoved",
-                filter: explodeSoundCheck,
-                audio: [
-                    "https://particles.js.org/audio/explosion0.mp3",
-                    "https://particles.js.org/audio/explosion1.mp3",
-                    "https://particles.js.org/audio/explosion2.mp3",
-                ],
-            },
-        ],
-        volume: 50,
-    },
-};
+        sounds: {
+            enable: true,
+            events: [
+                {
+                    event: EventType.particleRemoved,
+                    filter: explodeSoundCheck,
+                    audio: [
+                        "https://particles.js.org/audio/explosion0.mp3",
+                        "https://particles.js.org/audio/explosion1.mp3",
+                        "https://particles.js.org/audio/explosion2.mp3",
+                    ],
+                },
+            ],
+            volume: 50,
+        },
+    };
+}

package/cjs/bundle.js

@@ -5,4 +5,3 @@ const index_js_1 = require("./index.js");
 Object.defineProperty(exports, "loadFireworksPreset", { enumerable: true, get: function () { return index_js_1.loadFireworksPreset; } });
 const engine_1 = require("@tsparticles/engine");
 Object.defineProperty(exports, "tsParticles", { enumerable: true, get: function () { return engine_1.tsParticles; } });
-void (0, index_js_1.loadFireworksPreset)(engine_1.tsParticles);

package/cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadFireworksPreset = void 0;
+const options_js_1 = require("./options.js");
 const basic_1 = require("@tsparticles/basic");
 const updater_destroy_1 = require("@tsparticles/updater-destroy");
 const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
@@ -10,7 +11,6 @@ const shape_line_1 = require("@tsparticles/shape-line");
 const updater_rotate_1 = require("@tsparticles/updater-rotate");
 const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
 const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
-const options_js_1 = require("./options.js");
 async function loadFireworksPreset(engine, refresh = true) {
     await (0, basic_1.loadBasic)(engine, false);
     await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
@@ -21,6 +21,7 @@ async function loadFireworksPreset(engine, refresh = true) {
     await (0, updater_destroy_1.loadDestroyUpdater)(engine, false);
     await (0, updater_life_1.loadLifeUpdater)(engine, false);
     await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine, false);
-    await engine.addPreset("fireworks", options_js_1.options, refresh);
+    await engine.addPreset("fireworks", (0, options_js_1.initOptions)(engine), false);
+    await engine.refresh(refresh);
 }
 exports.loadFireworksPreset = loadFireworksPreset;