-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (127 loc) · 6.75 KB
/
index.html
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sonic Pinwheel</title>
<meta name="description" content="Sonic Pinwheel by Terry Feng - A browser-based instrument, a distributed and collaborative composition, an interactive musical experience.">
<link rel="stylesheet" href="./src/index.css" />
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
</head>
<body>
<div class="w-full">
<div id="app" class="w-full relative sm:w-3/4 xl:w-1/2 flex flex-col items-center m-auto sm:border-4 sm:border-slate-200">
<!-- Title: Sonic Pinwheel -->
<header class="w-full h-20 flex justify-center items-center">
<h1 class="text-4xl text-center">Sonic Pinwheel</h1>
</header>
<!-- Floating menu bar in the top right -->
<button id="menu-button" class="absolute top-0 right-0 p-2 m-2 text-2xl rounded-full hover:bg-slate-100 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<!-- Instrument Select -->
<div id="instrumentSelect" class="mobile h-20 py-2 px-4 lg:px-0 flex justify-between align-middle items-center">
<h1 id="select-inst-prompt" class="text-lg pb-2 transition">Select an instrument</h1>
<div class="items-center px-1 py-1 border-2 border-gray-200 rounded-full enabled:hover:bg-slate-50">
<select id="instruments" class="rounded-full focus:outline-none transition enabled:hover:bg-slate-50 enabled:hover:cursor-pointer disabled:hover:cursor-not-allowed disabled:opacity-50">
<option value="0">Wind</option>
<option value="1" selected>Chimes</option>
<option value="2">Bamboo</option>
<option value="3">Bass</option>
<option value="4">Voice</option>
<option value="5">Drift</option>
</select>
</div>
</div>
<div id="stage" style="width: 400; height: 400;">
<!-- <canvas id="ui-canvas" width="400" height="400" class=""></canvas> -->
<canvas id="pinwheel-canvas" width="400" height="400" class=""></canvas>
<canvas id="input-canvas" width="400" height="400" class=""></canvas>
<canvas id="bg-canvas" width="400" height="400" class="transition"></canvas>
</div>
<!-- Mic Monitoring -->
<canvas id="input-meter" width="400" height="10" class="outline-red-300 bg-green-100"></canvas>
<!-- Labels -->
<div class="mobile lg:px-0 flex justify-between font-mono text-md">
<span id="freq" class="mr-2">440.00 Hz</span>
<span id="dbfs">0.00 dB</span>
</div>
<br>
<!-- Blade Control-->
<div id="blade-buttons" class="mobile lg:px-0 flex justify-between">
<button id="blade6" class="blade-button"></button>
<button id="blade5" class="blade-button"></button>
<button id="blade4" class="blade-button"></button>
<button id="blade3" class="blade-button"></button>
<button id="blade2" class="blade-button"></button>
<button id="blade1" class="blade-button"></button>
</div>
<br>
<!-- Microphone Control-->
<div id="microphone-control" class="mobile lg:px-0 flex">
<img src="/img/mic.svg" class="w-9 h-9 inline-block pr-2" />
<input type="range" id="mic-gain" min="0" max="100" value="50" class="w-full" />
</div>
<br>
<!-- START -->
<button id="start" type="button" class="rounded-full text-3xl border-2 border-sky-950 py-2 px-8 disabled:opacity-50 enabled:hover:opacity-50 transition">Start</button>
<br>
<br>
<br>
<!-- Console -->
<div id="console" class="font-mono text-md p-4 justify-start w-full h-48 overflow-auto bg-slate-50">
<b>console output:</b><br>
</div>
<!-- MODALS -->
<!-- Menu -->
<dialog id="menu-dialog" tabindex="-1" aria-hidden="true" class="modal p-6">
<!-- Modal header -->
<div class="flex items-center justify-between border-b pb-2">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
About
</h1>
</div>
<!-- Modal body -->
<div class="space-y-4 mt-4">
<p class="leading-relaxed">
Terry Feng - Sonic Pinwheel (2024)
</p>
<p class="leading-relaxed">
A shared, musical installation of browser pinwheel instruments. A distributed symphony of wind and sound.
</p>
<p>
Join on as many devices as possible!<br>
<a href="https://bit.ly/sonic-pinwheel" target="_blank" class="text-blue-500 hover:underline">bit.ly/sonic-pinwheel</a><br>
</p>
<!-- QR code -->
<img src="/img/pinwheel-qr.png" class="w-32 h-32" />
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white border-b pb-2">Advanced</h2>
<!-- Volume -->
<div id="microphone-control" class="w-full h-10 items-center flex">
<img src="/img/speaker.svg" class="w-8 h-8 inline-block pr-2" />
<input type="range" id="volume-slider" min="0" max="100" value="50" class="w-full" />
</div>
<div class="w-full h-10 items-center flex">
<span class="pr-2">Enable logging (requires refresh)</span>
<input type="checkbox" id="logging-checkbox" class="w-4 h-4" />
</div>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-between mt-6 pt-4 border-gray-200 rounded-b dark:border-gray-600">
<span><a href="https://github.com/terryzfeng/Sonic-Pinwheel" target="_blank" class="text-blue-500 hover:underline">GitHub</a><br></span>
<button id="close-dialog" class="inline-flex justify-center rounded-full border-2 border-slate-200] px-4 py-2 text-sm font-semibold shadow-sm hover:border-[#abcdef] sm:ml-3 sm:w-auto">Close</button>
</div>
</dialog>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>