@tsparticles/path-perlin-noise 3.0.0-beta.3 → 3.0.0-beta.4

package/browser/IFactorOffsetValues.js

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

package/browser/PerlinNoiseGenerator.js

@@ -1,15 +1,32 @@
-import { Vector, getRandom } from "@tsparticles/engine";
-import { PerlinNoise } from "./PerlinNoise.js";
+import { Vector, deepExtend, getRandom, } from "@tsparticles/engine";
+import { PerlinNoise } from "@tsparticles/perlin-noise";
+const defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+    },
+};
 export class PerlinNoiseGenerator {
     constructor() {
         this._calculateField = () => {
-            const { field, noiseGen, options } = this;
+            const { field, noiseGen, options } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
             for (let x = 0; x < options.columns; x++) {
                 const column = field[x];
                 for (let y = 0; y < options.rows; y++) {
                     const cell = column[y];
-                    cell.length = noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
-                    cell.angle = noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
+                    cell.length = noiseGen.noise3d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, this.noiseZ);
+                    cell.angle = noiseGen.noise3d(x * angleFactor, y * angleFactor, this.noiseZ) * Math.PI * 2;
                 }
             }
         };
@@ -40,35 +57,10 @@ export class PerlinNoiseGenerator {
                 }
             }
         };
-        this._resetField = (container) => {
-            const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
-            options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
-            options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
-            options.draw = !!sourceOptions.draw;
-            options.width = container.canvas.size.width;
-            options.height = container.canvas.size.height;
-            this.noiseGen.seed(sourceOptions.seed ?? getRandom());
-            options.columns = Math.floor(this.options.width / this.options.size) + 1;
-            options.rows = Math.floor(this.options.height / this.options.size) + 1;
-            this._initField();
-        };
-        this._setup = (container) => {
-            this.noiseZ = 0;
-            this._resetField(container);
-            window.addEventListener("resize", () => this._resetField(container));
-        };
         this.noiseGen = new PerlinNoise();
         this.field = [];
         this.noiseZ = 0;
-        this.options = {
-            draw: false,
-            size: 20,
-            increment: 0.004,
-            columns: 0,
-            rows: 0,
-            width: 0,
-            height: 0,
-        };
+        this.options = deepExtend({}, defaultOptions);
     }
     generate(particle) {
         const pos = particle.getPosition(), { size } = this.options, point = {
@@ -79,7 +71,7 @@ export class PerlinNoiseGenerator {
     }
     init(container) {
         this.container = container;
-        this._setup(container);
+        this._setup();
     }
     reset() {
     }
@@ -93,4 +85,33 @@ export class PerlinNoiseGenerator {
             this.container.canvas.draw((ctx) => this._drawField(ctx));
         }
     }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.size = sourceOptions.size > 0 ? sourceOptions.size : defaultOptions.size;
+        options.increment =
+            sourceOptions.increment > 0 ? 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;
+        const factor = sourceOptions.factor;
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        this.options.seed = sourceOptions.seed;
+        this.noiseGen.seed(this.options.seed ?? getRandom());
+        options.columns = Math.floor(this.options.width / this.options.size) + 1;
+        options.rows = Math.floor(this.options.height / this.options.size) + 1;
+        this._initField();
+    }
+    _setup() {
+        this.noiseZ = 0;
+        this._resetField();
+        window.addEventListener("resize", () => this._resetField());
+    }
 }

package/cjs/IFactorOffsetValues.js

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

package/cjs/PerlinNoiseGenerator.js

@@ -2,17 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PerlinNoiseGenerator = void 0;
 const engine_1 = require("@tsparticles/engine");
-const PerlinNoise_js_1 = require("./PerlinNoise.js");
+const perlin_noise_1 = require("@tsparticles/perlin-noise");
+const defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+    },
+};
 class PerlinNoiseGenerator {
     constructor() {
         this._calculateField = () => {
-            const { field, noiseGen, options } = this;
+            const { field, noiseGen, options } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
             for (let x = 0; x < options.columns; x++) {
                 const column = field[x];
                 for (let y = 0; y < options.rows; y++) {
                     const cell = column[y];
-                    cell.length = noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
-                    cell.angle = noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
+                    cell.length = noiseGen.noise3d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, this.noiseZ);
+                    cell.angle = noiseGen.noise3d(x * angleFactor, y * angleFactor, this.noiseZ) * Math.PI * 2;
                 }
             }
         };
@@ -43,35 +60,10 @@ class PerlinNoiseGenerator {
                 }
             }
         };
-        this._resetField = (container) => {
-            const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
-            options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
-            options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
-            options.draw = !!sourceOptions.draw;
-            options.width = container.canvas.size.width;
-            options.height = container.canvas.size.height;
-            this.noiseGen.seed(sourceOptions.seed ?? (0, engine_1.getRandom)());
-            options.columns = Math.floor(this.options.width / this.options.size) + 1;
-            options.rows = Math.floor(this.options.height / this.options.size) + 1;
-            this._initField();
-        };
-        this._setup = (container) => {
-            this.noiseZ = 0;
-            this._resetField(container);
-            window.addEventListener("resize", () => this._resetField(container));
-        };
-        this.noiseGen = new PerlinNoise_js_1.PerlinNoise();
+        this.noiseGen = new perlin_noise_1.PerlinNoise();
         this.field = [];
         this.noiseZ = 0;
