@tsparticles/plugin-canvas-mask 3.0.0-alpha.0

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

@@ -0,0 +1,81 @@
+{
+  "name": "@tsparticles/plugin-canvas-mask",
+  "version": "3.0.0-alpha.0",
+  "description": "tsParticles canvas mask plugin",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "plugins/canvasMask"
+  },
+  "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"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.plugin.canvas-mask.min.js",
+  "unpkg": "tsparticles.plugin.canvas-mask.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-alpha.0"
+  }
+}