2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>cymbalsim</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <div id="app">
11 <aside id="sidebar">
12 <div id="sidebarHead">
13 <div id="titleRow">
14 <h1>cymbalsim</h1>
15 <button id="tutorialBtn" title="An interactive tutorial on the physics and the mathematics of the simulator">Tutorial</button>
16 </div>
17 <div id="controls"></div>
18 </div>
19 <div id="sidebarBody">
20 <details id="about">
21 <summary>About</summary>
22 <p>
23 A plate or cymbal is described by a short MATLAB-syntax script (material, outline, thickness, an optional
24 profile, and the loss constants), and a drumstick strike on it is simulated in one of two ways.
25 The <b>linear</b> model computes the modes of the plate once per design and synthesizes the sound from them
26 in about a second, on the CPU. The <b>full</b> model steps the geometrically nonlinear (von Karman) plate
27 equations on the GPU through WebGPU, which takes about a minute per second of sound but captures the pitch
28 glide and the wash of a hard hit. Both use the same grid, so the linear sound is the small-amplitude limit
29 of the full one. The model and the numerical method are described in THEORY.md in the repository, and the
30 Tutorial button above opens a guided tour of the physics and the mathematics, with the application as the
31 laboratory.
32 </p>
33 </details>
34 <details id="designDetails" open>
35 <summary>Design script</summary>
36 <div id="design"></div>
37 <div id="designInfo" class="info"></div>
38 </details>
39 <div id="params"></div>
40 <details id="modesDetails" open>
41 <summary>Modes</summary>
42 <div id="modes"></div>
43 </details>
44 </div>
45 </aside>
46 <div id="splitter"></div>
47 <main id="main">
48 <div id="viewToolbar" class="toolbar"></div>
49 <div id="viewWrap">
50 <canvas id="view"></canvas>
51 <div id="viewOverlay"></div>
52 </div>
53 <div id="movieToolbar" class="toolbar"></div>
54 <div id="specToolbar" class="toolbar"></div>
55 <canvas id="spec"></canvas>
56 </main>
57 <aside id="tutorial" hidden></aside>
58 </div>
59 <script type="module" src="./src/main.ts"></script>
60 </body>
61</html>