feat: first version of image mask plugin, needs refactoring but works

demo/vanilla/app.js

@@ -89,6 +89,7 @@ app.use("/path-polygon", express.static("./node_modules/tsparticles-path-polygon
 app.use("/path-perlin-noise", express.static("./node_modules/tsparticles-path-perlin-noise/dist"));
 app.use("/path-simplex-noise", express.static("./node_modules/tsparticles-path-simplex-noise/dist"));
 app.use("/plugin-hsv-color", express.static("./node_modules/tsparticles-plugin-hsv-color/dist"));
+app.use("/plugin-image-mask", express.static("./node_modules/tsparticles-plugin-image-mask/dist"))
 app.use("/plugin-infection", express.static("./node_modules/tsparticles-plugin-infection/dist"));
 app.use("/preset-big-circles", express.static("./node_modules/tsparticles-preset-big-circles/dist"));
 app.use("/preset-bubbles", express.static("./node_modules/tsparticles-preset-bubbles/dist"));

demo/vanilla/package.json

@@ -71,6 +71,7 @@
     "tsparticles-plugin-absorbers": "^2.2.4",
     "tsparticles-plugin-emitters": "^2.2.4",
     "tsparticles-plugin-hsv-color": "^2.2.4",
+    "tsparticles-plugin-image-mask": "^2.2.4",
     "tsparticles-plugin-infection": "^2.2.4",
     "tsparticles-plugin-polygon-mask": "^2.2.4",
     "tsparticles-preset-big-circles": "^2.2.4",

demo/vanilla/public/javascripts/demo.js

@@ -302,6 +302,7 @@ canvas {
 
         loadFull(tsParticles);
 
+        loadImageMaskPlugin(tsParticles);
         loadInfectionPlugin(tsParticles);
         loadLightInteraction(tsParticles);
         loadParticlesRepulseInteraction(tsParticles);

demo/vanilla/public/presets/imageMask.json

@@ -0,0 +1,70 @@
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "bubble",
+        "parallax": {
+          "enable": false,
+          "force": 2,
+          "smooth": 10
+        }
+      }
+    },
+    "modes": {
+      "bubble": {
+        "distance": 40,
+        "duration": 2,
+        "opacity": 8,
+        "size": 10
+      }
+    }
+  },
+  "particles": {
+    "color": {
+      "value": "#ffffff"
+    },
+    "move": {
+      "direction": "none",
+      "distance": 5,
+      "enable": true,
+      "outModes": "bounce",
+      "speed": 1
+    },
+    "number": {
+      "value": 800
+    },
+    "opacity": {
+      "animation": {
+        "enable": true,
+        "speed": 2,
+        "sync": false
+      },
+      "value": {
+        "min": 0.05,
+        "max": 0.4
+      }
+    },
+    "shape": {
+      "type": "circle"
+    },
+    "size": {
+      "value": {
+        "min": 1,
+        "max": 3
+      }
+    }
+  },
+  "image": {
+    "enable": true,
+    "src": "https://particles.js.org/images/amongus_cyan.png",
+    "scale": 5
+  },
+  "background": {
+    "color": "#000000",
+    "image": "",
+    "position": "50% 50%",
+    "repeat": "no-repeat",
+    "size": "cover"
+  }
+}

demo/vanilla/views/index.pug

@@ -65,6 +65,7 @@ html(lang="en")
                                     option(value="hexagonPath") Hexagon Path
                                     option(value="hollowknight") Hollow Knight
                                     option(value="hyperspace") Hyperspace
+                                    option(value="imageMask") Image Mask
                                     option(value="images") Images
                                     option(value="imagesDirections") Images with Custom Directions
                                     option(value="infection") Infection
@@ -249,6 +250,7 @@ html(lang="en")
         script(src="/updater-gradient/tsparticles.updater.gradient.js")
         script(src="/updater-orbit/tsparticles.updater.orbit.js")
         script(src="/plugin-hsv-color/tsparticles.plugin.hsvColor.js")
+        script(src="/plugin-image-mask/tsparticles.plugin.image-mask.js")
         script(src="/plugin-infection/tsparticles.plugin.infection.js")
         script(src="/shape-bubble/tsparticles.shape.bubble.js")
         script(src="/shape-heart/tsparticles.shape.heart.js")

plugins/imageMask/.eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+src/pathseg.*

plugins/imageMask/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+        "@tsparticles/eslint-config",
+    ]
+};

plugins/imageMask/.npmignore

@@ -0,0 +1 @@
+report.html

plugins/imageMask/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.

plugins/imageMask/README.md

@@ -0,0 +1,67 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Image Mask Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-image-mask/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-image-mask)
+[![npmjs](https://badge.fury.io/js/tsparticles-plugin-image-mask.svg)](https://www.npmjs.com/package/tsparticles-plugin-image-mask)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-image-mask)](https://www.npmjs.com/package/tsparticles-plugin-image-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles image 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.image-mask.min.js` file will export the function to load the plugin:
+
+```javascript
+loadImageMaskPlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadImageMaskPlugin(tsParticles);
+
+  await tsParticles.load("tsparticles", {
+    /* 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-image-mask
+```
+
+or
+
+```shell
+$ yarn add tsparticles-plugin-image-mask
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("tsparticles-engine");
+const { loadImageMaskPlugin } = require("tsparticles-plugin-image-mask");
+
+loadImageMaskPlugin(tsParticles); // awaitable
+```
+
+or
+
+```javascript
+import { tsParticles } from "tsparticles-engine";
+import { loadImageMaskPlugin } from "tsparticles-plugin-image-mask";
+
+loadImageMaskPlugin(tsParticles); // awaitable
+```

plugins/imageMask/package.dist.json

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