simplex-noise/index.html at master · leodeslf/simplex-noise · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>simplex-noise demo</title>
  <style>
    body {
      background-color: black;
      color: grey;
    }

    canvas {
      outline: 1px solid grey;
      outline-offset: -1px;
    }

  </style>
  <script type="module" src="./simplex.js"></script>
  <script type="module">
    import { simplex2D, simplex3D, simplex4D } from './simplex.js';

    let ctx;

    window.addEventListener('load', () => {
      ctx = document.getElementById('canvas').getContext('2d');
      draw();
    });

    let raf = 0;
    const I = (u, v) => (v * SIDE + u) * 4;
    const SIDE = 300;
    const RES = 150;
    const ROW = SIDE / 3;
    const SHIFT = .5;
    const SCALE = .5;
    const RANGE = 255;
    const IMAGE_DATA = new ImageData(SIDE, SIDE);

    // Draw 3 "rows of noise", one per each dimention.
    function draw() {
      const T = raf * .01;
      for (let v = 0; v < ROW; v++) {
        for (let u = 0; u < SIDE; u++) {
          const index = I(u, v);
          const U = u / RES;
          const V = v / RES;
          const RGB = (simplex2D(U + T, V + T) * SCALE + SHIFT) * RANGE;
          for (let channel = 0; channel < 3; channel++) {
            IMAGE_DATA.data[index + channel] = RGB;
          }
          IMAGE_DATA.data[index + 3] = RANGE;
        }
      }
      for (let v = ROW; v < ROW * 2; v++) {
        for (let u = 0; u < SIDE; u++) {
          const index = I(u, v);
          const U = u / RES;
          const V = v / RES;
          const RGB = (simplex3D(U, V, T) * SCALE + SHIFT) * RANGE;
          for (let channel = 0; channel < 3; channel++) {
            IMAGE_DATA.data[index + channel] = RGB;
          }
          IMAGE_DATA.data[index + 3] = RANGE;
        }
      }
      for (let v = ROW * 2; v < ROW * 3; v++) {
        for (let u = 0; u < SIDE; u++) {
          const index = I(u, v);
          const U = u / RES;
          const V = v / RES;
          const RGB = (simplex4D(U, V, T, T) * SCALE + SHIFT) * RANGE;
          for (let channel = 0; channel < 3; channel++) {
            IMAGE_DATA.data[index + channel] = RGB;
          }
          IMAGE_DATA.data[index + 3] = RANGE;
        }
      }
      ctx.clearRect(0, 0, SIDE, SIDE);
      ctx.putImageData(IMAGE_DATA, 0, 0);
      raf = requestAnimationFrame(draw);
    }
  </script>
</head>

<body>
  <canvas width="300" height="300" id="canvas"></canvas>
  <p>Demo 2D, 3D, and 4D (top to bottom).</p>
</body>

</html>