feat: created gradient updater library, only colors for now

demo/vanilla/app.js

@@ -28,6 +28,7 @@ app.use("/bootstrap", express.static("./node_modules/bootstrap/dist"));
 app.use("/tsparticles", express.static("./node_modules/tsparticles"));
 app.use("/interaction-light", express.static("./node_modules/tsparticles-interaction-light"));
 app.use("/interaction-particles-repulse", express.static("./node_modules/tsparticles-interaction-particles-repulse"));
+app.use("/updater-gradient", express.static("./node_modules/tsparticles-updater-gradient"));
 app.use("/updater-orbit", express.static("./node_modules/tsparticles-updater-orbit"));
 app.use("/path-curves", express.static("./node_modules/tsparticles-path-curves"));
 app.use("/path-perlin-noise", express.static("./node_modules/tsparticles-path-perlin-noise"));

demo/vanilla/package.json

@@ -65,6 +65,7 @@
     "tsparticles-shape-multiline-text": "^1.18.3",
     "tsparticles-shape-rounded-rect": "^1.18.3",
     "tsparticles-shape-spiral": "^1.18.3",
+    "tsparticles-updater-gradient": "^1.33.3",
     "tsparticles-updater-orbit": "^1.33.3"
   }
 }

demo/vanilla/public/javascripts/demo.js

