@tsparticles/plugin-canvas-mask 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,70 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Canvas Mask Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-canvas-mask/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-canvas-mask)
+[![npmjs](https://badge.fury.io/js/tsparticles-plugin-canvas-mask.svg)](https://www.npmjs.com/package/tsparticles-plugin-canvas-mask)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-canvas-mask)](https://www.npmjs.com/package/tsparticles-plugin-canvas-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles canvas mask effect.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.plugin.canvas-mask.min.js` file will export the function to load the plugin:
+
+```javascript
+loadCanvasMaskPlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadCanvasMaskPlugin(tsParticles);
+
+  await 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-plugin-canvas-mask
+```
+
+or
+
+```shell
+$ yarn add tsparticles-plugin-canvas-mask
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("tsparticles-engine");
+const { loadCanvasMaskPlugin } = require("tsparticles-plugin-canvas-mask");
+
+loadCanvasMaskPlugin(tsParticles); // awaitable
+```
+
+or
+
+```javascript
+import { tsParticles } from "tsparticles-engine";
+import { loadCanvasMaskPlugin } from "tsparticles-plugin-canvas-mask";
+
+loadCanvasMaskPlugin(tsParticles); // awaitable
+```

package/browser/CanvasMaskInstance.js

@@ -0,0 +1,46 @@
+import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData } from "./utils";
+export class CanvasMaskInstance {
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+    async init() {
+        const container = this._container, options = container.actualOptions.canvasMask;
+        if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+            return;
+        }
+        let pixelData = {
+            pixels: [],
+            height: 0,
+            width: 0,
+        };
+        const offset = options.pixels.offset;
+        if (options.image) {
+            const url = options.image.src;
+            if (!url) {
+                return;
+            }
+            pixelData = await getImageData(url, offset);
+        }
+        else if (options.text) {
+            const textOptions = options.text;
+            const data = getTextData(textOptions, offset);
+            if (!data) {
+                return;
+            }
+            pixelData = data;
+        }
+        else if (options.element || options.selector) {
+            const canvas = options.element || (options.selector && document.querySelector(options.selector));
+            if (!canvas) {
+                return;
+            }
+            const context = canvas.getContext("2d");
+            if (!context) {
+                return;
+            }
+            pixelData = getCanvasImageData(context, canvas, offset);
+        }
+        addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+    }
+}

package/browser/Options/Classes/CanvasMask.js

@@ -0,0 +1,54 @@
+import { CanvasMaskOverride } from "./CanvasMaskOverride";
+import { CanvasMaskPixels } from "./CanvasMaskPixels";
+import { ImageMask } from "./ImageMask";
+import { TextMask } from "./TextMask";
+export class CanvasMask {
+    constructor() {
+        this.enable = false;
+        this.override = new CanvasMaskOverride();
+        this.pixels = new CanvasMaskPixels();
+        this.position = {
+            x: 50,
+            y: 50,
+        };
+        this.scale = 1;
+    }
+    load(data) {
+        var _a, _b;
+        if (!data) {
+            return;
+        }
+        if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {
+            this.element = data.element;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.image) {
+            if (!this.image) {
+                this.image = new ImageMask();
+            }
+            this.image.load(data.image);
+        }
+        this.pixels.load(data.pixels);
+        if (data.position) {
+            this.position = {
+                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
+                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+            };
+        }
+        this.override.load(data.override);
+        if (data.scale !== undefined) {
+            this.scale = data.scale;
+        }
+        if (data.selector !== undefined) {
+            this.selector = data.selector;
+        }
+        if (data.text) {
+            if (!this.text) {
+                this.text = new TextMask();
+            }
+            this.text.load(data.text);
+        }
+    }
+}

package/browser/Options/Classes/CanvasMaskOverride.js

@@ -0,0 +1,17 @@
+export class CanvasMaskOverride {
+    constructor() {
+        this.color = true;
+        this.opacity = false;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}

package/browser/Options/Classes/CanvasMaskPixels.js

@@ -0,0 +1,27 @@
+export class CanvasMaskPixels {
+    constructor() {
+        this.filter = (pixel) => pixel.a > 0;
+        this.offset = 4;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.filter !== undefined) {
+            if (typeof data.filter === "string") {
+                if (Object.hasOwn(window, data.filter)) {
+                    const filter = window[data.filter];
+                    if (typeof filter === "function") {
+                        this.filter = filter;
+                    }
+                }
+            }
+            else {
+                this.filter = data.filter;
+            }
+        }
+        if (data.offset !== undefined) {
+            this.offset = data.offset;
+        }
+    }
+}

package/browser/Options/Classes/FontTextMask.js

