@tsparticles/path-perlin-noise 3.0.0-alpha.0

package/esm/PerlinNoiseGenerator.js

@@ -0,0 +1,99 @@
+import { Vector, getRandom } from "@tsparticles/engine";
+import { PerlinNoise } from "./PerlinNoise";
+export class PerlinNoiseGenerator {
+    constructor() {
+        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,
+        };
+    }
+    generate(particle) {
+        const pos = particle.getPosition(), point = {
+            x: Math.max(Math.floor(pos.x / this.options.size), 0),
+            y: Math.max(Math.floor(pos.y / this.options.size), 0),
+        }, v = Vector.origin;
+        if (!this.field || !this.field[point.x] || !this.field[point.x][point.y]) {
+            return v;
+        }
+        v.length = this.field[point.x][point.y][1];
+        v.angle = this.field[point.x][point.y][0];
+        return v;
+    }
+    init(container) {
+        this.container = container;
+        this.setup(container);
+    }
+    reset() {
+    }
+    update() {
+        if (!this.container) {
+            return;
+        }
+        this.calculateField();
+        this.noiseZ += this.options.increment;
+        if (this.options.draw) {
+            this.container.canvas.draw((ctx) => this.drawField(ctx));
+        }
+    }
+    calculateField() {
+        for (let x = 0; x < this.options.columns; x++) {
+            for (let y = 0; y < this.options.rows; y++) {
+                const angle = this.noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
+                const length = this.noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
+                this.field[x][y][0] = angle;
+                this.field[x][y][1] = length;
+            }
+        }
+    }
+    drawField(ctx) {
+        for (let x = 0; x < this.options.columns; x++) {
+            for (let y = 0; y < this.options.rows; y++) {
+                const angle = this.field[x][y][0];
+                const length = this.field[x][y][1];
+                ctx.setTransform(1, 0, 0, 1, x * this.options.size, y * this.options.size);
+                ctx.rotate(angle);
+                ctx.strokeStyle = "white";
+                ctx.beginPath();
+                ctx.moveTo(0, 0);
+                ctx.lineTo(0, this.options.size * length);
+                ctx.stroke();
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+            }
+        }
+    }
+    initField() {
+        this.field = new Array(this.options.columns);
+        for (let x = 0; x < this.options.columns; x++) {
+            this.field[x] = new Array(this.options.rows);
+            for (let y = 0; y < this.options.rows; y++) {
+                this.field[x][y] = [0, 0];
+            }
+        }
+    }
+    resetField(container) {
+        var _a;
+        const sourceOptions = container.actualOptions.particles.move.path.options;
+        this.options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
+        this.options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
+        this.options.draw = !!sourceOptions.draw;
+        this.options.width = container.canvas.size.width;
+        this.options.height = container.canvas.size.height;
+        this.noiseGen.seed((_a = sourceOptions.seed) !== null && _a !== void 0 ? _a : getRandom());
+        this.options.columns = Math.floor(this.options.width / this.options.size) + 1;
+        this.options.rows = Math.floor(this.options.height / this.options.size) + 1;
+        this.initField();
+    }
+    setup(container) {
+        this.noiseZ = 0;
+        this.resetField(container);
+        window.addEventListener("resize", () => this.resetField(container));
+    }
+}

package/esm/index.js

@@ -0,0 +1,5 @@
+import { PerlinNoiseGenerator } from "./PerlinNoiseGenerator";
+export const perlinNoisePathName = "perlinNoise";
+export function loadPerlinNoisePath(engine) {
+    engine.addPathGenerator(perlinNoisePathName, new PerlinNoiseGenerator());
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@tsparticles/path-perlin-noise",
+  "version": "3.0.0-alpha.0",
+  "description": "tsParticles perlin noise path",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "paths/perlinNoise"
+  },
+  "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",
+    "@tsparticles/path"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.path.perlin.noise.min.js",
+  "unpkg": "tsparticles.path.perlin.noise.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-alpha.0"
+  }
+}