@tsparticles/interaction-light 3.0.0-alpha.0

package/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.

package/README.md

@@ -0,0 +1,68 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# tsParticles Light Interaction
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-interaction-light/badge)](https://www.jsdelivr.com/package/npm/tsparticles-interaction-light)
+[![npmjs](https://badge.fury.io/js/tsparticles-interaction-light.svg)](https://www.npmjs.com/package/tsparticles-interaction-light)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-interaction-light)](https://www.npmjs.com/package/tsparticles-interaction-light) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for light effect.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.interaction.light.min.js` file will export the function to load the interaction plugin:
+
+```text
+loadLightInteraction
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
+
+```javascript
+loadLightInteraction(tsParticles);
+
+tsParticles.load({
+  id: "tsparticles",
+  options: {
+    /* options */
+  },
+});
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install tsparticles-interaction-light
+```
+
+or
+
+```shell
+$ yarn add tsparticles-interaction-light
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("tsparticles-engine");
+const { loadLightInteraction } = require("tsparticles-interaction-light");
+
+loadLightInteraction(tsParticles);
+```
+
+or
+
+```javascript
+import { tsParticles } from "tsparticles-engine";
+import { loadLightInteraction } from "tsparticles-interaction-light";
+
+loadLightInteraction(tsParticles);
+```

package/browser/ExternalLighter.js

@@ -0,0 +1,50 @@
+import { ExternalInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
+import { Light } from "./Options/Classes/Light";
+import { drawLight } from "./Utils";
+export class ExternalLighter extends ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+    }
+    clear() {
+    }
+    init() {
+    }
+    async interact() {
+        const container = this.container, options = container.actualOptions;
+        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
+            const mousePos = container.interactivity.mouse.position;
+            if (!mousePos) {
+                return;
+            }
+            container.canvas.draw((ctx) => {
+                drawLight(container, ctx, mousePos);
+            });
+        }
+    }
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
+        if (!(events.onHover.enable && mouse.position)) {
+            return false;
+        }
+        const res = isInArray("light", events.onHover.mode);
+        if (res && interactivity.modes.light) {
+            const lightGradient = interactivity.modes.light.area.gradient;
+            container.canvas.mouseLight = {
+                start: rangeColorToRgb(lightGradient.start),
+                stop: rangeColorToRgb(lightGradient.stop),
+            };
+        }
+        return res;
+    }
+    loadModeOptions(options, ...sources) {
+        if (!options.light) {
+            options.light = new Light();
+        }
+        for (const source of sources) {
+            options.light.load(source === null || source === void 0 ? void 0 : source.light);
+        }
+    }
+    reset() {
+    }
+}

package/browser/Options/Classes/Light.js

@@ -0,0 +1,15 @@
+import { LightArea } from "./LightArea";
+import { LightShadow } from "./LightShadow";
+export class Light {
+    constructor() {
+        this.area = new LightArea();
+        this.shadow = new LightShadow();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.area.load(data.area);
+        this.shadow.load(data.shadow);
+    }
+}

package/browser/Options/Classes/LightArea.js

@@ -0,0 +1,16 @@
+import { LightGradient } from "./LightGradient";
+export class LightArea {
+    constructor() {
+        this.gradient = new LightGradient();
+        this.radius = 1000;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.gradient.load(data.gradient);
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+    }
+}

package/browser/Options/Classes/LightGradient.js

@@ -0,0 +1,16 @@
+import { OptionsColor } from "@tsparticles/engine";
+export class LightGradient {
+    constructor() {
+        this.start = new OptionsColor();
+        this.stop = new OptionsColor();
+        this.start.value = "#ffffff";
+        this.stop.value = "#000000";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.start = OptionsColor.create(this.start, data.start);
+        this.stop = OptionsColor.create(this.stop, data.stop);
+    }
+}

package/browser/Options/Classes/LightOptions.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Classes/LightShadow.js

@@ -0,0 +1,17 @@
+import { OptionsColor } from "@tsparticles/engine";
+export class LightShadow {
+    constructor() {
+        this.color = new OptionsColor();
+        this.color.value = "#000000";
+        this.length = 2000;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.color = OptionsColor.create(this.color, data.color);
+        if (data.length !== undefined) {
+            this.length = data.length;
+        }
+    }
+}

package/browser/Options/Interfaces/ILight.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/ILightArea.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/ILightGradient.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/ILightShadow.js

@@ -0,0 +1 @@
+export {};

package/browser/ParticlesLighter.js

@@ -0,0 +1,37 @@
+import { ParticlesInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
+import { drawParticleShadow } from "./Utils";
+export class ParticlesLighter extends ParticlesInteractorBase {
+    constructor(container) {
+        super(container);
+    }
+    clear() {
+    }
+    init() {
+    }
+    async interact(particle) {
+        const container = this.container, options = container.actualOptions;
+        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
+            const mousePos = this.container.interactivity.mouse.position;
+            if (mousePos) {
+                container.canvas.draw((ctx) => {
+                    drawParticleShadow(container, ctx, particle, mousePos);
+                });
+            }
+        }
+    }
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        if (!(events.onHover.enable && mouse.position)) {
+            return false;
+        }
+        const res = isInArray("light", events.onHover.mode);
+        if (res && interactivity.modes.light) {
+            const shadowOptions = interactivity.modes.light.shadow;
+            particle.lightShadow = rangeColorToRgb(shadowOptions.color);
+        }
+        return res;
+    }
+    reset() {
+    }
+}

package/browser/Types.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils.js

@@ -0,0 +1,58 @@
+import { getStyleFromRgb } from "@tsparticles/engine";
+export function drawLight(container, context, mousePos) {
+    var _a;
+    const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
+    if (!lightOptions) {
+        return;
+    }
+    context.beginPath();
+    context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+    const gradientRgb = container.canvas.mouseLight;
+    if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+        return;
+    }
+    gradientAmbientLight.addColorStop(0, getStyleFromRgb(gradientRgb.start));
+    gradientAmbientLight.addColorStop(1, getStyleFromRgb(gradientRgb.stop));
+    context.fillStyle = gradientAmbientLight;
+    context.fill();
+}
+export function drawParticleShadow(container, context, particle, mousePos) {
+    var _a;
+    const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
+    if (!shadowOptions) {
+        return;
+    }
+    const shadowRgb = particle.lightShadow;
+    if (!shadowRgb) {
+        return;
+    }
+    const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+    for (let i = 0; i < sides; i++) {
+        dots.push({
+            x: pos.x + radius * Math.sin(angle + full * i) * factor,
+            y: pos.y + radius * Math.cos(angle + full * i) * factor,
+        });
+    }
+    const points = [], shadowLength = shadowOptions.length;
+    for (const dot of dots) {
+        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), endX = dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2), endY = dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2);
+        points.push({
+            endX: endX,
+            endY: endY,
+            startX: dot.x,
+            startY: dot.y,
+        });
+    }
+    const shadowColor = getStyleFromRgb(shadowRgb);
+    for (let i = points.length - 1; i >= 0; i--) {
+        const n = i === points.length - 1 ? 0 : i + 1;
+        context.beginPath();
+        context.moveTo(points[i].startX, points[i].startY);
+        context.lineTo(points[n].startX, points[n].startY);
+        context.lineTo(points[n].endX, points[n].endY);
+        context.lineTo(points[i].endX, points[i].endY);
+        context.fillStyle = shadowColor;
+        context.fill();
+    }
+}

package/browser/index.js

@@ -0,0 +1,14 @@
+import { ExternalLighter } from "./ExternalLighter";
+import { ParticlesLighter } from "./ParticlesLighter";
+export function loadLightInteraction(engine) {
+    engine.addInteractor("externalLight", (container) => new ExternalLighter(container));
+    engine.addInteractor("particlesLight", (container) => new ParticlesLighter(container));
+}
+export * from "./Options/Classes/Light";
+export * from "./Options/Classes/LightArea";
+export * from "./Options/Classes/LightGradient";
+export * from "./Options/Classes/LightShadow";
+export * from "./Options/Interfaces/ILight";
+export * from "./Options/Interfaces/ILightArea";
+export * from "./Options/Interfaces/ILightGradient";
+export * from "./Options/Interfaces/ILightShadow";

package/cjs/ExternalLighter.js

@@ -0,0 +1,65 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalLighter = void 0;
+const engine_1 = require("@tsparticles/engine");
+const Light_1 = require("./Options/Classes/Light");
+const Utils_1 = require("./Utils");
+class ExternalLighter extends engine_1.ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+    }
+    clear() {
+    }
+    init() {
+    }
+    interact() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = this.container, options = container.actualOptions;
+            if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
+                const mousePos = container.interactivity.mouse.position;
+                if (!mousePos) {
+                    return;
+                }
+                container.canvas.draw((ctx) => {
+                    (0, Utils_1.drawLight)(container, ctx, mousePos);
+                });
+            }
+        });
+    }
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
+        if (!(events.onHover.enable && mouse.position)) {
+            return false;
+        }
+        const res = (0, engine_1.isInArray)("light", events.onHover.mode);
+        if (res && interactivity.modes.light) {
+            const lightGradient = interactivity.modes.light.area.gradient;
+            container.canvas.mouseLight = {
+                start: (0, engine_1.rangeColorToRgb)(lightGradient.start),
+                stop: (0, engine_1.rangeColorToRgb)(lightGradient.stop),
+            };
+        }
+        return res;
+    }
+    loadModeOptions(options, ...sources) {
+        if (!options.light) {
+            options.light = new Light_1.Light();
+        }
+        for (const source of sources) {
+            options.light.load(source === null || source === void 0 ? void 0 : source.light);
+        }
+    }
+    reset() {
+    }
+}
+exports.ExternalLighter = ExternalLighter;

package/cjs/Options/Classes/Light.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Light = void 0;
+const LightArea_1 = require("./LightArea");
+const LightShadow_1 = require("./LightShadow");
+class Light {
+    constructor() {
+        this.area = new LightArea_1.LightArea();
+        this.shadow = new LightShadow_1.LightShadow();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.area.load(data.area);
+        this.shadow.load(data.shadow);
+    }
+}
+exports.Light = Light;

package/cjs/Options/Classes/LightArea.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightArea = void 0;
+const LightGradient_1 = require("./LightGradient");
+class LightArea {
+    constructor() {
+        this.gradient = new LightGradient_1.LightGradient();
+        this.radius = 1000;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.gradient.load(data.gradient);
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+    }
+}
+exports.LightArea = LightArea;

package/cjs/Options/Classes/LightGradient.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightGradient = void 0;
+const engine_1 = require("@tsparticles/engine");
+class LightGradient {
+    constructor() {
+        this.start = new engine_1.OptionsColor();
+        this.stop = new engine_1.OptionsColor();
+        this.start.value = "#ffffff";
+        this.stop.value = "#000000";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.start = engine_1.OptionsColor.create(this.start, data.start);
+        this.stop = engine_1.OptionsColor.create(this.stop, data.stop);
+    }
+}
+exports.LightGradient = LightGradient;

package/cjs/Options/Classes/LightOptions.js

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

package/cjs/Options/Classes/LightShadow.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightShadow = void 0;
+const engine_1 = require("@tsparticles/engine");
+class LightShadow {
+    constructor() {
+        this.color = new engine_1.OptionsColor();
+        this.color.value = "#000000";
+        this.length = 2000;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.color = engine_1.OptionsColor.create(this.color, data.color);
+        if (data.length !== undefined) {
+            this.length = data.length;
+        }
+    }
+}
+exports.LightShadow = LightShadow;

package/cjs/Options/Interfaces/ILight.js

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

package/cjs/Options/Interfaces/ILightArea.js

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

package/cjs/Options/Interfaces/ILightGradient.js

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

package/cjs/Options/Interfaces/ILightShadow.js

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

package/cjs/ParticlesLighter.js

@@ -0,0 +1,52 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticlesLighter = void 0;
+const engine_1 = require("@tsparticles/engine");
+const Utils_1 = require("./Utils");
+class ParticlesLighter extends engine_1.ParticlesInteractorBase {
+    constructor(container) {
+        super(container);
+    }
+    clear() {
+    }
+    init() {
+    }
+    interact(particle) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = this.container, options = container.actualOptions;
+            if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
+                const mousePos = this.container.interactivity.mouse.position;
+                if (mousePos) {
+                    container.canvas.draw((ctx) => {
+                        (0, Utils_1.drawParticleShadow)(container, ctx, particle, mousePos);
+                    });
+                }
+            }
+        });
+    }
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        if (!(events.onHover.enable && mouse.position)) {
+            return false;
+        }
+        const res = (0, engine_1.isInArray)("light", events.onHover.mode);
+        if (res && interactivity.modes.light) {
+            const shadowOptions = interactivity.modes.light.shadow;
+            particle.lightShadow = (0, engine_1.rangeColorToRgb)(shadowOptions.color);
+        }
+        return res;
+    }
+    reset() {
+    }
+}
+exports.ParticlesLighter = ParticlesLighter;

package/cjs/Types.js

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

package/cjs/Utils.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawParticleShadow = exports.drawLight = void 0;
+const engine_1 = require("@tsparticles/engine");
+function drawLight(container, context, mousePos) {
+    var _a;
+    const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
+    if (!lightOptions) {
+        return;
+    }
+    context.beginPath();
+    context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+    const gradientRgb = container.canvas.mouseLight;
+    if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+        return;
+    }
+    gradientAmbientLight.addColorStop(0, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
+    gradientAmbientLight.addColorStop(1, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
+    context.fillStyle = gradientAmbientLight;
+    context.fill();
+}
+exports.drawLight = drawLight;
+function drawParticleShadow(container, context, particle, mousePos) {
+    var _a;
+    const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
+    if (!shadowOptions) {
+        return;
+    }
+    const shadowRgb = particle.lightShadow;
+    if (!shadowRgb) {
+        return;
+    }
+    const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+    for (let i = 0; i < sides; i++) {
+        dots.push({
+            x: pos.x + radius * Math.sin(angle + full * i) * factor,
+            y: pos.y + radius * Math.cos(angle + full * i) * factor,
+        });
+    }
+    const points = [], shadowLength = shadowOptions.length;
+    for (const dot of dots) {
+        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), endX = dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2), endY = dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2);
+        points.push({
+            endX: endX,
+            endY: endY,
+            startX: dot.x,
+            startY: dot.y,
+        });
+    }
+    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb);
+    for (let i = points.length - 1; i >= 0; i--) {
+        const n = i === points.length - 1 ? 0 : i + 1;
+        context.beginPath();
+        context.moveTo(points[i].startX, points[i].startY);
+        context.lineTo(points[n].startX, points[n].startY);
+        context.lineTo(points[n].endX, points[n].endY);
+        context.lineTo(points[i].endX, points[i].endY);
+        context.fillStyle = shadowColor;
+        context.fill();
+    }
+}
+exports.drawParticleShadow = drawParticleShadow;