flo-bit.dev
[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
1.6 kB
62 lines
1<!DOCTYPE html>
2<html>
3 <head>
4 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
5 <script
6 src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
7 integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg=="
8 crossorigin="anonymous"
9 referrerpolicy="no-referrer"
10 ></script>
11 <meta charset="utf-8" />
12 </head>
13 <style>
14 html,
15 body {
16 width: 100%;
17 height: 100%;
18 margin: 0;
19 padding: 0;
20 }
21 </style>
22 <body style="background: black">
23 <script>
24 var nois;
25
26 var counter = 0;
27 async function setup() {
28 await import("../noise.js").then((module) => {
29 window.Noise = module.default;
30 });
31
32 createCanvas(windowWidth - 2, windowHeight - 2);
33 stroke(255);
34
35 nois = new Noise({
36 scl: 0.003,
37 oct: 3,
38 sharpness: 1,
39 pow: 2,
40 });
41 }
42
43 function draw() {
44 if (nois == undefined) return;
45 background(0);
46 let stepSize = 0.5;
47 let lastY;
48 counter += deltaTime / 10;
49 for (let x = 0; x < width; x += stepSize) {
50 let v = nois.get(x + Math.floor(counter));
51 let y = map(v, -1, 1, height * 0.01, height * 0.99);
52 if (lastY) line(x, lastY, x + stepSize, y);
53 lastY = y;
54 }
55 }
56
57 function windowResized() {
58 resizeCanvas(windowWidth - 2, windowHeight - 2);
59 }
60 </script>
61 </body>
62</html>