@tsparticles/updater-gradient 3.0.0-alpha.0

package/cjs/GradientUpdater.js

@@ -0,0 +1,231 @@
+"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/cjs/Options/Classes/AnimatableGradient.js

@@ -0,0 +1,29 @@
+"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/cjs/Options/Classes/AnimatableGradientColor.js

@@ -0,0 +1,30 @@
+"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/cjs/Options/Classes/GradientAngle.js

@@ -0,0 +1,24 @@
+"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/cjs/Options/Classes/GradientAngleAnimation.js

@@ -0,0 +1,34 @@
+"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/cjs/Options/Classes/GradientColorOpacity.js

@@ -0,0 +1,21 @@
+"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/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -0,0 +1,35 @@
+"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/cjs/Options/Interfaces/Gradients.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/IAnimatableGradient.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/IOptionsGradient.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/index.js

@@ -0,0 +1,8 @@
+"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;

package/esm/GradientUpdater.js

@@ -0,0 +1,227 @@
+import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { AnimatableGradient } from "./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);
+        }
+    }
+}
+export 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, 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 = itemFromSingleOrMultiple(particle.options.gradient);
+        if (!gradient) {
+            return;
+        }
+        particle.gradient = {
+            angle: {
+                value: gradient.angle.value,
+                enable: gradient.angle.animation.enable,
+                velocity: (getRangeValue(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                decay: 1 - getRangeValue(gradient.angle.animation.decay),
+            },
+            type: gradient.type,
+            colors: [],
+        };
+        let rotateDirection = gradient.angle.direction;
+        if (rotateDirection === "random") {
+            const index = Math.floor(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 = rangeColorToHsl(grColor.value, particle.id, reduceDuplicates);
+            if (!grHslColor) {
+                continue;
+            }
+            const grHslAnimation = getHslAnimationFromHsl(grHslColor, grColor.value.animation, particle.container.retina.reduceFactor), addColor = {
+                stop: grColor.stop,
+                value: grHslAnimation,
+                opacity: grColor.opacity
+                    ? {
+                        enable: grColor.opacity.animation.enable,
+                        max: getRangeMax(grColor.opacity.value),
+                        min: getRangeMin(grColor.opacity.value),
+                        status: "increasing",
+                        value: getRangeValue(grColor.opacity.value),
+                        velocity: (getRangeValue(grColor.opacity.animation.speed) / 100) *
+                            particle.container.retina.reduceFactor,
+                        decay: 1 - getRangeValue(grColor.opacity.animation.decay),
+                    }
+                    : undefined,
+            };
+            if (grColor.opacity && addColor.opacity) {
+                const opacityRange = grColor.opacity.value;
+                addColor.opacity.min = getRangeMin(opacityRange);
+                addColor.opacity.max = 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 = randomInRange(addColor.opacity);
+                        addColor.opacity.status =
+                            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 = executeOnSingleOrMultiple(gradientToLoad, (gradient) => {
+                const tmp = new AnimatableGradient();
+                tmp.load(gradient);
+                return tmp;
+            });
+        }
+    }
+    update(particle, delta) {
+        updateGradient(particle, delta);
+    }
+}

package/esm/Options/Classes/AnimatableGradient.js

@@ -0,0 +1,25 @@
+import { AnimatableGradientColor } from "./AnimatableGradientColor";
+import { GradientAngle } from "./GradientAngle";
+export class AnimatableGradient {
+    constructor() {
+        this.angle = new 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();
+                tmp.load(s);
+                return tmp;
+            });
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}