@tsparticles/updater-gradient 3.0.0-alpha.0

package/umd/GradientUpdater.js

@@ -0,0 +1,241 @@
+(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", "@tsparticles/engine", "./Options/Classes/AnimatableGradient"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GradientUpdater = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const AnimatableGradient_1 = require("./Options/Classes/AnimatableGradient");
+    function updateColorOpacity(delta, value) {
+        var _a, _b, _c;
+        if (!value.enable) {
+            return;
+        }
+        const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
+        switch (value.status) {
+            case "increasing":
+                if (value.value >= value.max) {
+                    value.status = "decreasing";
+                }
+                else {
+                    value.value += ((_b = value.velocity) !== null && _b !== void 0 ? _b : 0) * delta.factor;
+                }
+                break;
+            case "decreasing":
+                if (value.value <= value.min) {
+                    value.status = "increasing";
+                }
+                else {
+                    value.value -= ((_c = value.velocity) !== null && _c !== void 0 ? _c : 0) * delta.factor;
+                }
+                break;
+        }
+        if (value.velocity && decay !== 1) {
+            value.velocity *= decay;
+        }
+    }
+    function updateColorValue(delta, value, max, decrease) {
+        var _a, _b;
+        const colorValue = value;
+        if (!colorValue || !colorValue.enable) {
+            return;
+        }
+        const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
+        if (!decrease || colorValue.status === "increasing") {
+            colorValue.value += velocity;
+            if (decrease && colorValue.value > max) {
+                colorValue.status = "decreasing";
+                colorValue.value -= colorValue.value % max;
+            }
+        }
+        else {
+            colorValue.value -= velocity;
+            if (colorValue.value < 0) {
+                colorValue.status = "increasing";
+                colorValue.value += colorValue.value;
+            }
+        }
+        if (colorValue.value > max) {
+            colorValue.value %= max;
+        }
+        if (value.velocity && decay !== 1) {
+            value.velocity *= decay;
+        }
+    }
+    function updateAngle(delta, angle) {
+        var _a, _b;
+        const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, max = 2 * Math.PI, decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
+        if (!angle.enable) {
+            return;
+        }
+        switch (angle.status) {
+            case "increasing":
+                angle.value += speed;
+                if (angle.value > max) {
+                    angle.value -= max;
+                }
+                break;
+            case "decreasing":
+            default:
+                angle.value -= speed;
+                if (angle.value < 0) {
+                    angle.value += max;
+                }
+                break;
+        }
+        if (angle.velocity && decay !== 1) {
+            angle.velocity *= decay;
+        }
+    }
+    function updateGradient(particle, delta) {
+        var _a, _b, _c;
+        const gradient = particle.gradient;
+        if (!gradient) {
+            return;
+        }
+        updateAngle(delta, gradient.angle);
+        for (const color of gradient.colors) {
+            if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
+                updateColorValue(delta, color.value.h, 360, false);
+            }
+            if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
+                updateColorValue(delta, color.value.s, 100, true);
+            }
+            if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
+                updateColorValue(delta, color.value.l, 100, true);
+            }
+            if (color.opacity) {
+                updateColorOpacity(delta, color.opacity);
+            }
+        }
+    }
+    class GradientUpdater {
+        getColorStyles(particle, context, radius, opacity) {
+            var _a, _b;
+            const gradient = particle.gradient;
+            if (!gradient) {
+                return {};
+            }
+            const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
+                ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
+                : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
+            for (const color of gradient.colors) {
+                fillGradient.addColorStop(color.stop, (0, engine_1.getStyleFromHsl)({
+                    h: color.value.h.value,
+                    s: color.value.s.value,
+                    l: color.value.l.value,
+                }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+            }
+            return { fill: fillGradient };
+        }
+        init(particle) {
+            const gradient = (0, engine_1.itemFromSingleOrMultiple)(particle.options.gradient);
+            if (!gradient) {
+                return;
+            }
+            particle.gradient = {
+                angle: {
+                    value: gradient.angle.value,
+                    enable: gradient.angle.animation.enable,
+                    velocity: ((0, engine_1.getRangeValue)(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                    decay: 1 - (0, engine_1.getRangeValue)(gradient.angle.animation.decay),
+                },
+                type: gradient.type,
+                colors: [],
+            };
+            let rotateDirection = gradient.angle.direction;
+            if (rotateDirection === "random") {
+                const index = Math.floor((0, engine_1.getRandom)() * 2);
+                rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            }
+            switch (rotateDirection) {
+                case "counter-clockwise":
+                case "counterClockwise":
+                    particle.gradient.angle.status = "decreasing";
+                    break;
+                case "clockwise":
+                    particle.gradient.angle.status = "increasing";
+                    break;
+            }
+            const reduceDuplicates = particle.options.reduceDuplicates;
+            for (const grColor of gradient.colors) {
+                const grHslColor = (0, engine_1.rangeColorToHsl)(grColor.value, particle.id, reduceDuplicates);
+                if (!grHslColor) {
+                    continue;
+                }
+                const grHslAnimation = (0, engine_1.getHslAnimationFromHsl)(grHslColor, grColor.value.animation, particle.container.retina.reduceFactor), addColor = {
+                    stop: grColor.stop,
+                    value: grHslAnimation,
+                    opacity: grColor.opacity
+                        ? {
+                            enable: grColor.opacity.animation.enable,
+                            max: (0, engine_1.getRangeMax)(grColor.opacity.value),
+                            min: (0, engine_1.getRangeMin)(grColor.opacity.value),
+                            status: "increasing",
+                            value: (0, engine_1.getRangeValue)(grColor.opacity.value),
+                            velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / 100) *
+                                particle.container.retina.reduceFactor,
+                            decay: 1 - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
+                        }
+                        : undefined,
+                };
+                if (grColor.opacity && addColor.opacity) {
+                    const opacityRange = grColor.opacity.value;
+                    addColor.opacity.min = (0, engine_1.getRangeMin)(opacityRange);
+                    addColor.opacity.max = (0, engine_1.getRangeMax)(opacityRange);
+                    const opacityAnimation = grColor.opacity.animation;
+                    switch (opacityAnimation.startValue) {
+                        case "min":
+                            addColor.opacity.value = addColor.opacity.min;
+                            addColor.opacity.status = "increasing";
+                            break;
+                        case "random":
+                            addColor.opacity.value = (0, engine_1.randomInRange)(addColor.opacity);
+                            addColor.opacity.status =
+                                (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                            break;
+                        case "max":
+                        default:
+                            addColor.opacity.value = addColor.opacity.max;
+                            addColor.opacity.status = "decreasing";
+                            break;
+                    }
+                }
+                particle.gradient.colors.push(addColor);
+            }
+        }
+        isEnabled(particle) {
+            var _a, _b, _c;
+            return (!particle.destroyed &&
+                !particle.spawning &&
+                (((_a = particle.gradient) === null || _a === void 0 ? void 0 : _a.angle.enable) ||
+                    ((_c = (_b = particle.gradient) === null || _b === void 0 ? void 0 : _b.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable)) !== null && _c !== void 0 ? _c : false)));
+        }
+        loadOptions(options, ...sources) {
+            for (const source of sources) {
+                if (!(source === null || source === void 0 ? void 0 : source.gradient)) {
+                    continue;
+                }
+                const gradientToLoad = source.gradient;
+                if (!gradientToLoad) {
+                    continue;
+                }
+                options.gradient = (0, engine_1.executeOnSingleOrMultiple)(gradientToLoad, (gradient) => {
+                    const tmp = new AnimatableGradient_1.AnimatableGradient();
+                    tmp.load(gradient);
+                    return tmp;
+                });
+            }
+        }
+        update(particle, delta) {
+            updateGradient(particle, delta);
+        }
+    }
+    exports.GradientUpdater = GradientUpdater;
+});

package/umd/Options/Classes/AnimatableGradient.js

@@ -0,0 +1,39 @@
+(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", "./AnimatableGradientColor", "./GradientAngle"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AnimatableGradient = void 0;
+    const AnimatableGradientColor_1 = require("./AnimatableGradientColor");
+    const GradientAngle_1 = require("./GradientAngle");
+    class AnimatableGradient {
+        constructor() {
+            this.angle = new GradientAngle_1.GradientAngle();
+            this.colors = [];
+            this.type = "random";
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            this.angle.load(data.angle);
+            if (data.colors !== undefined) {
+                this.colors = data.colors.map((s) => {
+                    const tmp = new AnimatableGradientColor_1.AnimatableGradientColor();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            if (data.type !== undefined) {
+                this.type = data.type;
+            }
+        }
+    }
+    exports.AnimatableGradient = AnimatableGradient;
+});

package/umd/Options/Classes/AnimatableGradientColor.js

@@ -0,0 +1,40 @@
+(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", "@tsparticles/engine", "./GradientColorOpacity"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AnimatableGradientColor = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const GradientColorOpacity_1 = require("./GradientColorOpacity");
+    class AnimatableGradientColor {
+        constructor() {
+            this.stop = 0;
+            this.value = new engine_1.AnimatableColor();
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.stop !== undefined) {
+                this.stop = data.stop;
+            }
+            this.value = engine_1.AnimatableColor.create(this.value, data.value);
+            if (data.opacity !== undefined) {
+                this.opacity = new GradientColorOpacity_1.GradientColorOpacity();
+                if (typeof data.opacity === "number") {
+                    this.opacity.value = data.opacity;
+                }
+                else {
+                    this.opacity.load(data.opacity);
+                }
+            }
+        }
+    }
+    exports.AnimatableGradientColor = AnimatableGradientColor;
+});

package/umd/Options/Classes/GradientAngle.js

@@ -0,0 +1,34 @@
+(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", "./GradientAngleAnimation"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GradientAngle = void 0;
+    const GradientAngleAnimation_1 = require("./GradientAngleAnimation");
+    class GradientAngle {
+        constructor() {
+            this.value = 0;
+            this.animation = new GradientAngleAnimation_1.GradientAngleAnimation();
+            this.direction = "clockwise";
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            this.animation.load(data.animation);
+            if (data.value !== undefined) {
+                this.value = data.value;
+            }
+            if (data.direction !== undefined) {
+                this.direction = data.direction;
+            }
+        }
+    }
+    exports.GradientAngle = GradientAngle;
+});

