tsparticles 1.35.4 → 1.37.2

package/browser/Shapes/Polygon/PolygonDrawerBase.js

@@ -1,3 +1,6 @@
+/**
+ * @category Shape Drawers
+ */
 export class PolygonDrawerBase {
     getSidesCount(particle) {
         var _a, _b;
@@ -7,10 +10,11 @@ export class PolygonDrawerBase {
     draw(context, particle, radius) {
         const start = this.getCenter(particle, radius);
         const side = this.getSidesData(particle, radius);
+        // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/
         const sideCount = side.count.numerator * side.count.denominator;
         const decimalSides = side.count.numerator / side.count.denominator;
         const interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;
-        const interiorAngle = Math.PI - (Math.PI * interiorAngleDegrees) / 180;
+        const interiorAngle = Math.PI - (Math.PI * interiorAngleDegrees) / 180; // convert to radians
         if (!context) {
             return;
         }

package/browser/Shapes/Polygon/TriangleDrawer.d.ts

@@ -1,6 +1,9 @@
 import type { ISide } from "./PolygonDrawerBase";
 import type { ICoordinates, IParticle } from "../../Core/Interfaces";
 import { PolygonDrawerBase } from "./PolygonDrawerBase";
+/**
+ * @category Shape Drawers
+ */
 export declare class TriangleDrawer extends PolygonDrawerBase {
     getSidesCount(): number;
     getSidesData(particle: IParticle, radius: number): ISide;

package/browser/Shapes/Polygon/TriangleDrawer.js

@@ -1,4 +1,7 @@
 import { PolygonDrawerBase } from "./PolygonDrawerBase";
+/**
+ * @category Shape Drawers
+ */
 export class TriangleDrawer extends PolygonDrawerBase {
     getSidesCount() {
         return 3;

package/browser/Shapes/Polygon/index.d.ts

@@ -1,4 +1,4 @@
 import type { Main } from "../../main";
-export declare function loadGenericPolygonShape(tsParticles: Main): void;
-export declare function loadTriangleShape(tsParticles: Main): void;
-export declare function loadPolygonShape(tsParticles: Main): void;
+export declare function loadGenericPolygonShape(tsParticles: Main): Promise<void>;
+export declare function loadTriangleShape(tsParticles: Main): Promise<void>;
+export declare function loadPolygonShape(tsParticles: Main): Promise<void>;

package/browser/Shapes/Polygon/index.js

@@ -1,12 +1,12 @@
 import { PolygonDrawer } from "./PolygonDrawer";
 import { TriangleDrawer } from "./TriangleDrawer";
-export function loadGenericPolygonShape(tsParticles) {
-    tsParticles.addShape("polygon", new PolygonDrawer());
+export async function loadGenericPolygonShape(tsParticles) {
+    await tsParticles.addShape("polygon", new PolygonDrawer());
 }
-export function loadTriangleShape(tsParticles) {
-    tsParticles.addShape("triangle", new TriangleDrawer());
+export async function loadTriangleShape(tsParticles) {
+    await tsParticles.addShape("triangle", new TriangleDrawer());
 }
-export function loadPolygonShape(tsParticles) {
-    loadGenericPolygonShape(tsParticles);
-    loadTriangleShape(tsParticles);
+export async function loadPolygonShape(tsParticles) {
+    await loadGenericPolygonShape(tsParticles);
+    await loadTriangleShape(tsParticles);
 }

package/browser/Shapes/Square/SquareDrawer.d.ts

@@ -1,4 +1,7 @@
 import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+/**
+ * @category Shape Drawers
+ */
 export declare class SquareDrawer implements IShapeDrawer {
     getSidesCount(): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/browser/Shapes/Square/SquareDrawer.js

@@ -1,4 +1,7 @@
 const fixFactor = Math.sqrt(2);
+/**
+ * @category Shape Drawers
+ */
 export class SquareDrawer {
     getSidesCount() {
         return 4;

package/browser/Shapes/Square/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadSquareShape(tsParticles: Main): void;
+export declare function loadSquareShape(tsParticles: Main): Promise<void>;

package/browser/Shapes/Square/index.js

@@ -1,6 +1,6 @@
 import { SquareDrawer } from "./SquareDrawer";
-export function loadSquareShape(tsParticles) {
+export async function loadSquareShape(tsParticles) {
     const drawer = new SquareDrawer();
-    tsParticles.addShape("edge", drawer);
-    tsParticles.addShape("square", drawer);
+    await tsParticles.addShape("edge", drawer);
+    await tsParticles.addShape("square", drawer);
 }

package/browser/Shapes/Star/StarDrawer.d.ts

@@ -1,4 +1,7 @@
 import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+/**
+ * @category Shape Drawers
+ */
 export declare class StarDrawer implements IShapeDrawer {
     getSidesCount(particle: IParticle): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/browser/Shapes/Star/StarDrawer.js

@@ -1,3 +1,6 @@
+/**
+ * @category Shape Drawers
+ */
 export class StarDrawer {
     getSidesCount(particle) {
         var _a, _b;

package/browser/Shapes/Star/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadStarShape(tsParticles: Main): void;
+export declare function loadStarShape(tsParticles: Main): Promise<void>;

package/browser/Shapes/Star/index.js

@@ -1,4 +1,4 @@
 import { StarDrawer } from "./StarDrawer";
-export function loadStarShape(tsParticles) {
-    tsParticles.addShape("star", new StarDrawer());
+export async function loadStarShape(tsParticles) {
+    await tsParticles.addShape("star", new StarDrawer());
 }

package/browser/Shapes/Text/TextDrawer.d.ts

@@ -1,6 +1,9 @@
 import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
 import type { Container } from "../../Core/Container";
 export declare const validTypes: string[];
+/**
+ * @category Shape Drawers
+ */
 export declare class TextDrawer implements IShapeDrawer {
     getSidesCount(): number;
     init(container: Container): Promise<void>;

package/browser/Shapes/Text/TextDrawer.js

@@ -1,5 +1,8 @@
 import { isInArray, itemFromArray, loadFont } from "../../Utils";
 export const validTypes = ["text", "character", "char"];
+/**
+ * @category Shape Drawers
+ */
 export class TextDrawer {
     getSidesCount() {
         return 12;

package/browser/Shapes/Text/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadTextShape(tsParticles: Main): void;
+export declare function loadTextShape(tsParticles: Main): Promise<void>;

package/browser/Shapes/Text/index.js

@@ -1,7 +1,7 @@
 import { validTypes, TextDrawer } from "./TextDrawer";
-export function loadTextShape(tsParticles) {
+export async function loadTextShape(tsParticles) {
     const drawer = new TextDrawer();
     for (const type of validTypes) {
-        tsParticles.addShape(type, drawer);
+        await tsParticles.addShape(type, drawer);
     }
 }

package/browser/Types/ParticlesGroups.d.ts

@@ -1,4 +1,8 @@
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
+/**
+ * @category Types
+ * [[include:Options/Particles/Group.md]]
+ */
 export declare type ParticlesGroups = {
     [name: string]: IParticles;
 };

package/browser/Types/RecursivePartial.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @category Types
+ */
 export declare type RecursivePartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
 };

package/browser/Types/ShapeData.d.ts

@@ -1,5 +1,8 @@
 import type { SingleOrMultiple } from "./SingleOrMultiple";
 import type { IShapeValues } from "../Options/Interfaces/Particles/Shape/IShapeValues";
+/**
+ * @category Types
+ */
 export declare type ShapeData = {
     [type: string]: SingleOrMultiple<IShapeValues>;
 };

package/browser/Types/ShapeDrawerFunctions.d.ts

@@ -2,10 +2,31 @@ import type { IParticle } from "../Core/Interfaces/IParticle";
 import type { Container } from "../Core/Container";
 import type { IDelta } from "../Core/Interfaces/IDelta";
 import { Particle } from "../Core/Particle";
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerDrawFunction = (context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number, delta: IDelta, pixelRatio: number) => void;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerInitFunction = (container: Container) => Promise<void>;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerParticleInitFunction = (container: Container, particle: IParticle) => void;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerAfterEffectFunction = (context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number, delta: IDelta, pixelRatio: number) => void;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerDestroyFunction = (container: Container) => void;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerSidesCountFunction = (particle: IParticle) => number;
+/**
+ * @category Types
+ */
 export declare type ShapeDrawerLoadFunction = (particle: Particle) => void;

package/browser/Types/SingleOrMultiple.d.ts

@@ -1 +1,4 @@
+/**
+ * @category Types
+ */
 export declare type SingleOrMultiple<T> = T | T[];

package/browser/Updaters/Angle/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadAngleUpdater(tsParticles: Main): void;
+export declare function loadAngleUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Angle/index.js

@@ -1,4 +1,4 @@
 import { AngleUpdater } from "./AngleUpdater";
-export function loadAngleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater(container));
+export async function loadAngleUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater(container));
 }

package/browser/Updaters/Color/ColorUpdater.js

@@ -44,6 +44,7 @@ export class ColorUpdater {
         this.container = container;
     }
     init(particle) {
+        /* color */
         const hslColor = colorToHsl(particle.options.color, particle.id, particle.options.reduceDuplicates);
         if (hslColor) {
             particle.color = getHslAnimationFromHsl(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);

package/browser/Updaters/Color/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadColorUpdater(tsParticles: Main): void;
+export declare function loadColorUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Color/index.js

@@ -1,4 +1,4 @@
 import { ColorUpdater } from "./ColorUpdater";
-export function loadColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("color", (container) => new ColorUpdater(container));
+export async function loadColorUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("color", (container) => new ColorUpdater(container));
 }

package/browser/Updaters/Life/LifeUpdater.js

@@ -4,6 +4,7 @@ export class LifeUpdater {
         this.container = container;
     }
     init() {
+        // nothing
     }
     isEnabled(particle) {
         return !particle.destroyed;

package/browser/Updaters/Life/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadLifeUpdater(tsParticles: Main): void;
+export declare function loadLifeUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Life/index.js

@@ -1,4 +1,4 @@
 import { LifeUpdater } from "./LifeUpdater";
-export function loadLifeUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("life", (container) => new LifeUpdater(container));
+export async function loadLifeUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("life", (container) => new LifeUpdater(container));
 }

package/browser/Updaters/Opacity/OpacityUpdater.js

@@ -62,6 +62,7 @@ export class OpacityUpdater {
         this.container = container;
     }
     init(particle) {
+        /* opacity */
         const opacityOptions = particle.options.opacity;
         particle.opacity = {
             enable: opacityOptions.animation.enable,

package/browser/Updaters/Opacity/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadOpacityUpdater(tsParticles: Main): void;
+export declare function loadOpacityUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Opacity/index.js

@@ -1,4 +1,4 @@
 import { OpacityUpdater } from "./OpacityUpdater";
-export function loadOpacityUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater(container));
+export async function loadOpacityUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater(container));
 }

package/browser/Updaters/OutModes/OutOfCanvasUpdater.js

@@ -6,6 +6,7 @@ export class OutOfCanvasUpdater {
         this.container = container;
     }
     init() {
+        // nothing
     }
     isEnabled(particle) {
         return !particle.destroyed && !particle.spawning;

package/browser/Updaters/OutModes/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadOutModesUpdater(tsParticles: Main): void;
+export declare function loadOutModesUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/OutModes/index.js

@@ -1,4 +1,4 @@
 import { OutOfCanvasUpdater } from "./OutOfCanvasUpdater";
-export function loadOutModesUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater(container));
+export async function loadOutModesUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater(container));
 }

package/browser/Updaters/Roll/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadRollUpdater(tsParticles: Main): void;
+export declare function loadRollUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Roll/index.js

@@ -1,4 +1,4 @@
 import { RollUpdater } from "./RollUpdater";
-export function loadRollUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("roll", () => new RollUpdater());
+export async function loadRollUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("roll", () => new RollUpdater());
 }

package/browser/Updaters/Size/SizeUpdater.js

@@ -56,6 +56,7 @@ function updateSize(particle, delta) {
 }
 export class SizeUpdater {
     init() {
+        // nothing
     }
     isEnabled(particle) {
         var _a, _b, _c;

package/browser/Updaters/Size/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadSizeUpdater(tsParticles: Main): void;
+export declare function loadSizeUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Size/index.js

@@ -1,4 +1,4 @@
 import { SizeUpdater } from "./SizeUpdater";
-export function loadSizeUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("size", () => new SizeUpdater());
+export async function loadSizeUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("size", () => new SizeUpdater());
 }

package/browser/Updaters/StrokeColor/StrokeColorUpdater.js

@@ -52,6 +52,7 @@ export class StrokeColorUpdater {
     init(particle) {
         var _a, _b;
         const container = this.container;
+        /* strokeColor */
         particle.stroke =
             particle.options.stroke instanceof Array
                 ? itemFromArray(particle.options.stroke, particle.id, particle.options.reduceDuplicates)

package/browser/Updaters/StrokeColor/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadStrokeColorUpdater(tsParticles: Main): void;
+export declare function loadStrokeColorUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/StrokeColor/index.js

@@ -1,4 +1,4 @@
 import { StrokeColorUpdater } from "./StrokeColorUpdater";
-export function loadStrokeColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container));
+export async function loadStrokeColorUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container));
 }

package/browser/Updaters/Tilt/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadTiltUpdater(tsParticles: Main): void;
+export declare function loadTiltUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Tilt/index.js

@@ -1,4 +1,4 @@
 import { TiltUpdater } from "./TiltUpdater";
-export function loadTiltUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater(container));
+export async function loadTiltUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater(container));
 }

package/browser/Updaters/Wobble/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadWobbleUpdater(tsParticles: Main): void;
+export declare function loadWobbleUpdater(tsParticles: Main): Promise<void>;

package/browser/Updaters/Wobble/index.js

@@ -1,4 +1,4 @@
 import { WobbleUpdater } from "./WobbleUpdater";
-export function loadWobbleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater(container));
+export async function loadWobbleUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater(container));
 }

package/browser/Utils/CanvasUtils.js

@@ -24,6 +24,8 @@ export function clear(context, dimension) {
     context.clearRect(0, 0, dimension.width, dimension.height);
 }
 export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
+    // this.ctx.lineCap = "round"; /* performance issue */
+    /* path */
     let drawn = false;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
@@ -92,6 +94,8 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
     context.stroke();
 }
 export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
+    // this.ctx.lineCap = "round"; /* performance issue */
+    /* path */
     drawTriangle(context, pos1, pos2, pos3);
     if (backgroundMask) {
         context.globalCompositeOperation = composite;

package/browser/Utils/Circle.d.ts

@@ -1,5 +1,8 @@
 import { Range } from "./Range";
 import type { ICoordinates } from "../Core/Interfaces";
+/**
+ * @category Utils
+ */
 export declare class Circle extends Range {
     readonly radius: number;
     constructor(x: number, y: number, radius: number);

package/browser/Utils/Circle.js

@@ -1,5 +1,8 @@
 import { Range } from "./Range";
 import { getDistance } from "./NumberUtils";
+/**
+ * @category Utils
+ */
 export class Circle extends Range {
     constructor(x, y, radius) {
         super(x, y);

package/browser/Utils/CircleWarp.d.ts

@@ -2,6 +2,9 @@ import { Range } from "./Range";
 import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
 import { Circle } from "./Circle";
 import type { IDimension } from "../Core/Interfaces/IDimension";
+/**
+ * @category Utils
+ */
 export declare class CircleWarp extends Circle {
     private readonly canvasSize;
     constructor(x: number, y: number, radius: number, canvasSize: IDimension);

package/browser/Utils/CircleWarp.js

@@ -1,5 +1,8 @@
 import { Rectangle } from "./Rectangle";
 import { Circle } from "./Circle";
+/**
+ * @category Utils
+ */
 export class CircleWarp extends Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);

package/browser/Utils/ColorUtils.d.ts

@@ -1,10 +1,30 @@
 import type { IColor, IHsl, IHsla, IHsv, IHsva, IParticle, IParticleHslAnimation, IRgb, IRgba } from "../Core/Interfaces";
 import type { HslAnimation } from "../Options/Classes/HslAnimation";
+/**
+ * Gets the particles color
+ * @param input the input color to convert in [[IRgb]] object
+ * @param index the array index, if needed
+ * @param useIndex set to false to ignore the index parameter
+ */
 export declare function colorToRgb(input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
+/**
+ * Gets the particles color
+ * @param color the input color to convert in [[IHsl]] object
+ * @param index the array index, if needed
+ * @param useIndex set to false to ignore the index parameter
+ */
 export declare function colorToHsl(color: string | IColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
 export declare function rgbToHsl(color: IRgb): IHsl;
 export declare function stringToAlpha(input: string): number | undefined;
+/**
+ * Converts hexadecimal string (HTML color code) in a [[IRgb]] object
+ * @param input the hexadecimal string (#f70 or #ff7700)
+ */
 export declare function stringToRgb(input: string): IRgb | undefined;
+/**
+ * Converts a Hue Saturation Lightness ([[IHsl]]) object in a [[IRgb]] object
+ * @param hsl
+ */
 export declare function hslToRgb(hsl: IHsl): IRgb;
 export declare function hslaToRgba(hsla: IHsla): IRgba;
 export declare function hslToHsv(hsl: IHsl): IHsv;

package/browser/Utils/ColorUtils.js

@@ -2,6 +2,12 @@ import { itemFromArray } from "./Utils";
 import { Constants } from "./Constants";
 import { mix, randomInRange, setRangeValue } from "./NumberUtils";
 import { AnimationStatus } from "../Enums";
+/**
+ *
+ * @param p
+ * @param q
+ * @param t
+ */
 function hue2rgb(p, q, t) {
     let tCalc = t;
     if (tCalc < 0) {
@@ -59,6 +65,8 @@ function stringToRgba(input) {
             : undefined;
     }
     else {
+        // By Tim Down - http://stackoverflow.com/a/5624139/3493650
+        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
         const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
         const hexFixed = input.replace(shorthandRegex, (_m, r, g, b, a) => {
             return r + r + g + g + b + b + (a !== undefined ? a + a : "");
@@ -75,6 +83,12 @@ function stringToRgba(input) {
             : undefined;
     }
 }
+/**
+ * Gets the particles color
+ * @param input the input color to convert in [[IRgb]] object
+ * @param index the array index, if needed
+ * @param useIndex set to false to ignore the index parameter
+ */
 export function colorToRgb(input, index, useIndex = true) {
     var _a, _b, _c;
     if (input === undefined) {
@@ -117,6 +131,12 @@ export function colorToRgb(input, index, useIndex = true) {
     }
     return res;
 }
+/**
+ * Gets the particles color
+ * @param color the input color to convert in [[IHsl]] object
+ * @param index the array index, if needed
+ * @param useIndex set to false to ignore the index parameter
+ */
 export function colorToHsl(color, index, useIndex = true) {
     const rgb = colorToRgb(color, index, useIndex);
     return rgb !== undefined ? rgbToHsl(rgb) : undefined;
@@ -127,13 +147,16 @@ export function rgbToHsl(color) {
     const b1 = color.b / 255;
     const max = Math.max(r1, g1, b1);
     const min = Math.min(r1, g1, b1);
+    //Calculate L:
     const res = {
         h: 0,
         l: (max + min) / 2,
         s: 0,
     };
     if (max != min) {
+        //Calculate S:
         res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
+        //Calculate H:
         res.h =
             r1 === max
                 ? (g1 - b1) / (max - min)
@@ -151,9 +174,17 @@ export function stringToAlpha(input) {
     var _a;
     return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
 }
+/**
+ * Converts hexadecimal string (HTML color code) in a [[IRgb]] object
+ * @param input the hexadecimal string (#f70 or #ff7700)
+ */
 export function stringToRgb(input) {
     return stringToRgba(input);
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsl]]) object in a [[IRgb]] object
+ * @param hsl
+ */
 export function hslToRgb(hsl) {
     const result = { b: 0, g: 0, r: 0 };
     const hslPercent = {
@@ -162,7 +193,7 @@ export function hslToRgb(hsl) {
         s: hsl.s / 100,
     };
     if (hslPercent.s === 0) {
-        result.b = hslPercent.l;
+        result.b = hslPercent.l; // achromatic
         result.g = hslPercent.l;
         result.r = hslPercent.l;
     }
@@ -410,6 +441,7 @@ export function getHslFromAnimation(animation) {
         : undefined;
 }
 export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
+    /* color */
     const resColor = {
         h: {
             enable: false,

package/browser/Utils/Constants.d.ts

@@ -1,4 +1,11 @@
+/**
+ * Project's constants
+ * @category Utils
+ */
 export declare class Constants {
+    /**
+     * Particles canvas element class name
+     */
     static readonly canvasClass: string;
     static readonly randomColorValue: string;
     static readonly midColorValue: string;