NatureOfCode2/intro4.html at master · brlebtag/NatureOfCode2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
    <head>
        <title>Introduction 4 - Perlin Noise</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            // var xoff = 0;
            // var yoff = 10000;
            var inc = 0.01;
            var start = 0;
            function setup() {
                createCanvas(400, 400);
            }

            function draw() {
                background(51);

                // var x = map(noise(xoff),0 ,1, 0, width);
                // var y = map(noise(yoff),0 ,1, 0, width);

                // xoff += 0.02;
                // yoff += 0.02;

                // ellipse(x, y, 24, 24);

                stroke(255);
                noFill();
                beginShape();
                var xoff = start;
                for (let x = 0; x < width; x++) {
                    stroke(255);
                    // var y = random(height);
                    //var y = height/2 + sin(xoff) * height/2;
                    //var y = noise(xoff) * 100 + height/2 + sin(xoff) * height/2;

                    // Adding noise to sin wave
                    // var n = map(noise(xoff), 0, 1, -50, 50);
                    // var s = map(sin(xoff), -1, 1, 0, height);

                    // Adding sin to perlin noise
                    var n = map(noise(xoff), 0, 1, 0, height);
                    var s = map(sin(xoff), -1, 1, -50, 50);
                    var y = n + s;

                    vertex(x, y);
                    xoff += inc;
                }
                endShape();
                start += inc;
                // noLoop();
            }
        </script>
    </head>
</html>