NatureOfCode2/intro5.1.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
<html>
    <head>
        <title>Introduction 5 - 2D Perlin Noise (in Time)</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            // I modified 2D Perlin Noise to take into consideration time.

            var inc = 0.01;
            var t = 0;

            function setup() {
                createCanvas(200, 200);
            }

            function draw() {

                var yoff = 0;

                loadPixels();

                for (let y = 0; y < height; y++) {

                    var xoff = 0;

                    for (let x = 0; x < width; x++) {

                        var index = (x + y * width) * 4;

                        // var r = random(255); // Random

                        var r = noise(xoff, yoff, t) * 255;

                        pixels[index + 0] = r;
                        pixels[index + 1] = r;
                        pixels[index + 2] = r;
                        pixels[index + 3] = 255;

                        xoff += inc;
                    }

                    yoff += inc;
                }

                t += inc;

                updatePixels();
            }
        </script>
    </head>
</html>