veras1/index.html at main · rafaelcastrocouto/veras1 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veras 1</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" id="style">
</head>

<body>

  <canvas id="canvas"></canvas>

  <p id="veras"><span id="vera">Vera</span> <span id="fisher">Fischer</span> <span id="era">era</span> <span id="clubber">Clu<span id="flipX">bb</span>er</span></p>

  <div id="controls">
    <button id="startAudio">startAudio</button>
    <select id="inputDevicesList"></select>
    <button id="getUserMedia">getInput</button>
    <label for="bpm">BPM: <input type="number" id="bpm" value="4000"></label><br>

    <button id="updateDevices">updateDevices</button>
    <select id="outputDevicesList"></select>
    <button id="audioDestination">setOutput</button>

    <button id="hide">hide</button>
    <button id="popInit">pop</button><br>

    <list id="inputInterface" hidden></list>
    <list id="outputInterface" hidden></list>
    <p id="message" hidden></p>

    <label>H<input id="ctrl1" type="range" value="1" min="0" max="5" step="0.01"></label>
    <label>B<input id="ctrl2" type="range" value="2" min="2" max="10" step="0.01"></label><!-- value="4.0536" 135bpm-->
    <label>P<input id="ctrl3" type="range" value="0" min="0" max="1" step="0.01"></label>
    <label>W<input id="ctrl4" type="range" value="1" min="0" max="3" step="0.01"></label><br>
    <label>C<input id="ctrl5" type="range" value="1" min="0" max="40" step="0.01"></label>
    <label>A<input id="ctrl6" type="range" value="0" min="-3.1416" max="3.1416" step="0.01"></label>
    <label>F<input id="ctrl7" type="range" value="1" min="0.4" max="3" step="0.01"></label>
    <label>V<input id="ctrl8" type="range" value="0.5" min="0" max="1" step="0.01"></label>
  </div>

  <script type="importmap">
    {
      "imports": {
        "audio": "/audio.js",
        "midi": "/midi.js"
      }
    }
  </script>
  <script src="main.js" type="module"></script>

  <svg width="0" height="0">
    <filter id="kill">
      <feColorMatrix type="matrix"
        result="red_"
        values="2 0 0 0 0
                0 0 0 0 0
                0 0 1 0 0
                0 0 0 1 0"/>
      <feOffset in="red_" dx="2" dy="0" result="red"/>
      <feColorMatrix type="matrix"
        in="SourceGraphic"
        result="blue_"
        values="0 0 0 0 0
                0 1 0 0 0
                0 0 2 0 0
                0 0 0 1 0"/>
      <feOffset in="blue_" dx="-2" dy="0" result="blue"/>
      <feBlend mode="screen" in="red" in2="blue"/>
    </filter>
    <filter id='noiseFilter'>
      <feTurbulence result="turbulence"
        type='fractalNoise'
        baseFrequency='666'
        numOctaves='6'
        stitchTiles='stitch'/>
      <feDisplacementMap result="disp"
        in2="turbulence"
        in="SourceGraphic"
        scale="0"
        xChannelSelector="R"
        yChannelSelector="G" />
    </filter>
  </svg>

</body>
</html>