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

package/browser/IFactorOffsetValues.js

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

package/browser/INoiseFieldOptions.js

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

package/browser/INoiseGenerator.js

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

package/browser/NoiseFieldGenerator.js

@@ -0,0 +1,164 @@
+import { Vector, deepExtend, getRandom, } from "@tsparticles/engine";
+const originCoordinate = 0, firstIndex = 0, empty = 0, optionsSizeOffset = 1, transformDefaultValues = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+    e: 0,
+    f: 0,
+}, double = 2, doublePI = Math.PI * double, defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    layers: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+        z: 40000,
+    },
+};
+export class NoiseFieldGenerator {
+    constructor(noiseGen) {
+        this.noiseGen = noiseGen;
+        this.field = [];
+        this.noiseW = 0;
+        this.options = deepExtend({}, defaultOptions);
+    }
+    generate(particle) {
+        const pos = particle.getPosition(), { size } = this.options, point = {
+            x: Math.max(Math.floor(pos.x / size), originCoordinate),
+            y: Math.max(Math.floor(pos.y / size), originCoordinate),
+            z: Math.max(Math.floor(pos.z / size), originCoordinate),
+        }, { field } = this, fieldPoint = field[point.x]?.[point.y]?.[point.z];
+        return fieldPoint ? fieldPoint.copy() : Vector.origin;
+    }
+    init(container) {
+        this.container = container;
+        this._setup();
+    }
+    reset() {
+    }
+    update() {
+        if (!this.container) {
+            return;
+        }
+        this._calculateField();
+        this.noiseW += this.options.increment;
+        if (!this.options.draw) {
+            return;
+        }
+        this.container.canvas.draw(ctx => {
+            this._drawField(ctx);
+        });
+    }
+    _calculateField() {
+        const { field, noiseGen, options, noiseW } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                for (let z = 0; z < options.layers; z++) {
+                    const cell = yColumn[z];
+                    if (!cell) {
+                        continue;
+                    }
+                    cell.length = noiseGen.noise4d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, z * lengthFactor + options.offset.z, noiseW);
+                    cell.angle = noiseGen.noise4d(x * angleFactor, y * angleFactor, z * angleFactor, noiseW) * doublePI;
+                }
+            }
+        }
+    }
+    _drawField(ctx) {
+        const { field, options } = this;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                const cell = yColumn[firstIndex];
+                if (!cell) {
+                    continue;
+                }
+                const { angle, length } = cell;
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, x * this.options.size, y * this.options.size);
+                ctx.rotate(angle);
+                ctx.strokeStyle = "white";
+                ctx.beginPath();
+                ctx.moveTo(originCoordinate, originCoordinate);
+                ctx.lineTo(originCoordinate, this.options.size * length);
+                ctx.stroke();
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, transformDefaultValues.e, transformDefaultValues.f);
+            }
+        }
+    }
+    _initField() {
+        const { columns, rows, layers } = this.options;
+        this.field = new Array(columns);
+        for (let x = 0; x < columns; x++) {
+            const newX = new Array(rows);
+            for (let y = 0; y < rows; y++) {
+                const newY = new Array(layers);
+                for (let z = 0; z < layers; z++) {
+                    newY[z] = Vector.origin;
+                }
+                newX[y] = newY;
+            }
+            this.field[x] = newX;
+        }
+    }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        options.size =
+            sourceOptions["size"] > empty ? sourceOptions["size"] : defaultOptions.size;
+        options.increment =
+            sourceOptions["increment"] > empty
+                ? sourceOptions["increment"]
+                : defaultOptions.increment;
+        options.draw = !!sourceOptions["draw"];
+        const offset = sourceOptions["offset"];
+        options.offset.x = offset?.x ?? defaultOptions.offset.x;
+        options.offset.y = offset?.y ?? defaultOptions.offset.y;
+        options.offset.z = offset?.z ?? defaultOptions.offset.z;
+        const factor = sourceOptions["factor"];
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.seed = sourceOptions["seed"];
+        this.noiseGen.seed(options.seed ?? getRandom());
+        options.columns = Math.floor(options.width / options.size) + optionsSizeOffset;
+        options.rows = Math.floor(options.height / options.size) + optionsSizeOffset;
+        options.layers = Math.floor(container.zLayers / options.size) + optionsSizeOffset;
+        this._initField();
+    }
+    _setup() {
+        this.noiseW = 0;
+        this._resetField();
+        addEventListener("resize", () => {
+            this._resetField();
+        });
+    }
+}

package/browser/index.js

@@ -0,0 +1 @@
+export { NoiseFieldGenerator } from "./NoiseFieldGenerator.js";

package/browser/package.json

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

package/cjs/IFactorOffsetValues.js

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

package/cjs/INoiseFieldOptions.js

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

package/cjs/INoiseGenerator.js

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

