@tsparticles/interaction-light 3.0.0-alpha.0

package/cjs/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadLightInteraction = void 0;
+const ExternalLighter_1 = require("./ExternalLighter");
+const ParticlesLighter_1 = require("./ParticlesLighter");
+function loadLightInteraction(engine) {
+    engine.addInteractor("externalLight", (container) => new ExternalLighter_1.ExternalLighter(container));
+    engine.addInteractor("particlesLight", (container) => new ParticlesLighter_1.ParticlesLighter(container));
+}
+exports.loadLightInteraction = loadLightInteraction;
+__exportStar(require("./Options/Classes/Light"), exports);
+__exportStar(require("./Options/Classes/LightArea"), exports);
+__exportStar(require("./Options/Classes/LightGradient"), exports);
+__exportStar(require("./Options/Classes/LightShadow"), exports);
+__exportStar(require("./Options/Interfaces/ILight"), exports);
+__exportStar(require("./Options/Interfaces/ILightArea"), exports);
+__exportStar(require("./Options/Interfaces/ILightGradient"), exports);
+__exportStar(require("./Options/Interfaces/ILightShadow"), exports);

package/esm/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/esm/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/esm/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/esm/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/esm/Options/Classes/LightOptions.js

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

package/esm/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/esm/Options/Interfaces/ILight.js

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

package/esm/Options/Interfaces/ILightArea.js

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

package/esm/Options/Interfaces/ILightGradient.js

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

package/esm/Options/Interfaces/ILightShadow.js

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

package/esm/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/esm/Types.js

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

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

@@ -0,0 +1,92 @@
+{
+  "name": "@tsparticles/interaction-light",
+  "version": "3.0.0-alpha.0",
+  "description": "tsParticles Light interaction",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "interactions/light"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "@tsparticles/plugin",
+    "@tsparticles/interaction"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.interaction.light.min.js",
+  "unpkg": "tsparticles.interaction.light.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-alpha.0"
+  }
+}