@@ -0,0 +1,26 @@
+export class FontTextMask {
+    constructor() {
+        this.family = "sans-serif";
+        this.size = 100;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.family !== undefined) {
+            this.family = data.family;
+        }
+        if (data.size !== undefined) {
+            this.size = data.size;
+        }
+        if (data.style !== undefined) {
+            this.style = data.style;
+        }
+        if (data.variant !== undefined) {
+            this.variant = data.variant;
+        }
+        if (data.weight !== undefined) {
+            this.weight = data.weight;
+        }
+    }
+}

package/browser/Options/Classes/ImageMask.js

@@ -0,0 +1,13 @@
+export class ImageMask {
+    constructor() {
+        this.src = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.src !== undefined) {
+            this.src = data.src;
+        }
+    }
+}

package/browser/Options/Classes/TextMask.js

@@ -0,0 +1,23 @@
+import { FontTextMask } from "./FontTextMask";
+import { TextMaskLine } from "./TextMaskLine";
+export class TextMask {
+    constructor() {
+        this.color = "#000000";
+        this.font = new FontTextMask();
+        this.lines = new TextMaskLine();
+        this.text = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        this.font.load(data.font);
+        this.lines.load(data.lines);
+        if (data.text !== undefined) {
+            this.text = data.text;
+        }
+    }
+}

package/browser/Options/Classes/TextMaskLine.js

@@ -0,0 +1,17 @@
+export class TextMaskLine {
+    constructor() {
+        this.separator = "\n";
+        this.spacing = 10;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.separator !== undefined) {
+            this.separator = data.separator;
+        }
+        if (data.spacing !== undefined) {
+            this.spacing = data.spacing;
+        }
+    }
+}

package/browser/Options/Interfaces/ICanvasMask.js

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

package/browser/Options/Interfaces/ICanvasMaskOverride.js

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

package/browser/Options/Interfaces/ICanvasMaskPixels.js

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

package/browser/Options/Interfaces/IFontTextMask.js

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

package/browser/Options/Interfaces/IImageMask.js

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

package/browser/Options/Interfaces/ITextMask.js

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

package/browser/Options/Interfaces/ITextMaskLine.js

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

package/browser/index.js

@@ -0,0 +1,29 @@
+import { CanvasMask } from "./Options/Classes/CanvasMask";
+import { CanvasMaskInstance } from "./CanvasMaskInstance";
+class CanvasMaskPlugin {
+    constructor(engine) {
+        this.id = "canvasMask";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return new CanvasMaskInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(source)) {
+            return;
+        }
+        let canvasMaskOptions = options.canvasMask;
+        if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+            options.canvasMask = canvasMaskOptions = new CanvasMask();
+        }
+        canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+    }
+    needsPlugin(options) {
+        var _a, _b;
+        return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+    }
+}
+export async function loadCanvasMaskPlugin(engine) {
+    const plugin = new CanvasMaskPlugin(engine);
+    await engine.addPlugin(plugin);
+}

package/browser/types.js

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

package/browser/utils.js

@@ -0,0 +1,119 @@
+import { getRandom } from "@tsparticles/engine";
+export function shuffle(array) {
+    for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+        const randomIndex = Math.floor(getRandom() * currentIndex);
+        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+    }
+    return array;
+}
+export function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+    const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
+    let selectedPixels = 0;
+    const positionOffset = {
+        x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
+        y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+    };
+    while (selectedPixels < maxParticles && indexArray.length) {
+        const nextIndex = indexArray.pop() || 0, pixelPos = {
+            x: nextIndex % width,
+            y: Math.floor(nextIndex / width),
+        }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
+        if (shouldCreateParticle) {
+            const pos = {
+                x: pixelPos.x * scale + positionOffset.x,
+                y: pixelPos.y * scale + positionOffset.y,
+            };
+            const pOptions = {};
+            if (override.color) {
+                pOptions.color = {
+                    value: pixel,
+                };
+            }
+            if (override.opacity) {
+                pOptions.opacity = {
+                    value: pixel.a,
+                };
+            }
+            container.particles.addParticle(pos, pOptions);
+            selectedPixels++;
+        }
+    }
+}
+export function getCanvasImageData(ctx, size, offset, clear = true) {
+    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    if (clear) {
+        ctx.clearRect(0, 0, size.width, size.height);
+    }
+    const pixels = [];
+    for (let i = 0; i < imageData.length; i += offset) {
+        const idx = i / offset, pos = {
+            x: idx % size.width,
+            y: Math.floor(idx / size.width),
+        };
+        if (!pixels[pos.y]) {
+            pixels[pos.y] = [];
+        }
+        pixels[pos.y][pos.x] = {
+            r: imageData[i],
+            g: imageData[i + 1],
+            b: imageData[i + 2],
+            a: imageData[i + 3] / 255,
+        };
+    }
+    return {
+        pixels,
+        width: Math.min(...pixels.map((row) => row.length)),
+        height: pixels.length,
+    };
+}
+export function getImageData(src, offset) {
+    const image = new Image();
+    image.crossOrigin = "Anonymous";
+    const p = new Promise((resolve, reject) => {
+        image.onerror = reject;
+        image.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const context = canvas.getContext("2d");
+            if (!context) {
+                return reject(new Error("Could not get canvas context"));
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            resolve(getCanvasImageData(context, canvas, offset));
+        };
+    });
+    image.src = src;
+    return p;
+}
+export function getTextData(textOptions, offset) {
+    const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+    if (!text || !context) {
+        return;
+    }
+    const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+    let maxWidth = 0, totalHeight = 0;
+    for (const line of lines) {
+        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        const measure = context.measureText(line), lineData = {
+            measure,
+            text: line,
+            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+            width: measure.width,
+        };
+        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        totalHeight += lineData.height + linesOptions.spacing;
+        linesData.push(lineData);
+    }
+    canvas.width = maxWidth;
+    canvas.height = totalHeight;
+    let currentHeight = 0;
+    for (const line of linesData) {
+        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        context.fillStyle = color;
+        context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        currentHeight += line.height + linesOptions.spacing;
+    }
+    return getCanvasImageData(context, canvas, offset);
+}
+export const range = (n) => [...Array(n).keys()];

