5778036cymbalsim: scripted plate and cymbal designer with a modal linear model and a von Karman GPU modelJeremy Magland 1
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 <h1>cymbalsim</h1>
14 <div id="controls"></div>
15 </div>
16 <div id="sidebarBody">
17 <details id="about">
18 <summary>About</summary>
19 <p>
20 A plate or cymbal is described by a short MATLAB-syntax script (material, outline, thickness, an optional
21 profile, the stand, and the decay times), and a drumstick strike on it is simulated in one of two ways.
22 The <b>linear</b> model computes the modes of the plate once per design and synthesizes the sound from them
23 in about a second, on the CPU. The <b>full</b> model steps the geometrically nonlinear (von Karman) plate
24 equations on the GPU through WebGPU, which takes about a minute per second of sound but captures the pitch
25 glide and the wash of a hard hit. Both use the same grid, so the linear sound is the small-amplitude limit
26 of the full one. The model and the numerical method are described in THEORY.md in the repository.
27 </p>
28 </details>
29 <details id="designDetails" open>
30 <summary>Design script</summary>
31 <div id="design"></div>
32 <div id="designInfo" class="info"></div>
33 </details>
34 <div id="params"></div>
35 <details id="modesDetails" open>
36 <summary>Modes</summary>
37 <div id="modes"></div>
38 </details>
39 </div>
40 </aside>
41 <div id="splitter"></div>
42 <main id="main">
43 <div id="viewToolbar" class="toolbar"></div>
44 <div id="viewWrap">
45 <canvas id="view"></canvas>
46 <div id="viewOverlay"></div>
47 </div>
48 <div id="movieToolbar" class="toolbar"></div>
49 <div id="specToolbar" class="toolbar"></div>
50 <canvas id="spec"></canvas>
51 </main>
52 </div>
53 <script type="module" src="./src/main.ts"></script>
54 </body>
55</html>