2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>cymplay</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <header>
11 <h1>cymplay</h1>
12 <span class="sub">design a cymsim cymbal, play it from the keyboard, export the hits for the full render</span>
13 </header>
14 <main>
15 <section class="left">
16 <canvas id="cymbal"></canvas>
17 <div class="keys" id="keyhelp"></div>
18 </section>
19 <section class="right">
20 <details id="setup" open>
21 <summary>Modes</summary>
22 <div class="row">
23 <label>start from <select id="preset"></select></label>
24 <label class="file">load YAML <input type="file" id="yamlfile" accept=".yaml,.yml" /></label>
25 </div>
26 <div class="row">
27 <label>playback mesh <select id="esize">
28 <option value="0.015">15 mm (fast, rough)</option>
29 <option value="0.012">12 mm</option>
30 <option value="0.010" selected>10 mm (default)</option>
31 <option value="0.008">8 mm (slow)</option>
32 <option value="0.006">6 mm (very slow)</option>
33 </select></label>
34 <label>modes up to <input type="number" id="fmax" value="20000" step="1000" min="500" max="24000" /> Hz</label>
35 </div>
36 <div class="row">
37 <button id="compute">Compute modes</button>
38 <button id="download-modes" disabled>Download modes</button>
39 <label class="file">load modes <input type="file" id="modesfile" accept=".bin" /></label>
40 <button id="clear-cache" title="forget every cached modes file">Clear cache</button>
41 </div>
42 <div class="progress"><div id="progress-bar"></div></div>
43 <div id="status" class="status">no modes yet</div>
44 </details>
45 <details id="designbox" open>
46 <summary>Design the cymbal</summary>
47 <div class="row small">
48 Sliders marked live take effect at once. The others change the shape, so the modes must be
49 recomputed; the panel says when they are stale.
50 </div>
51 <div id="design"></div>
52 <div class="row">
53 <button id="revert">Revert to the preset</button>
54 <button id="download-design-yaml">Download design YAML</button>
55 </div>
56 <div id="design-status" class="status"></div>
57 </details>
58 <details id="play" open>
59 <summary>Play</summary>
60 <div class="row">
61 <button id="audio-start">Start audio</button>
62 <label>volume <input type="range" id="volume" min="0" max="1" step="0.01" value="0.4" /></label>
63 <label>output <select id="signal">
64 <option value="unbaffled">unbaffled (front minus back)</option>
65 <option value="front">baffled (front only)</option>
66 </select></label>
67 </div>
68 <div class="row">
69 <label>exciter <select id="exciter">
70 <option value="stick">stick (hard, bright)</option>
71 <option value="mallet">mallet (soft, nearly silent without the cascade)</option>
72 </select></label>
73 <label>contact springs <select id="points" title="springs per patch in real time; the exported YAML always keeps the full patches">
74 <option value="cheap">fewest (mallet 1, stick 3)</option>
75 <option value="mixed" selected>mallet 1, stick 7</option>
76 <option value="full">as in cymsim (7 and 7)</option>
77 </select></label>
78 <label title="the mallet is about 18 dB quieter than the stick in linear theory; this makes it audible and is never written into the exported YAML">
79 <input type="checkbox" id="preview-gain" checked /> lift the mallet preview level
80 </label>
81 </div>
82 <div class="row">
83 <label>master level <input type="range" id="velocity" min="0.3" max="16" step="0.1" value="6" /> <span id="velocity-value">6.0 m/s</span></label>
84 <button id="reset-weights" title="put every position back to the master level">Level the positions</button>
85 </div>
86 <div class="row small">
87 Each position is struck at the velocity printed under its letter. Scroll the wheel over a
88 position to make it harder or softer; the master level scales them all together.
89 </div>
90 <div class="row small" id="audio-info">audio not started</div>
91 </details>
92 <details id="record" open>
93 <summary>Recorded hits</summary>
94 <div class="row">
95 <button id="clear-hits">Clear</button>
96 <button id="download-yaml" disabled>Download YAML</button>
97 <button id="capture">Start capture</button>
98 <button id="download-wav" disabled>Download WAV</button>
99 </div>
100 <div class="row">
101 <label>lead-in <input type="number" id="leadin" value="0.05" step="0.05" min="0" /> s</label>
102 <label>tail <input type="number" id="tail" value="3" step="0.5" min="0.1" /> s</label>
103 <label>prefix <input type="text" id="prefix" value="cymplay" size="10" /></label>
104 </div>
105 <table id="hits">
106 <thead><tr><th>#</th><th>time [s]</th><th>key</th><th>exciter</th><th>r [m]</th><th>phi [rad]</th><th>v [m/s]</th><th>F peak [N]</th><th>contact [ms]</th></tr></thead>
107 <tbody></tbody>
108 </table>
109 </details>
110 </section>
111 </main>
112 <script type="module" src="./src/main.ts"></script>
113 </body>
114</html>