package/umd/Options/Classes/GradientAngleAnimation.js

@@ -0,0 +1,44 @@
+(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", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GradientAngleAnimation = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class GradientAngleAnimation {
+        constructor() {
+            this.count = 0;
+            this.enable = false;
+            this.speed = 0;
+            this.decay = 0;
+            this.sync = false;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.count !== undefined) {
+                this.count = (0, engine_1.setRangeValue)(data.count);
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.speed !== undefined) {
+                this.speed = (0, engine_1.setRangeValue)(data.speed);
+            }
+            if (data.decay !== undefined) {
+                this.decay = (0, engine_1.setRangeValue)(data.decay);
+            }
+            if (data.sync !== undefined) {
+                this.sync = data.sync;
+            }
+        }
+    }
+    exports.GradientAngleAnimation = GradientAngleAnimation;
+});

package/umd/Options/Classes/GradientColorOpacity.js

@@ -0,0 +1,31 @@
+(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", "./GradientColorOpacityAnimation", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GradientColorOpacity = void 0;
+    const GradientColorOpacityAnimation_1 = require("./GradientColorOpacityAnimation");
+    const engine_1 = require("@tsparticles/engine");
+    class GradientColorOpacity {
+        constructor() {
+            this.value = 0;
+            this.animation = new GradientColorOpacityAnimation_1.GradientColorOpacityAnimation();
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            this.animation.load(data.animation);
+            if (data.value !== undefined) {
+                this.value = (0, engine_1.setRangeValue)(data.value);
+            }
+        }
+    }
+    exports.GradientColorOpacity = GradientColorOpacity;
+});

