@tsparticles/path-perlin-noise 3.0.0-alpha.1 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -11
- package/browser/PerlinNoise.js +13 -24
- package/browser/PerlinNoiseGenerator.js +63 -66
- package/browser/index.js +2 -2
- package/cjs/PerlinNoise.js +13 -24
- package/cjs/PerlinNoiseGenerator.js +63 -66
- package/cjs/index.js +2 -2
- package/esm/PerlinNoise.js +13 -24
- package/esm/PerlinNoiseGenerator.js +63 -66
- package/esm/index.js +2 -2
- package/package.json +11 -6
- package/report.html +4 -4
- package/tsparticles.path.perlin.noise.js +102 -83
- package/tsparticles.path.perlin.noise.min.js +1 -1
- package/tsparticles.path.perlin.noise.min.js.LICENSE.txt +1 -8
- package/types/PerlinNoiseGenerator.d.ts +7 -8
- package/types/index.d.ts +1 -1
- package/umd/PerlinNoise.js +13 -24
- package/umd/PerlinNoiseGenerator.js +63 -66
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Perlin Noise Path
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/path-perlin-noise)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/path-perlin-noise)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/path-perlin-noise) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) path plugin for perlin noise movement.
|
|
10
10
|
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the path plugin lik
|
|
|
42
42
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
43
|
|
|
44
44
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
45
|
+
$ npm install @tsparticles/path-perlin-noise
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/path-perlin-noise
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Then you need to import it in the app, like this:
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadPerlinNoisePath } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadPerlinNoisePath } = require("@tsparticles/path-perlin-noise");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadPerlinNoisePath(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadPerlinNoisePath } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadPerlinNoisePath } from "@tsparticles/path-perlin-noise";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadPerlinNoisePath(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
package/browser/PerlinNoise.js
CHANGED
|
@@ -12,19 +12,18 @@ const grad3 = [
|
|
|
12
12
|
new Grad(0, -1, 1),
|
|
13
13
|
new Grad(0, 1, -1),
|
|
14
14
|
new Grad(0, -1, -1),
|
|
15
|
-
]
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
66, 215, 61, 156, 180,
|
|
15
|
+
], p = [
|
|
16
|
+
151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37,
|
|
17
|
+
240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177,
|
|
18
|
+
33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146,
|
|
19
|
+
158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25,
|
|
20
|
+
63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100,
|
|
21
|
+
109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206,
|
|
22
|
+
59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153,
|
|
23
|
+
101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246,
|
|
24
|
+
97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192,
|
|
25
|
+
214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114,
|
|
26
|
+
67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180,
|
|
28
27
|
];
|
|
29
28
|
const perm = new Array(512);
|
|
30
29
|
const gradP = new Array(512);
|
|
@@ -43,17 +42,7 @@ export class PerlinNoise {
|
|
|
43
42
|
X = X & 255;
|
|
44
43
|
Y = Y & 255;
|
|
45
44
|
Z = Z & 255;
|
|
46
|
-
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
|
|
47
|
-
const n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
|
|
48
|
-
const n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
|
|
49
|
-
const n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
|
|
50
|
-
const n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
|
|
51
|
-
const n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
|
|
52
|
-
const n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
|
|
53
|
-
const n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);
|
|
54
|
-
const u = fade(x);
|
|
55
|
-
const v = fade(y);
|
|
56
|
-
const w = fade(z);
|
|
45
|
+
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z), n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1), n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z), n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1), n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z), n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1), n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z), n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1), u = fade(x), v = fade(y), w = fade(z);
|
|
57
46
|
return lerp(lerp(lerp(n000, n100, u), lerp(n001, n101, u), w), lerp(lerp(n010, n110, u), lerp(n011, n111, u), w), v);
|
|
58
47
|
}
|
|
59
48
|
seed(inputSeed) {
|
|
@@ -2,6 +2,61 @@ import { Vector, getRandom } from "@tsparticles/engine";
|
|
|
2
2
|
import { PerlinNoise } from "./PerlinNoise";
|
|
3
3
|
export class PerlinNoiseGenerator {
|
|
4
4
|
constructor() {
|
|
5
|
+
this._calculateField = () => {
|
|
6
|
+
const { field, noiseGen, options } = this;
|
|
7
|
+
for (let x = 0; x < options.columns; x++) {
|
|
8
|
+
const column = field[x];
|
|
9
|
+
for (let y = 0; y < options.rows; y++) {
|
|
10
|
+
const cell = column[y];
|
|
11
|
+
cell.length = noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
|
|
12
|
+
cell.angle = noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
this._drawField = (ctx) => {
|
|
17
|
+
const { field, options } = this;
|
|
18
|
+
for (let x = 0; x < options.columns; x++) {
|
|
19
|
+
const column = field[x];
|
|
20
|
+
for (let y = 0; y < options.rows; y++) {
|
|
21
|
+
const cell = column[y], { angle, length } = cell;
|
|
22
|
+
ctx.setTransform(1, 0, 0, 1, x * this.options.size, y * this.options.size);
|
|
23
|
+
ctx.rotate(angle);
|
|
24
|
+
ctx.strokeStyle = "white";
|
|
25
|
+
ctx.beginPath();
|
|
26
|
+
ctx.moveTo(0, 0);
|
|
27
|
+
ctx.lineTo(0, this.options.size * length);
|
|
28
|
+
ctx.stroke();
|
|
29
|
+
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
this._initField = () => {
|
|
34
|
+
const { columns, rows } = this.options;
|
|
35
|
+
this.field = new Array(columns);
|
|
36
|
+
for (let x = 0; x < columns; x++) {
|
|
37
|
+
this.field[x] = new Array(rows);
|
|
38
|
+
for (let y = 0; y < rows; y++) {
|
|
39
|
+
this.field[x][y] = Vector.origin;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
this._resetField = (container) => {
|
|
44
|
+
const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
|
|
45
|
+
options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
|
|
46
|
+
options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
|
|
47
|
+
options.draw = !!sourceOptions.draw;
|
|
48
|
+
options.width = container.canvas.size.width;
|
|
49
|
+
options.height = container.canvas.size.height;
|
|
50
|
+
this.noiseGen.seed(sourceOptions.seed ?? getRandom());
|
|
51
|
+
options.columns = Math.floor(this.options.width / this.options.size) + 1;
|
|
52
|
+
options.rows = Math.floor(this.options.height / this.options.size) + 1;
|
|
53
|
+
this._initField();
|
|
54
|
+
};
|
|
55
|
+
this._setup = (container) => {
|
|
56
|
+
this.noiseZ = 0;
|
|
57
|
+
this._resetField(container);
|
|
58
|
+
window.addEventListener("resize", () => this._resetField(container));
|
|
59
|
+
};
|
|
5
60
|
this.noiseGen = new PerlinNoise();
|
|
6
61
|
this.field = [];
|
|
7
62
|
this.noiseZ = 0;
|
|
@@ -16,20 +71,15 @@ export class PerlinNoiseGenerator {
|
|
|
16
71
|
};
|
|
17
72
|
}
|
|
18
73
|
generate(particle) {
|
|
19
|
-
const pos = particle.getPosition(), point = {
|
|
20
|
-
x: Math.max(Math.floor(pos.x /
|
|
21
|
-
y: Math.max(Math.floor(pos.y /
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
return v;
|
|
25
|
-
}
|
|
26
|
-
v.length = this.field[point.x][point.y][1];
|
|
27
|
-
v.angle = this.field[point.x][point.y][0];
|
|
28
|
-
return v;
|
|
74
|
+
const pos = particle.getPosition(), { size } = this.options, point = {
|
|
75
|
+
x: Math.max(Math.floor(pos.x / size), 0),
|
|
76
|
+
y: Math.max(Math.floor(pos.y / size), 0),
|
|
77
|
+
}, { field } = this;
|
|
78
|
+
return !field || !field[point.x] || !field[point.x][point.y] ? Vector.origin : field[point.x][point.y].copy();
|
|
29
79
|
}
|
|
30
80
|
init(container) {
|
|
31
81
|
this.container = container;
|
|
32
|
-
this.
|
|
82
|
+
this._setup(container);
|
|
33
83
|
}
|
|
34
84
|
reset() {
|
|
35
85
|
}
|
|
@@ -37,63 +87,10 @@ export class PerlinNoiseGenerator {
|
|
|
37
87
|
if (!this.container) {
|
|
38
88
|
return;
|
|
39
89
|
}
|
|
40
|
-
this.
|
|
90
|
+
this._calculateField();
|
|
41
91
|
this.noiseZ += this.options.increment;
|
|
42
92
|
if (this.options.draw) {
|
|
43
|
-
this.container.canvas.draw((ctx) => this.
|
|
93
|
+
this.container.canvas.draw((ctx) => this._drawField(ctx));
|
|
44
94
|
}
|
|
45
95
|
}
|
|
46
|
-
calculateField() {
|
|
47
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
48
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
49
|
-
const angle = this.noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
|
|
50
|
-
const length = this.noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
|
|
51
|
-
this.field[x][y][0] = angle;
|
|
52
|
-
this.field[x][y][1] = length;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
drawField(ctx) {
|
|
57
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
58
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
59
|
-
const angle = this.field[x][y][0];
|
|
60
|
-
const length = this.field[x][y][1];
|
|
61
|
-
ctx.setTransform(1, 0, 0, 1, x * this.options.size, y * this.options.size);
|
|
62
|
-
ctx.rotate(angle);
|
|
63
|
-
ctx.strokeStyle = "white";
|
|
64
|
-
ctx.beginPath();
|
|
65
|
-
ctx.moveTo(0, 0);
|
|
66
|
-
ctx.lineTo(0, this.options.size * length);
|
|
67
|
-
ctx.stroke();
|
|
68
|
-
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
initField() {
|
|
73
|
-
this.field = new Array(this.options.columns);
|
|
74
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
75
|
-
this.field[x] = new Array(this.options.rows);
|
|
76
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
77
|
-
this.field[x][y] = [0, 0];
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
resetField(container) {
|
|
82
|
-
var _a;
|
|
83
|
-
const sourceOptions = container.actualOptions.particles.move.path.options;
|
|
84
|
-
this.options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
|
|
85
|
-
this.options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
|
|
86
|
-
this.options.draw = !!sourceOptions.draw;
|
|
87
|
-
this.options.width = container.canvas.size.width;
|
|
88
|
-
this.options.height = container.canvas.size.height;
|
|
89
|
-
this.noiseGen.seed((_a = sourceOptions.seed) !== null && _a !== void 0 ? _a : getRandom());
|
|
90
|
-
this.options.columns = Math.floor(this.options.width / this.options.size) + 1;
|
|
91
|
-
this.options.rows = Math.floor(this.options.height / this.options.size) + 1;
|
|
92
|
-
this.initField();
|
|
93
|
-
}
|
|
94
|
-
setup(container) {
|
|
95
|
-
this.noiseZ = 0;
|
|
96
|
-
this.resetField(container);
|
|
97
|
-
window.addEventListener("resize", () => this.resetField(container));
|
|
98
|
-
}
|
|
99
96
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PerlinNoiseGenerator } from "./PerlinNoiseGenerator";
|
|
2
2
|
export const perlinNoisePathName = "perlinNoise";
|
|
3
|
-
export function loadPerlinNoisePath(engine) {
|
|
4
|
-
engine.addPathGenerator(perlinNoisePathName, new PerlinNoiseGenerator());
|
|
3
|
+
export async function loadPerlinNoisePath(engine, refresh = true) {
|
|
4
|
+
await engine.addPathGenerator(perlinNoisePathName, new PerlinNoiseGenerator(), refresh);
|
|
5
5
|
}
|
package/cjs/PerlinNoise.js
CHANGED
|
@@ -15,19 +15,18 @@ const grad3 = [
|
|
|
15
15
|
new Grad_1.Grad(0, -1, 1),
|
|
16
16
|
new Grad_1.Grad(0, 1, -1),
|
|
17
17
|
new Grad_1.Grad(0, -1, -1),
|
|
18
|
-
]
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
66, 215, 61, 156, 180,
|
|
18
|
+
], p = [
|
|
19
|
+
151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37,
|
|
20
|
+
240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177,
|
|
21
|
+
33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146,
|
|
22
|
+
158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25,
|
|
23
|
+
63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100,
|
|
24
|
+
109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206,
|
|
25
|
+
59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153,
|
|
26
|
+
101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246,
|
|
27
|
+
97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192,
|
|
28
|
+
214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114,
|
|
29
|
+
67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180,
|
|
31
30
|
];
|
|
32
31
|
const perm = new Array(512);
|
|
33
32
|
const gradP = new Array(512);
|
|
@@ -46,17 +45,7 @@ class PerlinNoise {
|
|
|
46
45
|
X = X & 255;
|
|
47
46
|
Y = Y & 255;
|
|
48
47
|
Z = Z & 255;
|
|
49
|
-
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
|
|
50
|
-
const n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
|
|
51
|
-
const n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
|
|
52
|
-
const n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
|
|
53
|
-
const n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
|
|
54
|
-
const n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
|
|
55
|
-
const n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
|
|
56
|
-
const n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);
|
|
57
|
-
const u = fade(x);
|
|
58
|
-
const v = fade(y);
|
|
59
|
-
const w = fade(z);
|
|
48
|
+
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z), n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1), n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z), n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1), n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z), n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1), n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z), n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1), u = fade(x), v = fade(y), w = fade(z);
|
|
60
49
|
return lerp(lerp(lerp(n000, n100, u), lerp(n001, n101, u), w), lerp(lerp(n010, n110, u), lerp(n011, n111, u), w), v);
|
|
61
50
|
}
|
|
62
51
|
seed(inputSeed) {
|
|
@@ -5,6 +5,61 @@ const engine_1 = require("@tsparticles/engine");
|
|
|
5
5
|
const PerlinNoise_1 = require("./PerlinNoise");
|
|
6
6
|
class PerlinNoiseGenerator {
|
|
7
7
|
constructor() {
|
|
8
|
+
this._calculateField = () => {
|
|
9
|
+
const { field, noiseGen, options } = this;
|
|
10
|
+
for (let x = 0; x < options.columns; x++) {
|
|
11
|
+
const column = field[x];
|
|
12
|
+
for (let y = 0; y < options.rows; y++) {
|
|
13
|
+
const cell = column[y];
|
|
14
|
+
cell.length = noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
|
|
15
|
+
cell.angle = noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
this._drawField = (ctx) => {
|
|
20
|
+
const { field, options } = this;
|
|
21
|
+
for (let x = 0; x < options.columns; x++) {
|
|
22
|
+
const column = field[x];
|
|
23
|
+
for (let y = 0; y < options.rows; y++) {
|
|
24
|
+
const cell = column[y], { angle, length } = cell;
|
|
25
|
+
ctx.setTransform(1, 0, 0, 1, x * this.options.size, y * this.options.size);
|
|
26
|
+
ctx.rotate(angle);
|
|
27
|
+
ctx.strokeStyle = "white";
|
|
28
|
+
ctx.beginPath();
|
|
29
|
+
ctx.moveTo(0, 0);
|
|
30
|
+
ctx.lineTo(0, this.options.size * length);
|
|
31
|
+
ctx.stroke();
|
|
32
|
+
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
this._initField = () => {
|
|
37
|
+
const { columns, rows } = this.options;
|
|
38
|
+
this.field = new Array(columns);
|
|
39
|
+
for (let x = 0; x < columns; x++) {
|
|
40
|
+
this.field[x] = new Array(rows);
|
|
41
|
+
for (let y = 0; y < rows; y++) {
|
|
42
|
+
this.field[x][y] = engine_1.Vector.origin;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
this._resetField = (container) => {
|
|
47
|
+
const sourceOptions = container.actualOptions.particles.move.path.options, { options } = this;
|
|
48
|
+
options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
|
|
49
|
+
options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
|
|
50
|
+
options.draw = !!sourceOptions.draw;
|
|
51
|
+
options.width = container.canvas.size.width;
|
|
52
|
+
options.height = container.canvas.size.height;
|
|
53
|
+
this.noiseGen.seed(sourceOptions.seed ?? (0, engine_1.getRandom)());
|
|
54
|
+
options.columns = Math.floor(this.options.width / this.options.size) + 1;
|
|
55
|
+
options.rows = Math.floor(this.options.height / this.options.size) + 1;
|
|
56
|
+
this._initField();
|
|
57
|
+
};
|
|
58
|
+
this._setup = (container) => {
|
|
59
|
+
this.noiseZ = 0;
|
|
60
|
+
this._resetField(container);
|
|
61
|
+
window.addEventListener("resize", () => this._resetField(container));
|
|
62
|
+
};
|
|
8
63
|
this.noiseGen = new PerlinNoise_1.PerlinNoise();
|
|
9
64
|
this.field = [];
|
|
10
65
|
this.noiseZ = 0;
|
|
@@ -19,20 +74,15 @@ class PerlinNoiseGenerator {
|
|
|
19
74
|
};
|
|
20
75
|
}
|
|
21
76
|
generate(particle) {
|
|
22
|
-
const pos = particle.getPosition(), point = {
|
|
23
|
-
x: Math.max(Math.floor(pos.x /
|
|
24
|
-
y: Math.max(Math.floor(pos.y /
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
return v;
|
|
28
|
-
}
|
|
29
|
-
v.length = this.field[point.x][point.y][1];
|
|
30
|
-
v.angle = this.field[point.x][point.y][0];
|
|
31
|
-
return v;
|
|
77
|
+
const pos = particle.getPosition(), { size } = this.options, point = {
|
|
78
|
+
x: Math.max(Math.floor(pos.x / size), 0),
|
|
79
|
+
y: Math.max(Math.floor(pos.y / size), 0),
|
|
80
|
+
}, { field } = this;
|
|
81
|
+
return !field || !field[point.x] || !field[point.x][point.y] ? engine_1.Vector.origin : field[point.x][point.y].copy();
|
|
32
82
|
}
|
|
33
83
|
init(container) {
|
|
34
84
|
this.container = container;
|
|
35
|
-
this.
|
|
85
|
+
this._setup(container);
|
|
36
86
|
}
|
|
37
87
|
reset() {
|
|
38
88
|
}
|
|
@@ -40,64 +90,11 @@ class PerlinNoiseGenerator {
|
|
|
40
90
|
if (!this.container) {
|
|
41
91
|
return;
|
|
42
92
|
}
|
|
43
|
-
this.
|
|
93
|
+
this._calculateField();
|
|
44
94
|
this.noiseZ += this.options.increment;
|
|
45
95
|
if (this.options.draw) {
|
|
46
|
-
this.container.canvas.draw((ctx) => this.
|
|
96
|
+
this.container.canvas.draw((ctx) => this._drawField(ctx));
|
|
47
97
|
}
|
|
48
98
|
}
|
|
49
|
-
calculateField() {
|
|
50
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
51
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
52
|
-
const angle = this.noiseGen.noise(x / 50, y / 50, this.noiseZ) * Math.PI * 2;
|
|
53
|
-
const length = this.noiseGen.noise(x / 100 + 40000, y / 100 + 40000, this.noiseZ);
|
|
54
|
-
this.field[x][y][0] = angle;
|
|
55
|
-
this.field[x][y][1] = length;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
drawField(ctx) {
|
|
60
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
61
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
62
|
-
const angle = this.field[x][y][0];
|
|
63
|
-
const length = this.field[x][y][1];
|
|
64
|
-
ctx.setTransform(1, 0, 0, 1, x * this.options.size, y * this.options.size);
|
|
65
|
-
ctx.rotate(angle);
|
|
66
|
-
ctx.strokeStyle = "white";
|
|
67
|
-
ctx.beginPath();
|
|
68
|
-
ctx.moveTo(0, 0);
|
|
69
|
-
ctx.lineTo(0, this.options.size * length);
|
|
70
|
-
ctx.stroke();
|
|
71
|
-
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
initField() {
|
|
76
|
-
this.field = new Array(this.options.columns);
|
|
77
|
-
for (let x = 0; x < this.options.columns; x++) {
|
|
78
|
-
this.field[x] = new Array(this.options.rows);
|
|
79
|
-
for (let y = 0; y < this.options.rows; y++) {
|
|
80
|
-
this.field[x][y] = [0, 0];
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
resetField(container) {
|
|
85
|
-
var _a;
|
|
86
|
-
const sourceOptions = container.actualOptions.particles.move.path.options;
|
|
87
|
-
this.options.size = sourceOptions.size > 0 ? sourceOptions.size : 20;
|
|
88
|
-
this.options.increment = sourceOptions.increment > 0 ? sourceOptions.increment : 0.004;
|
|
89
|
-
this.options.draw = !!sourceOptions.draw;
|
|
90
|
-
this.options.width = container.canvas.size.width;
|
|
91
|
-
this.options.height = container.canvas.size.height;
|
|
92
|
-
this.noiseGen.seed((_a = sourceOptions.seed) !== null && _a !== void 0 ? _a : (0, engine_1.getRandom)());
|
|
93
|
-
this.options.columns = Math.floor(this.options.width / this.options.size) + 1;
|
|
94
|
-
this.options.rows = Math.floor(this.options.height / this.options.size) + 1;
|
|
95
|
-
this.initField();
|
|
96
|
-
}
|
|
97
|
-
setup(container) {
|
|
98
|
-
this.noiseZ = 0;
|
|
99
|
-
this.resetField(container);
|
|
100
|
-
window.addEventListener("resize", () => this.resetField(container));
|
|
101
|
-
}
|
|
102
99
|
}
|
|
103
100
|
exports.PerlinNoiseGenerator = PerlinNoiseGenerator;
|
package/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.loadPerlinNoisePath = exports.perlinNoisePathName = void 0;
|
|
4
4
|
const PerlinNoiseGenerator_1 = require("./PerlinNoiseGenerator");
|
|
5
5
|
exports.perlinNoisePathName = "perlinNoise";
|
|
6
|
-
function loadPerlinNoisePath(engine) {
|
|
7
|
-
engine.addPathGenerator(exports.perlinNoisePathName, new PerlinNoiseGenerator_1.PerlinNoiseGenerator());
|
|
6
|
+
async function loadPerlinNoisePath(engine, refresh = true) {
|
|
7
|
+
await engine.addPathGenerator(exports.perlinNoisePathName, new PerlinNoiseGenerator_1.PerlinNoiseGenerator(), refresh);
|
|
8
8
|
}
|
|
9
9
|
exports.loadPerlinNoisePath = loadPerlinNoisePath;
|
package/esm/PerlinNoise.js
CHANGED
|
@@ -12,19 +12,18 @@ const grad3 = [
|
|
|
12
12
|
new Grad(0, -1, 1),
|
|
13
13
|
new Grad(0, 1, -1),
|
|
14
14
|
new Grad(0, -1, -1),
|
|
15
|
-
]
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
66, 215, 61, 156, 180,
|
|
15
|
+
], p = [
|
|
16
|
+
151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37,
|
|
17
|
+
240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177,
|
|
18
|
+
33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146,
|
|
19
|
+
158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25,
|
|
20
|
+
63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100,
|
|
21
|
+
109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206,
|
|
22
|
+
59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153,
|
|
23
|
+
101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246,
|
|
24
|
+
97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192,
|
|
25
|
+
214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114,
|
|
26
|
+
67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180,
|
|
28
27
|
];
|
|
29
28
|
const perm = new Array(512);
|
|
30
29
|
const gradP = new Array(512);
|
|
@@ -43,17 +42,7 @@ export class PerlinNoise {
|
|
|
43
42
|
X = X & 255;
|
|
44
43
|
Y = Y & 255;
|
|
45
44
|
Z = Z & 255;
|
|
46
|
-
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
|
|
47
|
-
const n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
|
|
48
|
-
const n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
|
|
49
|
-
const n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
|
|
50
|
-
const n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
|
|
51
|
-
const n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
|
|
52
|
-
const n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
|
|
53
|
-
const n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);
|
|
54
|
-
const u = fade(x);
|
|
55
|
-
const v = fade(y);
|
|
56
|
-
const w = fade(z);
|
|
45
|
+
const n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z), n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1), n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z), n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1), n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z), n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1), n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z), n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1), u = fade(x), v = fade(y), w = fade(z);
|
|
57
46
|
return lerp(lerp(lerp(n000, n100, u), lerp(n001, n101, u), w), lerp(lerp(n010, n110, u), lerp(n011, n111, u), w), v);
|
|
58
47
|
}
|
|
59
48
|
seed(inputSeed) {
|