visualiser/mobile.html at master · livace/visualiser · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualiser</title>
    <script src="js/utility.js"></script>
    <script src="js/visualiser.js"></script>
    <script src="js/particles.js"></script>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <div id = "particles_el"></div>
    <div id = "Analyser">
        <div class = "play"></div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
          const visualiser = new Visualiser('particles_el');

          const btn = document.getElementById("Analyser");
          const child = btn.childNodes[1];

          btn.addEventListener('click', function () {
            if (visualiser.paused()) {
              child.classList.add('pause');
              child.classList.remove('play');

              visualiser.play();
            } else {
              child.classList.remove('pause');
              child.classList.add('play');

              visualiser.pause();
            }
          });

          const particleParams = {
            count: 200,
            lifetime: {
              min: 3.000,
              max: 10.000
            },
            gravity: {
              enabled: true,
              type: "point",
              mass: -1,
              position: getScreenCenter
            },
            shadows: false,
            opacity: false,
            timeMultiplier: visualiser.averageVolume
          };

          let p = new Particles('particles_el', particleParams, function (elementId, particleParams) {
            console.log("Successfully loaded", elementId, particleParams);
            console.log(particleParams);
          });

          const drawBorder = function () {
            const width = Math.max(0, visualiser.averageVolume() / 2 - 7);
            btn.style.borderWidth = (width) + 'px';
            btn.style.borderRadius = (width + 150) + 'px';

            requestAnimationFrame(drawBorder);
          };
          requestAnimationFrame(drawBorder);

        });
    </script>
</body>
</html>