package/umd/Options/Classes/GradientColorOpacityAnimation.js

@@ -0,0 +1,45 @@
+(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", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GradientColorOpacityAnimation = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class GradientColorOpacityAnimation {
+        constructor() {
+            this.count = 0;
+            this.enable = false;
+            this.speed = 0;
+            this.decay = 0;
+            this.sync = false;
+            this.startValue = "random";
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.count !== undefined) {
+                this.count = (0, engine_1.setRangeValue)(data.count);
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.speed !== undefined) {
+                this.speed = (0, engine_1.setRangeValue)(data.speed);
+            }
+            if (data.sync !== undefined) {
+                this.sync = data.sync;
+            }
+            if (data.startValue !== undefined) {
+                this.startValue = data.startValue;
+            }
+        }
+    }
+    exports.GradientColorOpacityAnimation = GradientColorOpacityAnimation;
+});

package/umd/Options/Interfaces/Gradients.js

@@ -0,0 +1,12 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/IAnimatableGradient.js

@@ -0,0 +1,12 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/IOptionsGradient.js

@@ -0,0 +1,12 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/index.js

@@ -0,0 +1,18 @@
+(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", "./GradientUpdater"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadGradientUpdater = void 0;
+    const GradientUpdater_1 = require("./GradientUpdater");
+    function loadGradientUpdater(engine) {
+        engine.addParticleUpdater("gradient", () => new GradientUpdater_1.GradientUpdater());
+    }
+    exports.loadGradientUpdater = loadGradientUpdater;
+});