Gravity-Pull/index.html at master · Absulit/Gravity-Pull · 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
<!DOCTYPE html>
<html lang="en">


<html>

<head>
  <title>Gravity Pull Audio Visualizer by absulit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <meta name="Description" content="Audio Visualizer made with WebGPU and JavaScript">

  <meta property="og:title" content="Gravity Pull Audio Visualizer by absulit" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://absulit.github.io/Gravity-Pull/" />
  <meta property="og:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />
  <meta property="og:description" content="Audio Visualizer made in WebGPU" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@absulit" />
  <meta name="twitter:creator" content="@absulit" />
  <meta name="twitter:title" content="Gravity Pull Audio Visualizer by absulit" />
  <meta name="twitter:description" content="Audio Visualizer made in WebGPU" />
  <meta name="twitter:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />

  <script type="importmap">
      {
        "imports": {
            "points": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/points.min.js",

            "points/animation": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/animation.min.js",
            "points/audio": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/audio.min.js",
            "points/color": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/color.min.js",
            "points/debug": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/debug.min.js",
            "points/effects": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/effects.min.js",
            "points/image": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/image.min.js",
            "points/math": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/math.min.js",
            "points/noise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/noise2d.min.js",
            "points/classicnoise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/classicnoise2d.min.js",
            "points/random": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/random.min.js",
            "points/sdf": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/sdf.min.js",

            "datgui": "https://cdn.jsdelivr.net/gh/dataarts/dat.gui@0.7.9/build/dat.gui.module.js"
        }
      }
  </script>

  <link rel="stylesheet" type="text/css" href="style.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
  <script type="module" src="src/main.js"></script>
</head>

<body>
  <div id="nowebgpu">
    <div>
      WebGPU is only available on Chrome, <a target="_blank" rel="noopener"
        href="https://www.mozilla.org/en-US/firefox/nightly/notes/">Firefox Nightly</a>, and <a target="_blank"
        rel="noopener" href="https://developer.apple.com/safari/technology-preview/">Safary Technology Preview</a>.
    </div>
  </div>
  <canvas id="canvas" width="800" height="800">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>

</html>