-        this.options = {
-            draw: false,
-            size: 20,
-            increment: 0.004,
-            columns: 0,
-            rows: 0,
-            width: 0,
-            height: 0,
-        };
+        this.options = (0, engine_1.deepExtend)({}, defaultOptions);
     }
     generate(particle) {
         const pos = particle.getPosition(), { size } = this.options, point = {
@@ -82,7 +74,7 @@ class PerlinNoiseGenerator {
     }
     init(container) {
         this.container = container;
-        this._setup(container);
+        this._setup();
     }
     reset() {
     }
@@ -96,5 +88,34 @@ class PerlinNoiseGenerator {
             this.container.canvas.draw((ctx) => this._drawField(ctx));
         }
     }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.size = sourceOptions.size > 0 ? sourceOptions.size : defaultOptions.size;
+        options.increment =
+            sourceOptions.increment > 0 ? 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;
+        const factor = sourceOptions.factor;
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        this.options.seed = sourceOptions.seed;
+        this.noiseGen.seed(this.options.seed ?? (0, engine_1.getRandom)());
+        options.columns = Math.floor(this.options.width / this.options.size) + 1;
+        options.rows = Math.floor(this.options.height / this.options.size) + 1;
+        this._initField();
+    }
+    _setup() {
+        this.noiseZ = 0;
+        this._resetField();
+        window.addEventListener("resize", () => this._resetField());
+    }
 }
 exports.PerlinNoiseGenerator = PerlinNoiseGenerator;

package/esm/IFactorOffsetValues.js

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

package/esm/PerlinNoiseGenerator.js

@@ -1,15 +1,32 @@
-import { Vector, getRandom } from "@tsparticles/engine";
-import { PerlinNoise } from "./PerlinNoise.js";
+import { Vector, deepExtend, getRandom, } from "@tsparticles/engine";
+import { PerlinNoise } from "@tsparticles/perlin-noise";
+const defaultOptions = {
+    draw: false,
+    size: 20,
+    increment: 0.004,
+    columns: 0,
+    rows: 0,
+    width: 0,
+    height: 0,
+    factor: {
+        angle: 0.02,
+        length: 0.01,
+    },
+    offset: {
+        x: 40000,
+        y: 40000,
+    },
+};
 export class PerlinNoiseGenerator {
     constructor() {
         this._calculateField = () => {
-            const { field, noiseGen, options } = this;
+            const { field, noiseGen, options } = this, lengthFactor = options.factor.length, angleFactor = options.factor.angle;
             for (let x = 0; x < options.columns; x++) {
                 const column = field[x];
                 for (let y = 0; y < options.rows; y++) {
                     const cell = column[y];
-                    cell.length = noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
-                    cell.angle = noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
+                    cell.length = noiseGen.noise3d(x * lengthFactor + options.offset.x, y * lengthFactor + options.offset.y, this.noiseZ);
+                    cell.angle = noiseGen.noise3d(x * angleFactor, y * angleFactor, this.noiseZ) * Math.PI * 2;
                 }
             }
         };
@@ -40,35 +57,10 @@ export class PerlinNoiseGenerator {
                 }
             }
         };
-        this._resetField = (container) => {
-            const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
-            options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
-            options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
-            options.draw = !!sourceOptions.draw;
-            options.width = container.canvas.size.width;
-            options.height = container.canvas.size.height;
-            this.noiseGen.seed(sourceOptions.seed ?? getRandom());
-            options.columns = Math.floor(this.options.width / this.options.size) + 1;
-            options.rows = Math.floor(this.options.height / this.options.size) + 1;
-            this._initField();
-        };
-        this._setup = (container) => {
-            this.noiseZ = 0;
-            this._resetField(container);
-            window.addEventListener("resize", () => this._resetField(container));
-        };
         this.noiseGen = new PerlinNoise();
         this.field = [];
         this.noiseZ = 0;
-        this.options = {
-            draw: false,
-            size: 20,
-            increment: 0.004,
-            columns: 0,
-            rows: 0,
-            width: 0,
-            height: 0,
-        };
+        this.options = deepExtend({}, defaultOptions);
     }
     generate(particle) {
         const pos = particle.getPosition(), { size } = this.options, point = {
@@ -79,7 +71,7 @@ export class PerlinNoiseGenerator {
     }
     init(container) {
         this.container = container;
-        this._setup(container);
+        this._setup();
     }
     reset() {
     }
@@ -93,4 +85,33 @@ export class PerlinNoiseGenerator {
             this.container.canvas.draw((ctx) => this._drawField(ctx));
         }
     }
+    _resetField() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
+        options.size = sourceOptions.size > 0 ? sourceOptions.size : defaultOptions.size;
+        options.increment =
+            sourceOptions.increment > 0 ? 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;
+        const factor = sourceOptions.factor;
+        options.factor.angle = factor?.angle ?? defaultOptions.factor.angle;
+        options.factor.length = factor?.length ?? defaultOptions.factor.length;
+        options.width = container.canvas.size.width;
+        options.height = container.canvas.size.height;
+        this.options.seed = sourceOptions.seed;
+        this.noiseGen.seed(this.options.seed ?? getRandom());
+        options.columns = Math.floor(this.options.width / this.options.size) + 1;
+        options.rows = Math.floor(this.options.height / this.options.size) + 1;
+        this._initField();
+    }
+    _setup() {
+        this.noiseZ = 0;
+        this._resetField();
+        window.addEventListener("resize", () => this._resetField());
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/path-perlin-noise",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "description": "tsParticles perlin noise path",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -60,8 +60,8 @@
     "confettijs",
     "fireworksjs",
     "canvas-confetti",
-    "@tsparticles/plugin",
-    "@tsparticles/path"
+    "tsparticles-plugin",
+    "tsparticles-path"
   ],
   "publishConfig": {
     "access": "public"
@@ -104,6 +104,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-beta.3"
+    "@tsparticles/engine": "^3.0.0-beta.4",
+    "@tsparticles/perlin-noise": "^3.0.0-beta.4"
   }
 }