flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/uber-noise. advanced noise generation for the browser and node.js
flo-bit.dev/uber-noise/
browser
nodejs
noise
noise-generator
npm
typescript
add examples
author
Florian
date
(Jun 20, 2023, 11:40 PM +0200)
commit
be9c92b8
be9c92b8e96611fa1b4fac50c4bef5e64035b2bb
parent
b05c6fb2
b05c6fb2691a678e1e41314a54727261351cdc71
+80
+80
examples/Readme.md
+80
examples/Readme.md
···
1
+
## 1D Examples
2
+
3
+
### simple 1D noise with p5.js
4
+
5
+
[see it live here](https://flo-bit.github.io/uber-noise/examples/1D/p5-simple-1D-noise.html)
6
+
7
+
```html
8
+
<script src="https://cdn.jsdelivr.net/npm/uber-noise@0.1.8"></script>
9
+
```
10
+
11
+
```javascript
12
+
// creating noise in setup()
13
+
noise = new UberNoise({ scale: 0.005 });
14
+
15
+
// using noise in draw()
16
+
for (let x = 0; x < width; x += stepSize) {
17
+
let v = noise.get(x + counter);
18
+
// ... use v to draw something
19
+
}
20
+
```
21
+
22
+
### billowed and ridged 1D noise with p5.js
23
+
24
+
[see it live here](https://flo-bit.github.io/uber-noise/examples/1D/p5-billowed-rigded-1D-noise.html)
25
+
26
+
```javascript
27
+
noise = new UberNoise({
28
+
scale: 0.005,
29
+
sharpness: 0.5, // -1 to 0 for billowed noise, 0 to 1 for ridged noise
30
+
});
31
+
```
32
+
33
+
### fbm noise with p5.js
34
+
35
+
[see it live here](https://flo-bit.github.io/uber-noise/examples/1D/p5-fbm-1D-noise.html)
36
+
37
+
```javascript
38
+
noise = new UberNoise({
39
+
scale: 0.005,
40
+
octaves: 4, // number of noise layers
41
+
gain: 0.5, // amplitude multiplier for each layer
42
+
lacunarity: 2.0, // scale multiplier for each layer
43
+
});
44
+
```
45
+
46
+
### warped noise with p5.js
47
+
48
+
[see it live here](https://flo-bit.github.io/uber-noise/examples/1D/p5-warped-1D-noise.html)
49
+
50
+
```javascript
51
+
noise = new UberNoise({
52
+
scale: 0.005,
53
+
warp: 0.5, // warp factor
54
+
warpNoise: { scale: 0.005 }, // optional noise instance for warping
55
+
});
56
+
```
57
+
58
+
### tiled noise with p5.js
59
+
60
+
[see it live here](https://flo-bit.github.io/uber-noise/examples/1D/p5-tileable-1D-noise.html)
61
+
62
+
```javascript
63
+
noise = new UberNoise({
64
+
scale: 0.005,
65
+
tileX: true, // tile noise in x direction
66
+
});
67
+
68
+
// get noise value between 0 and 1 for tileable noise
69
+
let steps = 100;
70
+
for (let x = 0; x < steps; x++) {
71
+
let v = noise.get(x / steps);
72
+
// ... use v to draw something
73
+
}
74
+
```
75
+
76
+
## 2D Examples
77
+
78
+
### simple 2D noise with p5.js
79
+
80
+
## 3D Examples