package/cjs/NoiseFieldGenerator.js

@@ -0,0 +1,164 @@
+import { Vector, deepExtend, getRandom, } from "@tsparticles/engine";
+const originCoordinate = 0, firstIndex = 0, empty = 0, optionsSizeOffset = 1, transformDefaultValues = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+    e: 0,
+    f: 0,
+}, double = 2, doublePI = Math.PI * double, defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    layers: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+        z: 40000,
+    },
+};
+export class NoiseFieldGenerator {
+    constructor(noiseGen) {
+        this.noiseGen = noiseGen;
+        this.field = [];
+        this.noiseW = 0;
+        this.options = deepExtend({}, defaultOptions);
+    }
+    generate(particle) {
+        const pos = particle.getPosition(), { size } = this.options, point = {
+            x: Math.max(Math.floor(pos.x / size), originCoordinate),
+            y: Math.max(Math.floor(pos.y / size), originCoordinate),
+            z: Math.max(Math.floor(pos.z / size), originCoordinate),
+        }, { field } = this, fieldPoint = field[point.x]?.[point.y]?.[point.z];
+        return fieldPoint ? fieldPoint.copy() : Vector.origin;
+    }
+    init(container) {
+        this.container = container;
+        this._setup();
+    }
+    reset() {
+    }
+    update() {
+        if (!this.container) {
+            return;
+        }
+        this._calculateField();
+        this.noiseW += this.options.increment;
+        if (!this.options.draw) {
+            return;
+        }
+        this.container.canvas.draw(ctx => {
+            this._drawField(ctx);
+        });
+    }
+    _calculateField() {
+        const { field, noiseGen, options, noiseW } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                for (let z = 0; z < options.layers; z++) {
+                    const cell = yColumn[z];
+                    if (!cell) {
+                        continue;
+                    }
+                    cell.length = noiseGen.noise4d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, z * lengthFactor + options.offset.z, noiseW);
+                    cell.angle = noiseGen.noise4d(x * angleFactor, y * angleFactor, z * angleFactor, noiseW) * doublePI;
+                }
+            }
+        }
+    }
+    _drawField(ctx) {
+        const { field, options } = this;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                const cell = yColumn[firstIndex];
+                if (!cell) {
+                    continue;
+                }
+                const { angle, length } = cell;
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, x * this.options.size, y * this.options.size);
+                ctx.rotate(angle);
+                ctx.strokeStyle = "white";
+                ctx.beginPath();
+                ctx.moveTo(originCoordinate, originCoordinate);
+                ctx.lineTo(originCoordinate, this.options.size * length);
+                ctx.stroke();
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, transformDefaultValues.e, transformDefaultValues.f);
+            }
+        }
+    }
+    _initField() {
+        const { columns, rows, layers } = this.options;
+        this.field = new Array(columns);
+        for (let x = 0; x < columns; x++) {
+            const newX = new Array(rows);
+            for (let y = 0; y < rows; y++) {
+                const newY = new Array(layers);
+                for (let z = 0; z < layers; z++) {
+                    newY[z] = Vector.origin;
+                }
+                newX[y] = newY;
+            }
+            this.field[x] = newX;
+        }
+    }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        options.size =
+            sourceOptions["size"] > empty ? sourceOptions["size"] : defaultOptions.size;
+        options.increment =
+            sourceOptions["increment"] > empty
+                ? sourceOptions["increment"]
+                : defaultOptions.increment;
+        options.draw = !!sourceOptions["draw"];
+        const offset = sourceOptions["offset"];
+        options.offset.x = offset?.x ?? defaultOptions.offset.x;
+        options.offset.y = offset?.y ?? defaultOptions.offset.y;
+        options.offset.z = offset?.z ?? defaultOptions.offset.z;
+        const factor = sourceOptions["factor"];
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.seed = sourceOptions["seed"];
+        this.noiseGen.seed(options.seed ?? getRandom());
+        options.columns = Math.floor(options.width / options.size) + optionsSizeOffset;
+        options.rows = Math.floor(options.height / options.size) + optionsSizeOffset;
+        options.layers = Math.floor(container.zLayers / options.size) + optionsSizeOffset;
+        this._initField();
+    }
+    _setup() {
+        this.noiseW = 0;
+        this._resetField();
+        addEventListener("resize", () => {
+            this._resetField();
+        });
+    }
+}

package/cjs/index.js

@@ -0,0 +1 @@
+export { NoiseFieldGenerator } from "./NoiseFieldGenerator.js";

package/cjs/package.json

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

package/esm/IFactorOffsetValues.js

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

package/esm/INoiseFieldOptions.js

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

package/esm/INoiseGenerator.js

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

package/esm/NoiseFieldGenerator.js

