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

package/browser/Interfaces/IPoissonPoint.js

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

package/browser/Options/Classes/Poisson.js

@@ -0,0 +1,26 @@
+export class Poisson {
+    constructor() {
+        this.enable = false;
+        this.dimensions = 2;
+        this.radius = 0;
+        this.retries = 30;
+        this.steps = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.dimensions !== undefined) {
+            this.dimensions = data.dimensions;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+        if (data.retries !== undefined) {
+            this.retries = data.retries;
+        }
+    }
+}

package/browser/Options/Interfaces/IPoisson.js

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

package/browser/PoissonDisc.js

@@ -0,0 +1,138 @@
+import { getDistance, getRandom } from "@tsparticles/engine";
+const double = 2, doublePI = Math.PI * double;
+export class PoissonDisc {
+    constructor(size, radius, retries, dimensions, firstPoint) {
+        this.size = { ...size };
+        this.radius = radius;
+        this.retries = retries;
+        this.dimensions = dimensions;
+        this.cellSize = Math.floor(this.radius / Math.sqrt(this.dimensions));
+        this.cols = Math.floor(this.size.width / this.cellSize);
+        this.rows = Math.floor(this.size.height / this.cellSize);
+        this.points = [];
+        this.active = [];
+        this.grid = [];
+        this.firstPoint = firstPoint ? { ...firstPoint } : undefined;
+        this.reset();
+    }
+    addPoint(inputPoint) {
+        const point = {
+            position: { ...inputPoint },
+            gridPosition: {
+                x: Math.floor(inputPoint.x / this.cellSize),
+                y: Math.floor(inputPoint.y / this.cellSize),
+            },
+        }, pointIndex = this.points.length;
+        this.points.push(point);
+        this.grid[point.gridPosition.y][point.gridPosition.x] = pointIndex;
+        this.active.push(pointIndex);
+    }
+    getRandom(min, max) {
+        return Math.floor(getRandom() * (max - min)) + min;
+    }
+    initialiseGrid() {
+        for (let y = 0; y <= this.rows; y++) {
+            this.grid[y] = [];
+            for (let x = 0; x <= this.cols; x++) {
+                this.grid[y][x] = -1;
+            }
+        }
+    }
+    reset() {
+        this.points = [];
+        this.active = [];
+        this.grid = [];
+        this.initialiseGrid();
+        if (this.firstPoint) {
+            this.addPoint(this.firstPoint);
+        }
+        else {
+            const minCoordinate = 0;
+            this.addPoint({
+                x: this.getRandom(minCoordinate, this.size.width),
+                y: this.getRandom(minCoordinate, this.size.height),
+            });
+        }
+    }
+    async run() {
+        this.reset();
+        const minCount = 0, step = 1;
+        while (this.active.length > minCount) {
+            await this.steps(step);
+        }
+    }
+    async steps(steps) {
+        const minCount = 0;
+        for (let i = 0; i < steps; i++) {
+            if (this.active.length <= minCount) {
+                continue;
+            }
+            await this._step();
+        }
+    }
+    _getNewPoint(currentPoint, tries) {
+        const minCoordinate = 0, gridMinValue = 0, maxNeighbourIndex = 1, newAngle = tries * (doublePI / this.retries), newDist = this.getRandom(this.radius, this.radius * double), offset = {
+            x: Math.cos(newAngle) * newDist,
+            y: Math.sin(newAngle) * newDist,
+        }, newPoint = {
+            x: Math.floor(currentPoint.position.x + offset.x),
+            y: Math.floor(currentPoint.position.y + offset.y),
+        }, newGridCoords = {
+            x: Math.floor(newPoint.x / this.cellSize),
+            y: Math.floor(newPoint.y / this.cellSize),
+        };
+        if (newPoint.x > minCoordinate &&
+            newPoint.x < this.size.width &&
+            newPoint.y > minCoordinate &&
+            newPoint.y < this.size.height) {
+            if (this.grid[newGridCoords.y][newGridCoords.x] < gridMinValue) {
+                for (let i = -1; i <= maxNeighbourIndex; i++) {
+                    for (let j = -1; j <= maxNeighbourIndex; j++) {
+                        const neighbourGrid = {
+                            x: newGridCoords.x + j,
+                            y: newGridCoords.y + i,
+                        };
+                        if (neighbourGrid.x >= minCoordinate &&
+                            neighbourGrid.y >= minCoordinate &&
+                            neighbourGrid.x < this.cols &&
+                            neighbourGrid.y < this.rows &&
+                            (neighbourGrid.x !== newGridCoords.x || neighbourGrid.y !== newGridCoords.y)) {
+                            if (this.grid[neighbourGrid.y][neighbourGrid.x] >= gridMinValue) {
+                                const neighbourIndex = this.grid[neighbourGrid.y][neighbourGrid.x], neighbour = this.points[neighbourIndex], dist = getDistance(newPoint, neighbour.position);
+                                if (dist < this.radius) {
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            return;
+        }
+        return newPoint;
+    }
+    async _step() {
+        const minCount = 0, randomActive = this.getRandom(minCount, this.active.length);
+        return new Promise((resolve) => {
+            let foundNewPoint = false;
+            for (let tries = 0; tries < this.retries; tries++) {
+                const newPoint = this._getNewPoint(this.points[this.active[randomActive]], tries);
+                if (newPoint) {
+                    foundNewPoint = true;
+                    this.addPoint(newPoint);
+                    break;
+                }
+            }
+            if (!foundNewPoint) {
+                const deleteCount = 1;
+                this.active.splice(randomActive, deleteCount);
+            }
+            resolve();
+        });
+    }
+}

package/browser/PoissonInstance.js

@@ -0,0 +1,55 @@
+import { getRangeMax } from "@tsparticles/engine";
+import { PoissonDisc } from "./PoissonDisc.js";
+export class PoissonInstance {
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+        this._currentIndex = 0;
+    }
+    async init() {
+        await this._initData();
+    }
+    particlePosition(position) {
+        const container = this._container, options = container.actualOptions.poisson;
+        if (!this.poissonDisc || !(options?.enable ?? false) || this._currentIndex >= this.poissonDisc.points.length) {
+            return;
+        }
+        return position ?? this.poissonDisc?.points[this._currentIndex++]?.position;
+    }
+    resize() {
+        const container = this._container, options = container.actualOptions.poisson;
+        if (!(options?.enable ?? false)) {
+            return;
+        }
+        if (this.redrawTimeout) {
+            clearTimeout(this.redrawTimeout);
+        }
+        const timeout = 250;
+        this.redrawTimeout = window.setTimeout(() => {
+            void (async () => {
+                await this._initData();
+                await container.particles.redraw();
+            })();
+        }, timeout);
+    }
+    stop() {
+        delete this.poissonDisc;
+    }
+    async _initData() {
+        const container = this._container, poissonOptions = container.actualOptions.poisson, particlesOptions = container.actualOptions.particles, canvasSize = container.canvas.size, pixelRatio = container.retina.pixelRatio;
+        if (!poissonOptions?.enable) {
+            return;
+        }
+        this._currentIndex = 0;
+        this.poissonDisc = new PoissonDisc(canvasSize, poissonOptions.radius
+            ? poissonOptions.radius * pixelRatio
+            : Math.max(getRangeMax(particlesOptions.size.value) * pixelRatio, Math.sqrt((canvasSize.width * canvasSize.height) / particlesOptions.number.value)), poissonOptions.retries, poissonOptions.dimensions);
+        const noSteps = 0;
+        if (poissonOptions.steps > noSteps) {
+            await this.poissonDisc.steps(poissonOptions.steps);
+        }
+        else {
+            await this.poissonDisc.run();
+        }
+    }
+}

package/browser/index.js

@@ -0,0 +1,27 @@
+import { Poisson } from "./Options/Classes/Poisson.js";
+import { PoissonInstance } from "./PoissonInstance.js";
+class PoissonDiscPlugin {
+    constructor(engine) {
+        this.id = "poisson";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return new PoissonInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let poissonOptions = options.poisson;
+        if (poissonOptions?.load === undefined) {
+            options.poisson = poissonOptions = new Poisson();
+        }
+        poissonOptions.load(source?.poisson);
+    }
+    needsPlugin(options) {
+        return options?.poisson?.enable ?? false;
+    }
+}
+export async function loadPoissonDiscPlugin(engine, refresh = true) {
+    await engine.addPlugin(new PoissonDiscPlugin(engine), refresh);
+}

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/browser/types.js

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

package/cjs/Interfaces/IPoissonPoint.js

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

package/cjs/Options/Classes/Poisson.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Poisson = void 0;
+class Poisson {
+    constructor() {
+        this.enable = false;
+        this.dimensions = 2;
+        this.radius = 0;
+        this.retries = 30;
+        this.steps = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.dimensions !== undefined) {
+            this.dimensions = data.dimensions;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+        if (data.retries !== undefined) {
+            this.retries = data.retries;
+        }
+    }
+}
+exports.Poisson = Poisson;

package/cjs/Options/Interfaces/IPoisson.js

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

package/cjs/PoissonDisc.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoissonDisc = void 0;
+const engine_1 = require("@tsparticles/engine");
+const double = 2, doublePI = Math.PI * double;
+class PoissonDisc {
+    constructor(size, radius, retries, dimensions, firstPoint) {
+        this.size = { ...size };
+        this.radius = radius;
+        this.retries = retries;
+        this.dimensions = dimensions;
+        this.cellSize = Math.floor(this.radius / Math.sqrt(this.dimensions));
+        this.cols = Math.floor(this.size.width / this.cellSize);
+        this.rows = Math.floor(this.size.height / this.cellSize);
+        this.points = [];
+        this.active = [];
+        this.grid = [];
+        this.firstPoint = firstPoint ? { ...firstPoint } : undefined;
+        this.reset();
+    }
+    addPoint(inputPoint) {
+        const point = {
+            position: { ...inputPoint },
+            gridPosition: {
+                x: Math.floor(inputPoint.x / this.cellSize),
+                y: Math.floor(inputPoint.y / this.cellSize),
+            },
+        }, pointIndex = this.points.length;
+        this.points.push(point);
+        this.grid[point.gridPosition.y][point.gridPosition.x] = pointIndex;
+        this.active.push(pointIndex);
+    }
+    getRandom(min, max) {
+        return Math.floor((0, engine_1.getRandom)() * (max - min)) + min;
+    }
+    initialiseGrid() {
+        for (let y = 0; y <= this.rows; y++) {
+            this.grid[y] = [];
+            for (let x = 0; x <= this.cols; x++) {
+                this.grid[y][x] = -1;
+            }
+        }
+    }
+    reset() {
+        this.points = [];
+        this.active = [];
+        this.grid = [];
+        this.initialiseGrid();
+        if (this.firstPoint) {
+            this.addPoint(this.firstPoint);
+        }
+        else {
+            const minCoordinate = 0;
+            this.addPoint({
+                x: this.getRandom(minCoordinate, this.size.width),
+                y: this.getRandom(minCoordinate, this.size.height),
+            });
+        }
+    }
+    async run() {
+        this.reset();
+        const minCount = 0, step = 1;
+        while (this.active.length > minCount) {
+            await this.steps(step);
+        }
+    }
+    async steps(steps) {
+        const minCount = 0;
+        for (let i = 0; i < steps; i++) {
+            if (this.active.length <= minCount) {
+                continue;
+            }
+            await this._step();
+        }
+    }
+    _getNewPoint(currentPoint, tries) {
+        const minCoordinate = 0, gridMinValue = 0, maxNeighbourIndex = 1, newAngle = tries * (doublePI / this.retries), newDist = this.getRandom(this.radius, this.radius * double), offset = {
+            x: Math.cos(newAngle) * newDist,
+            y: Math.sin(newAngle) * newDist,
+        }, newPoint = {
+            x: Math.floor(currentPoint.position.x + offset.x),
+            y: Math.floor(currentPoint.position.y + offset.y),
+        }, newGridCoords = {
+            x: Math.floor(newPoint.x / this.cellSize),
+            y: Math.floor(newPoint.y / this.cellSize),
+        };
+        if (newPoint.x > minCoordinate &&
+            newPoint.x < this.size.width &&
+            newPoint.y > minCoordinate &&
+            newPoint.y < this.size.height) {
+            if (this.grid[newGridCoords.y][newGridCoords.x] < gridMinValue) {
+                for (let i = -1; i <= maxNeighbourIndex; i++) {
+                    for (let j = -1; j <= maxNeighbourIndex; j++) {
+                        const neighbourGrid = {
+                            x: newGridCoords.x + j,
+                            y: newGridCoords.y + i,
+                        };
+                        if (neighbourGrid.x >= minCoordinate &&
+                            neighbourGrid.y >= minCoordinate &&
+                            neighbourGrid.x < this.cols &&
+                            neighbourGrid.y < this.rows &&
+                            (neighbourGrid.x !== newGridCoords.x || neighbourGrid.y !== newGridCoords.y)) {
+                            if (this.grid[neighbourGrid.y][neighbourGrid.x] >= gridMinValue) {
+                                const neighbourIndex = this.grid[neighbourGrid.y][neighbourGrid.x], neighbour = this.points[neighbourIndex], dist = (0, engine_1.getDistance)(newPoint, neighbour.position);
+                                if (dist < this.radius) {
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            return;
+        }
+        return newPoint;
+    }
+    async _step() {
+        const minCount = 0, randomActive = this.getRandom(minCount, this.active.length);
+        return new Promise((resolve) => {
+            let foundNewPoint = false;
+            for (let tries = 0; tries < this.retries; tries++) {
+                const newPoint = this._getNewPoint(this.points[this.active[randomActive]], tries);
+                if (newPoint) {
+                    foundNewPoint = true;
+                    this.addPoint(newPoint);
+                    break;
+                }
+            }
+            if (!foundNewPoint) {
+                const deleteCount = 1;
+                this.active.splice(randomActive, deleteCount);
+            }
+            resolve();
+        });
+    }
+}
+exports.PoissonDisc = PoissonDisc;

package/cjs/PoissonInstance.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoissonInstance = void 0;
+const engine_1 = require("@tsparticles/engine");
+const PoissonDisc_js_1 = require("./PoissonDisc.js");
+class PoissonInstance {
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+        this._currentIndex = 0;
+    }
+    async init() {
+        await this._initData();
+    }
+    particlePosition(position) {
+        const container = this._container, options = container.actualOptions.poisson;
+        if (!this.poissonDisc || !(options?.enable ?? false) || this._currentIndex >= this.poissonDisc.points.length) {
+            return;
+        }
+        return position ?? this.poissonDisc?.points[this._currentIndex++]?.position;
+    }
+    resize() {
+        const container = this._container, options = container.actualOptions.poisson;
+        if (!(options?.enable ?? false)) {
+            return;
+        }
+        if (this.redrawTimeout) {
+            clearTimeout(this.redrawTimeout);
+        }
+        const timeout = 250;
+        this.redrawTimeout = window.setTimeout(() => {
+            void (async () => {
+                await this._initData();
+                await container.particles.redraw();
+            })();
+        }, timeout);
+    }
+    stop() {
+        delete this.poissonDisc;
+    }
+    async _initData() {
+        const container = this._container, poissonOptions = container.actualOptions.poisson, particlesOptions = container.actualOptions.particles, canvasSize = container.canvas.size, pixelRatio = container.retina.pixelRatio;
+        if (!poissonOptions?.enable) {
+            return;
+        }
+        this._currentIndex = 0;
+        this.poissonDisc = new PoissonDisc_js_1.PoissonDisc(canvasSize, poissonOptions.radius
+            ? poissonOptions.radius * pixelRatio
+            : Math.max((0, engine_1.getRangeMax)(particlesOptions.size.value) * pixelRatio, Math.sqrt((canvasSize.width * canvasSize.height) / particlesOptions.number.value)), poissonOptions.retries, poissonOptions.dimensions);
+        const noSteps = 0;
+        if (poissonOptions.steps > noSteps) {
+            await this.poissonDisc.steps(poissonOptions.steps);
+        }
+        else {
+            await this.poissonDisc.run();
+        }
+    }
+}
+exports.PoissonInstance = PoissonInstance;

package/cjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadPoissonDiscPlugin = void 0;
+const Poisson_js_1 = require("./Options/Classes/Poisson.js");
+const PoissonInstance_js_1 = require("./PoissonInstance.js");
+class PoissonDiscPlugin {
+    constructor(engine) {
+        this.id = "poisson";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return new PoissonInstance_js_1.PoissonInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let poissonOptions = options.poisson;
+        if (poissonOptions?.load === undefined) {
+            options.poisson = poissonOptions = new Poisson_js_1.Poisson();
+        }
+        poissonOptions.load(source?.poisson);
+    }
+    needsPlugin(options) {
+        return options?.poisson?.enable ?? false;
+    }
+}
+async function loadPoissonDiscPlugin(engine, refresh = true) {
+    await engine.addPlugin(new PoissonDiscPlugin(engine), refresh);
+}
+exports.loadPoissonDiscPlugin = loadPoissonDiscPlugin;

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/cjs/types.js

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

package/esm/Interfaces/IPoissonPoint.js

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

package/esm/Options/Classes/Poisson.js

@@ -0,0 +1,26 @@
+export class Poisson {
+    constructor() {
+        this.enable = false;
+        this.dimensions = 2;
+        this.radius = 0;
+        this.retries = 30;
+        this.steps = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.dimensions !== undefined) {
+            this.dimensions = data.dimensions;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+        if (data.retries !== undefined) {
+            this.retries = data.retries;
+        }
+    }
+}

package/esm/Options/Interfaces/IPoisson.js

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