package/cjs/CanvasMaskInstance.js

@@ -0,0 +1,61 @@
+"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.CanvasMaskInstance = void 0;
+const utils_1 = require("./utils");
+class CanvasMaskInstance {
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = this._container, options = container.actualOptions.canvasMask;
+            if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+                return;
+            }
+            let pixelData = {
+                pixels: [],
+                height: 0,
+                width: 0,
+            };
+            const offset = options.pixels.offset;
+            if (options.image) {
+                const url = options.image.src;
+                if (!url) {
+                    return;
+                }
+                pixelData = yield (0, utils_1.getImageData)(url, offset);
+            }
+            else if (options.text) {
+                const textOptions = options.text;
+                const data = (0, utils_1.getTextData)(textOptions, offset);
+                if (!data) {
+                    return;
+                }
+                pixelData = data;
+            }
+            else if (options.element || options.selector) {
+                const canvas = options.element || (options.selector && document.querySelector(options.selector));
+                if (!canvas) {
+                    return;
+                }
+                const context = canvas.getContext("2d");
+                if (!context) {
+                    return;
+                }
+                pixelData = (0, utils_1.getCanvasImageData)(context, canvas, offset);
+            }
+            (0, utils_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+        });
+    }
+}
+exports.CanvasMaskInstance = CanvasMaskInstance;

package/cjs/Options/Classes/CanvasMask.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasMask = void 0;
+const CanvasMaskOverride_1 = require("./CanvasMaskOverride");
+const CanvasMaskPixels_1 = require("./CanvasMaskPixels");
+const ImageMask_1 = require("./ImageMask");
+const TextMask_1 = require("./TextMask");
+class CanvasMask {
+    constructor() {
+        this.enable = false;
+        this.override = new CanvasMaskOverride_1.CanvasMaskOverride();
+        this.pixels = new CanvasMaskPixels_1.CanvasMaskPixels();
+        this.position = {
+            x: 50,
+            y: 50,
+        };
+        this.scale = 1;
+    }
+    load(data) {
+        var _a, _b;
+        if (!data) {
+            return;
+        }
+        if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {
+            this.element = data.element;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.image) {
+            if (!this.image) {
+                this.image = new ImageMask_1.ImageMask();
+            }
+            this.image.load(data.image);
+        }
+        this.pixels.load(data.pixels);
+        if (data.position) {
+            this.position = {
+                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
+                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+            };
+        }
+        this.override.load(data.override);
+        if (data.scale !== undefined) {
+            this.scale = data.scale;
+        }
+        if (data.selector !== undefined) {
+            this.selector = data.selector;
+        }
+        if (data.text) {
+            if (!this.text) {
+                this.text = new TextMask_1.TextMask();
+            }
+            this.text.load(data.text);
+        }
+    }
+}
+exports.CanvasMask = CanvasMask;

package/cjs/Options/Classes/CanvasMaskOverride.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasMaskOverride = void 0;
+class CanvasMaskOverride {
+    constructor() {
+        this.color = true;
+        this.opacity = false;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}
+exports.CanvasMaskOverride = CanvasMaskOverride;

package/cjs/Options/Classes/CanvasMaskPixels.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasMaskPixels = void 0;
+class CanvasMaskPixels {
+    constructor() {
+        this.filter = (pixel) => pixel.a > 0;
+        this.offset = 4;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.filter !== undefined) {
+            if (typeof data.filter === "string") {
+                if (Object.hasOwn(window, data.filter)) {
+                    const filter = window[data.filter];
+                    if (typeof filter === "function") {
+                        this.filter = filter;
+                    }
+                }
+            }
+            else {
+                this.filter = data.filter;
+            }
+        }
+        if (data.offset !== undefined) {
+            this.offset = data.offset;
+        }
+    }
+}
+exports.CanvasMaskPixels = CanvasMaskPixels;