@@ -0,0 +1,164 @@
+import { Vector, deepExtend, getRandom, } from "@tsparticles/engine";
+const originCoordinate = 0, firstIndex = 0, empty = 0, optionsSizeOffset = 1, transformDefaultValues = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+    e: 0,
+    f: 0,
+}, double = 2, doublePI = Math.PI * double, defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    layers: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+        z: 40000,
+    },
+};
+export class NoiseFieldGenerator {
+    constructor(noiseGen) {
+        this.noiseGen = noiseGen;
+        this.field = [];
+        this.noiseW = 0;
+        this.options = deepExtend({}, defaultOptions);
+    }
+    generate(particle) {
+        const pos = particle.getPosition(), { size } = this.options, point = {
+            x: Math.max(Math.floor(pos.x / size), originCoordinate),
+            y: Math.max(Math.floor(pos.y / size), originCoordinate),
+            z: Math.max(Math.floor(pos.z / size), originCoordinate),
+        }, { field } = this, fieldPoint = field[point.x]?.[point.y]?.[point.z];
+        return fieldPoint ? fieldPoint.copy() : Vector.origin;
+    }
+    init(container) {
+        this.container = container;
+        this._setup();
+    }
+    reset() {
+    }
+    update() {
+        if (!this.container) {
+            return;
+        }
+        this._calculateField();
+        this.noiseW += this.options.increment;
+        if (!this.options.draw) {
+            return;
+        }
+        this.container.canvas.draw(ctx => {
+            this._drawField(ctx);
+        });
+    }
+    _calculateField() {
+        const { field, noiseGen, options, noiseW } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                for (let z = 0; z < options.layers; z++) {
+                    const cell = yColumn[z];
+                    if (!cell) {
+                        continue;
+                    }
+                    cell.length = noiseGen.noise4d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, z * lengthFactor + options.offset.z, noiseW);
+                    cell.angle = noiseGen.noise4d(x * angleFactor, y * angleFactor, z * angleFactor, noiseW) * doublePI;
+                }
+            }
+        }
+    }
+    _drawField(ctx) {
+        const { field, options } = this;
+        for (let x = 0; x < options.columns; x++) {
+            const xColumn = field[x];
+            if (!xColumn) {
+                continue;
+            }
+            for (let y = 0; y < options.rows; y++) {
+                const yColumn = xColumn[y];
+                if (!yColumn) {
+                    continue;
+                }
+                const cell = yColumn[firstIndex];
+                if (!cell) {
+                    continue;
+                }
+                const { angle, length } = cell;
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, x * this.options.size, y * this.options.size);
+                ctx.rotate(angle);
+                ctx.strokeStyle = "white";
+                ctx.beginPath();
+                ctx.moveTo(originCoordinate, originCoordinate);
+                ctx.lineTo(originCoordinate, this.options.size * length);
+                ctx.stroke();
+                ctx.setTransform(transformDefaultValues.a, transformDefaultValues.b, transformDefaultValues.c, transformDefaultValues.d, transformDefaultValues.e, transformDefaultValues.f);
+            }
+        }
+    }
+    _initField() {
+        const { columns, rows, layers } = this.options;
+        this.field = new Array(columns);
+        for (let x = 0; x < columns; x++) {
+            const newX = new Array(rows);
+            for (let y = 0; y < rows; y++) {
+                const newY = new Array(layers);
+                for (let z = 0; z < layers; z++) {
+                    newY[z] = Vector.origin;
+                }
+                newX[y] = newY;
+            }
+            this.field[x] = newX;
+        }
+    }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        options.size =
+            sourceOptions["size"] > empty ? sourceOptions["size"] : defaultOptions.size;
+        options.increment =
+            sourceOptions["increment"] > empty
+                ? sourceOptions["increment"]
+                : defaultOptions.increment;
+        options.draw = !!sourceOptions["draw"];
+        const offset = sourceOptions["offset"];
+        options.offset.x = offset?.x ?? defaultOptions.offset.x;
+        options.offset.y = offset?.y ?? defaultOptions.offset.y;
+        options.offset.z = offset?.z ?? defaultOptions.offset.z;
+        const factor = sourceOptions["factor"];
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.seed = sourceOptions["seed"];
+        this.noiseGen.seed(options.seed ?? getRandom());
+        options.columns = Math.floor(options.width / options.size) + optionsSizeOffset;
+        options.rows = Math.floor(options.height / options.size) + optionsSizeOffset;
+        options.layers = Math.floor(container.zLayers / options.size) + optionsSizeOffset;
+        this._initField();
+    }
+    _setup() {
+        this.noiseW = 0;
+        this._resetField();
+        addEventListener("resize", () => {
+            this._resetField();
+        });
+    }
+}

package/esm/index.js

@@ -0,0 +1 @@
+export { NoiseFieldGenerator } from "./NoiseFieldGenerator.js";

package/esm/package.json

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