8354482cymmodes: linear modes of a cymsim cymbal driven in the full nonlinear model, with the energy of every mode over timeJeremy Magland 1
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>cymmodes</title>
7 <link rel="icon" href="data:," />
8 <link rel="stylesheet" href="./src/style.css" />
9 </head>
10 <body>
11 <div id="app">
12 <aside id="sidebar">
13 <header>
14 <h1>cymmodes</h1>
15 <span class="subtitle">linear modes of a cymsim cymbal, and how they couple</span>
16 </header>
17 <div id="sidebar-scroll">
18 <details id="box-cymbal" open>
19 <summary>1. The cymbal</summary>
20 <div class="row">
21 <label>start from <select id="preset"></select></label>
22 <label class="file">load YAML <input type="file" id="yamlfile" accept=".yaml,.yml" hidden /><button id="import-yaml">…</button></label>
23 <button id="download-yaml">YAML</button>
24 </div>
25 <div id="design"></div>
26 <div id="design-status" class="status"></div>
27 </details>
29 <details id="box-modes" open>
30 <summary>2. The modes</summary>
31 <div class="row">
32 <label>mesh <select id="esize">
33 <option value="0.015">15 mm (fast, rough)</option>
34 <option value="0.012">12 mm</option>
35 <option value="0.010" selected>10 mm (default)</option>
36 <option value="0.008">8 mm (slow)</option>
37 <option value="0.006">6 mm (very slow)</option>
38 </select></label>
39 <label>up to <input type="number" id="fmax" value="20000" step="1000" min="500" max="24000" /> Hz</label>
40 </div>
41 <div class="row buttons">
42 <button id="compute" class="primary">Compute modes</button>
43 <button id="download-modes" disabled>Save</button>
44 <label class="file"><input type="file" id="modesfile" accept=".bin" hidden /><button id="import-modes">Load</button></label>
45 <button id="clear-cache" title="forget every cached modes file">Clear cache</button>
46 </div>
47 <div class="progress"><div id="modes-progress"></div></div>
48 <div id="modes-status" class="status">no modes yet</div>
49 </details>
51 <details id="box-drive" open>
52 <summary>3. Drive a mode</summary>
53 <div id="drive-mode" class="status">no mode selected; click one in the table or the views</div>
54 <div class="row">
55 <label>mechanism <select id="mechanism">
56 <option value="decay">free decay from the mode shape</option>
57 <option value="forced">harmonic forcing of the mode</option>
58 </select></label>
59 </div>
60 <div class="row">
61 <label>amplitude <input type="number" id="amplitude" value="1" step="0.1" min="0.001" max="50" /> × thickness</label>
62 <label>damping × <input type="number" id="damp-scale" value="1" step="0.05" min="0" max="1" /></label>
63 </div>
64 <div class="row forced-only">
65 <label>detune <input type="number" id="detune" value="0" step="1" min="-400" max="400" /> cents</label>
66 <label>ramp <input type="number" id="ramp" value="0.2" step="0.05" min="0" /> s</label>
67 <label>drive for <input type="number" id="drive-time" value="1.5" step="0.1" min="0.05" /> s</label>
68 </div>
69 <div class="row">
70 <label>duration <input type="number" id="duration" value="2" step="0.5" min="0.1" max="20" /> s</label>
71 <label>snapshots <input type="number" id="snap-rate" value="240" step="20" min="20" max="2000" /> /s</label>
72 <label title="run the linearised model instead: a control in which no coupling can occur"><input type="checkbox" id="linear" /> linear</label>
73 </div>
74 <div class="row buttons">
75 <button id="run" class="primary" disabled>Run</button>
76 <button id="pause" disabled>Pause</button>
77 <button id="stop" disabled>Stop</button>
78 </div>
79 <div class="row"><progress id="run-progress" value="0" max="1"></progress><span id="run-progress-text"></span></div>
80 <div id="drive-status" class="status"></div>
81 <div id="backend" class="muted"></div>
82 </details>
84 <details id="box-sound">
85 <summary>4. The sound</summary>
86 <div class="row">
87 <button id="play" disabled>Play</button>
88 <button id="stop-audio" disabled>Stop</button>
89 <input id="position" type="range" min="0" max="1" step="0.001" value="0" />
90 <span id="time">0.000 s</span>
91 </div>
92 <div class="row">
93 <label>signal <select id="signal"><option value="unbaffled">unbaffled</option><option value="rayleigh">Rayleigh (baffled)</option></select></label>
94 <label>gain <input id="gain" type="range" min="-40" max="0" step="1" value="-12" /><span id="gain-text">-12 dB</span></label>
95 <label><input id="normalize" type="checkbox" checked /> normalize</label>
96 <button id="download-wav" disabled>WAV</button>
97 </div>
98 </details>
100 <div id="log" class="log"></div>
101 </div>
102 </aside>
103 <div class="splitter vertical" data-target="sidebar" data-var="--sidebar-w"></div>
104 <main>
105 <section id="top-section">
106 <section id="plate-section">
107 <div class="toolbar">
108 <span id="plate-title">Mode shape</span>
109 <label><input type="checkbox" id="animate" checked /> animate</label>
110 <label>exaggeration <input id="exag" type="range" min="0" max="3.5" step="0.1" value="1.5" /><span id="exag-text"></span></label>
111 <button id="reset-view">Reset view</button>
112 <span id="plate-info" class="muted"></span>
113 </div>
114 <canvas id="plate"></canvas>
115 </section>
116 <div class="splitter vertical" data-target="modelist-section" data-var="--modelist-w" data-invert="1"></div>
117 <section id="modelist-section">
118 <div class="toolbar"><span>Modes</span><span id="modelist-info" class="muted"></span></div>
119 <div id="modelist"></div>
120 </section>
121 </section>
122 <div class="splitter horizontal" data-target="top-section" data-var="--top-h"></div>
123 <section id="modal-section">
124 <div class="toolbar">
125 <span>Analysis</span>
126 <label>view <select id="view">
127 <option value="modal" selected>modal energy</option>
128 <option value="sound">spectrogram: sound</option>
129 <option value="trace">spectrogram: driven mode</option>
130 </select></label>
131 <label>scale <select id="freq-scale"><option value="linear">linear</option><option value="log" selected>log</option></select></label>
132 <label>max f <select id="freq-max"><option value="20000" selected>20 kHz</option><option value="10000">10 kHz</option><option value="5000">5 kHz</option><option value="2000">2 kHz</option></select></label>
133 <label>range <select id="db-range"><option value="60">60 dB</option><option value="80" selected>80 dB</option><option value="100">100 dB</option><option value="120">120 dB</option></select></label>
134 <span id="modal-info" class="muted"></span>
135 </div>
136 <canvas id="modal-spec"></canvas>
137 </section>
138 <div class="splitter horizontal" data-target="bars-section" data-var="--bars-h" data-invert="1"></div>
139 <section id="bars-section">
140 <div class="toolbar"><span>At the cursor</span><button id="follow" disabled>Follow the run</button><span id="bars-info" class="muted"></span></div>
141 <canvas id="bars"></canvas>
142 </section>
143 </main>
144 </div>
145 <script type="module" src="./src/main.ts"></script>
146 </body>
147</html>