@@ -262,6 +262,7 @@ canvas {
         loadInfectionPlugin(tsParticles);
         loadLightInteraction(tsParticles);
         loadParticlesRepulseInteraction(tsParticles);
+        loadGradientUpdater(tsParticles);
         loadOrbitUpdater(tsParticles);
         loadCurvesPath(tsParticles);
         loadPerlinNoisePath(tsParticles);

demo/vanilla/views/index.pug

@@ -201,6 +201,7 @@ html(lang="en")
         script(src="/tsparticles/tsparticles.min.js")
         script(src="/interaction-light/tsparticles.interaction.light.min.js")
         script(src="/interaction-particles-repulse/tsparticles.interaction.particles.repulse.min.js")
+        script(src="/updater-gradient/tsparticles.updater.gradient.min.js")
         script(src="/updater-orbit/tsparticles.updater.orbit.min.js")
         script(src="/plugin-infection/tsparticles.plugin.infection.min.js")
         script(src="/shape-bubble/tsparticles.shape.bubble.min.js")

engine/src/Core/Interfaces/IParticleValueAnimation.ts

@@ -4,6 +4,7 @@ import type { AnimationStatus } from "../../Enums";
  * @category Interfaces
  */
 export interface IParticleValueAnimation<T> {
+    enable: boolean;
     status?: AnimationStatus;
     velocity?: number;
     value: T;

engine/src/Core/Particle.ts

@@ -33,7 +33,6 @@ import {
     randomInRange,
     setRangeValue,
 } from "../Utils";
-import type { IColorAnimation } from "../Options/Interfaces/IColorAnimation";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
 import { Vector } from "./Particle/Vector";
 import type {
@@ -197,6 +196,7 @@ export class Particle implements IParticle {
         const sizeValue = getValue(sizeOptions) * container.retina.pixelRatio;
 
         this.size = {
+            enable: sizeOptions.animation.enable,
             value: sizeValue,
             max: getRangeMax(sizeOptions.value) * pxRatio,
             min: getRangeMin(sizeOptions.value) * pxRatio,
@@ -254,6 +254,7 @@ export class Particle implements IParticle {
         const rotateOptions = this.options.rotate;
 
         this.rotate = {
+            enable: rotateOptions.animation.enable,
             value: (getRangeValue(rotateOptions.value) * Math.PI) / 180,
         };
 
@@ -288,6 +289,7 @@ export class Particle implements IParticle {
         const tiltOptions = this.options.tilt;
 
         this.tilt = {
+            enable: tiltOptions.enable,
             value: (getRangeValue(tiltOptions.value) * Math.PI) / 180,
             sinDirection: Math.random() >= 0.5 ? 1 : -1,
             cosDirection: Math.random() >= 0.5 ? 1 : -1,
@@ -342,7 +344,11 @@ export class Particle implements IParticle {
 
         if (gradient) {
             this.gradient = {
-                angle: gradient.angle,
+                angle: {
+                    value: gradient.angle.value,
+                    enable: gradient.angle.animation.enable,
+                    velocity: gradient.angle.animation.speed,
+                },
                 type: gradient.type,
                 colors: [],
             };
@@ -421,6 +427,7 @@ export class Particle implements IParticle {
         const opacityOptions = this.options.opacity;
 
         this.opacity = {
+            enable: opacityOptions.animation.enable,
             max: getRangeMax(opacityOptions.value),
             min: getRangeMin(opacityOptions.value),
             value: getValue(opacityOptions),
@@ -498,26 +505,11 @@ export class Particle implements IParticle {
         const strokeHslColor = colorToHsl(this.stroke.color) ?? this.getFillColor();
 
         if (strokeHslColor) {
-            /* strokeColor */
-            this.strokeColor = {
-                h: {
-                    value: strokeHslColor.h,
-                },
-                s: {
-                    value: strokeHslColor.s,
-                },
-                l: {
-                    value: strokeHslColor.l,
-                },
-            };
-
-            const strokeColorAnimation = this.stroke.color?.animation;
-
-            if (strokeColorAnimation && this.strokeColor) {
-                this.setColorAnimation(strokeColorAnimation.h, this.strokeColor.h);
-                this.setColorAnimation(strokeColorAnimation.s, this.strokeColor.s);
-                this.setColorAnimation(strokeColorAnimation.l, this.strokeColor.l);
-            }
+            this.strokeColor = getHslAnimationFromHsl(
+                strokeHslColor,
+                this.stroke.color?.animation,
+                container.retina.reduceFactor
+            );
         }
 
         this.life = this.loadLife();
@@ -680,25 +672,6 @@ export class Particle implements IParticle {
         }
     }
 
-    private setColorAnimation(colorAnimation: IColorAnimation, colorValue: IParticleValueAnimation<number>): void {
-        if (colorAnimation.enable) {
-            colorValue.velocity = (colorAnimation.speed / 100) * this.container.retina.reduceFactor;
-
-            if (colorAnimation.sync) {
-                return;
-            }
-
-            colorValue.status = AnimationStatus.increasing;
-            colorValue.velocity *= Math.random();
-
-            if (colorValue.value) {
-                colorValue.value *= Math.random();
-            }
-        } else {
-            colorValue.velocity = 0;
-        }
-    }
-
     private calcPosition(
         container: Container,
         position: ICoordinates | undefined,

engine/src/Updaters/StrokeColor/StrokeColorUpdater.ts

@@ -2,8 +2,6 @@ import { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater, IParticleValueAnimation } from "../../Core/Interfaces";
 import { randomInRange } from "../../Utils";
 import type { IColorAnimation } from "../../Options/Interfaces/IColorAnimation";
-import type { IHslAnimation } from "../../Options/Interfaces/IHslAnimation";
-import type { IAnimatableColor } from "../../Options/Interfaces/IAnimatableColor";
 import { AnimationStatus } from "../../Enums";
 
 function updateColorValue(
@@ -15,7 +13,7 @@ function updateColorValue(
 ): void {
     const colorValue = value;
 
-    if (!colorValue || !valueAnimation.enable) {
+    if (!colorValue || !colorValue.enable) {
         return;
     }
 
@@ -48,35 +46,23 @@ function updateStrokeColor(particle: Particle, delta: IDelta): void {
         return;
     }
 
-    const animationOptions = (particle.stroke.color as IAnimatableColor).animation;
-    const valueAnimations = animationOptions as IColorAnimation;
+    const animationOptions = particle.stroke.color.animation;
+    const h = particle.strokeColor?.h ?? particle.color?.h;
 
-    if (valueAnimations.enable !== undefined) {
-        const hue = particle.strokeColor?.h ?? particle.color?.h;
-
-        if (hue) {
-            updateColorValue(delta, hue, valueAnimations, 360, false);
-        }
-    } else {
-        const hslAnimations = animationOptions as IHslAnimation;
-
-        const h = particle.strokeColor?.h ?? particle.color?.h;
-
-        if (h) {
-            updateColorValue(delta, h, hslAnimations.h, 360, false);
-        }
+    if (h) {
+        updateColorValue(delta, h, animationOptions.h, 360, false);
+    }
 
-        const s = particle.strokeColor?.s ?? particle.color?.s;
+    const s = particle.strokeColor?.s ?? particle.color?.s;
 
-        if (s) {
-            updateColorValue(delta, s, hslAnimations.s, 100, true);
-        }
+    if (s) {
+        updateColorValue(delta, s, animationOptions.s, 100, true);
+    }
 
-        const l = particle.strokeColor?.l ?? particle.color?.l;
+    const l = particle.strokeColor?.l ?? particle.color?.l;
 
-        if (l) {
-            updateColorValue(delta, l, hslAnimations.l, 100, true);
-        }
+    if (l) {
+        updateColorValue(delta, l, animationOptions.l, 100, true);
     }
 }
 

engine/src/Utils/ColorUtils.ts

@@ -525,25 +525,30 @@ export function getHslFromAnimation(animation?: IParticleHslAnimation): IHsl | u
 
 export function getHslAnimationFromHsl(
     hsl: IHsl,
-    animationOptions: HslAnimation,
+    animationOptions: HslAnimation | undefined,
     reduceFactor: number
 ): IParticleHslAnimation {
     /* color */
     const resColor: IParticleHslAnimation = {
         h: {
+            enable: false,
             value: hsl.h,
         },
         s: {
+            enable: false,
             value: hsl.s,
         },
         l: {
+            enable: false,
             value: hsl.l,
         },
     };
 
-    setColorAnimation(resColor.h, animationOptions.h, reduceFactor);
-    setColorAnimation(resColor.s, animationOptions.s, reduceFactor);
-    setColorAnimation(resColor.l, animationOptions.l, reduceFactor);
+    if (animationOptions) {
+        setColorAnimation(resColor.h, animationOptions.h, reduceFactor);
+        setColorAnimation(resColor.s, animationOptions.s, reduceFactor);
+        setColorAnimation(resColor.l, animationOptions.l, reduceFactor);
+    }
 
     return resColor;
 }
@@ -553,7 +558,9 @@ function setColorAnimation(
     colorAnimation: IColorAnimation,
     reduceFactor: number
 ): void {
-    if (colorAnimation.enable) {
+    colorValue.enable = colorAnimation.enable;
+
+    if (colorValue.enable) {
         colorValue.velocity = (colorAnimation.speed / 100) * reduceFactor;
 
         if (colorAnimation.sync) {

updaters/gradient/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

updaters/gradient/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    plugins: [
+        "@typescript-eslint"
+    ],
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    rules: {
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-var-requires": "warn",
+        "@typescript-eslint/ban-types": "warn",
+        "@typescript-eslint/explicit-member-accessibility": ["error", {
+            "accessibility": "no-public"
+        }]
+    }
+};

updaters/gradient/.npmignore

@@ -0,0 +1 @@
+report.html

updaters/gradient/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.ts",
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

updaters/gradient/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

updaters/gradient/README.md

@@ -0,0 +1,5 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsparticles-updater-gradient
+
+tsParticles updater gradient

updaters/gradient/package.dist.json

@@ -0,0 +1,50 @@
+{
+  "name": "tsparticles-updater-gradient",
+  "version": "1.33.3",
+  "description": "tsParticles particles gradient updater",
+  "homepage": "https://particles.js.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "updaters/gradient"
+  },
+  "keywords": [
+    "tsparticles",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles.js",
+    "particles-ts",
+    "particles.ts",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "tsparticles-shape"
+  ],
+  "author": "Matteo Bruni",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "main": "index.js",
+  "jsdelivr": "tsparticles.updater.gradient.min.js",
+  "unpkg": "tsparticles.updater.gradient.min.js",
+  "browser": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "tsparticles": "^1.33.3"
+  }
+}