[READ-ONLY] Mirror of https://github.com/flo-bit/every-noise. javascript noise class with lots of features
flo-bit.github.io/every-noise/
javascript
noise
procedural-generation
updated examples
+133
-18
+1
-1
demos/p5-fbm-2D-noise.html
+1
-1
demos/p5-fbm-2D-noise.html
+1
-1
demos/p5-simple-2D-noise.html
+1
-1
demos/p5-simple-2D-noise.html
+1
-1
demos/p5-stepped-2D-noise.html
+1
-1
demos/p5-stepped-2D-noise.html
+64
-4
demos/p5-tileable-1D-noise.html
+64
-4
demos/p5-tileable-1D-noise.html
···
27
27
var counter = 0;
28
28
29
29
var values = [];
30
+
31
+
var settings = {
32
+
scale: 0.2,
33
+
steps: 0,
34
+
update: true,
35
+
octaves: 3,
36
+
gain: 0.5,
37
+
lacunarity: 2,
38
+
speed: 0.2,
39
+
};
30
40
function setup() {
31
41
createCanvas(windowWidth - 2, windowHeight - 2);
32
42
stroke(255);
33
43
34
-
nois = new Noise({ scl: 0.2, oct: 3, tileX: true });
44
+
createNoise();
45
+
calculateValues();
35
46
36
-
// put 1000 values in the array (we'll use this to draw a line)
37
-
let resolution = 10000;
47
+
gui = new dat.GUI();
48
+
gui.add(settings, "scale", 0.01, 10).onChange(function (value) {
49
+
nois.scale = value;
50
+
calculateValues();
51
+
if (!settings.update) draw();
52
+
});
53
+
gui.add(settings, "steps", 0, 30, 1).onChange(function (value) {
54
+
nois.steps = value;
55
+
calculateValues();
56
+
if (!settings.update) draw();
57
+
});
58
+
gui.add(settings, "octaves", 0, 10, 1).onChange(function (value) {
59
+
createNoise();
60
+
calculateValues();
61
+
if (!settings.update) draw();
62
+
});
63
+
gui.add(settings, "gain", 0.01, 5).onChange(function (value) {
64
+
nois.gain = value;
65
+
calculateValues();
66
+
if (!settings.update) draw();
67
+
});
68
+
gui.add(settings, "lacunarity", 0.01, 5).onChange(function (value) {
69
+
nois.lacunarity = value;
70
+
calculateValues();
71
+
if (!settings.update) draw();
72
+
});
73
+
74
+
gui.add(settings, "speed", 0.05, 1);
75
+
76
+
gui.add(settings, "update").onChange(function (value) {
77
+
if (value) {
78
+
loop();
79
+
} else {
80
+
noLoop();
81
+
}
82
+
});
83
+
}
84
+
85
+
function createNoise() {
86
+
nois = new Noise({
87
+
scl: settings.scale,
88
+
oct: settings.octaves,
89
+
gain: settings.gain,
90
+
lac: settings.lacunarity,
91
+
tileX: true,
92
+
});
93
+
}
94
+
function calculateValues() {
95
+
values = [];
96
+
// put 2000 values in the array (we'll use this to draw a line)
97
+
let resolution = 2000;
38
98
for (let x = 0; x < resolution; x++) {
39
99
let v = nois.get((x / resolution) * 10);
40
100
values.push(v);
···
44
104
function draw() {
45
105
background(0);
46
106
let lastY;
47
-
counter += deltaTime;
107
+
counter += deltaTime * settings.speed;
48
108
// draw line from the values array
49
109
for (let i = 0; i < values.length; i++) {
50
110
// move the index around to create a looping effect
+66
-11
demos/p5-tileable-2D-noise.html
+66
-11
demos/p5-tileable-2D-noise.html
···
3
3
<head>
4
4
<script src="../noise.js"></script>
5
5
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
6
-
6
+
<script
7
+
src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
8
+
integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg=="
9
+
crossorigin="anonymous"
10
+
referrerpolicy="no-referrer"
11
+
></script>
7
12
<meta charset="utf-8" />
8
13
</head>
9
14
<style>
···
17
22
</style>
18
23
<body style="background: black">
19
24
<script>
20
-
var nois;
25
+
var nois,
26
+
counter = 0,
27
+
img;
21
28
22
-
var counter = 0;
23
-
24
-
var img;
29
+
var settings = {
30
+
scale: 0.5,
31
+
steps: 0,
32
+
update: true,
33
+
octaves: 3,
34
+
gain: 0.5,
35
+
lacunarity: 2,
36
+
};
25
37
function setup() {
26
38
createCanvas(windowWidth - 2, windowHeight - 2);
27
39
28
-
noStroke();
29
-
nois = new Noise({
30
-
scl: 0.5,
31
-
oct: 3,
32
-
tile: true,
33
-
});
40
+
createNoise();
34
41
35
42
// draw tiling noise to a graphics object
36
43
img = createGraphics(200, 200);
37
44
img.noStroke();
45
+
drawImage();
46
+
47
+
gui = new dat.GUI();
48
+
gui.add(settings, "scale", 0.01, 10).onChange(function (value) {
49
+
nois.scale = value;
50
+
drawImage();
51
+
if (!settings.update) draw();
52
+
});
53
+
gui.add(settings, "steps", 0, 30, 1).onChange(function (value) {
54
+
nois.steps = value;
55
+
drawImage();
56
+
if (!settings.update) draw();
57
+
});
58
+
gui.add(settings, "octaves", 0, 10, 1).onChange(function (value) {
59
+
createNoise();
60
+
drawImage();
61
+
if (!settings.update) draw();
62
+
});
63
+
gui.add(settings, "gain", 0.01, 5).onChange(function (value) {
64
+
nois.gain = value;
65
+
drawImage();
66
+
if (!settings.update) draw();
67
+
});
68
+
gui.add(settings, "lacunarity", 0.01, 5).onChange(function (value) {
69
+
nois.lacunarity = value;
70
+
drawImage();
71
+
if (!settings.update) draw();
72
+
});
73
+
74
+
gui.add(settings, "update").onChange(function (value) {
75
+
if (value) {
76
+
loop();
77
+
} else {
78
+
noLoop();
79
+
}
80
+
});
81
+
}
82
+
83
+
function createNoise() {
84
+
nois = new Noise({
85
+
scl: settings.scale,
86
+
oct: settings.octaves,
87
+
gain: settings.gain,
88
+
lac: settings.lacunarity,
89
+
tile: true,
90
+
});
91
+
}
92
+
function drawImage() {
38
93
for (let x = 0; x < img.width; x++) {
39
94
for (let y = 0; y < img.height; y++) {
40
95
let v = nois.get(x / img.width, y / img.height);