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>Cymbal designer</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <div id="app">
11 <aside id="sidebar">
7710254Self-contained design scripts; 3D by default; resizable, less verbose panelJeremy Magland 12 <div id="sidebarHead">
13 <h1>Cymbal designer</h1>
14 <div id="controls"></div>
15 </div>
16 <div id="sidebarBody">
17 <details class="blurb">
18 <summary>About</summary>
19 <p class="sub">A scripted cymbal, struck once: geometrically nonlinear plate (von Karman with in-plane inertia) with a thickness field, stepped explicitly on the GPU. The model and the numerical method are described in THEORY.md in the repository.</p>
20 </details>
21 <details open>
22 <summary>Design script</summary>
23 <div id="design"></div>
24 </details>
25 <div id="params"></div>
26 <div id="info"></div>
27 </div>
1ee087eCymbal designer: scripted design, thickness field, mount, single strikeJeremy Magland 28 </aside>
7710254Self-contained design scripts; 3D by default; resizable, less verbose panelJeremy Magland 29 <div id="splitter" title="Drag to resize the panel; double-click to reset"></div>
1ee087eCymbal designer: scripted design, thickness field, mount, single strikeJeremy Magland 30 <main id="main">
31 <div class="toolbar" id="viewToolbar"></div>
32 <div id="viewWrap"><canvas id="view"></canvas><div id="nogpu" hidden></div></div>
33 <div class="toolbar" id="movieToolbar"></div>
34 <div class="toolbar" id="specToolbar"></div>
35 <canvas id="spec"></canvas>
36 </main>
37 </div>
38 <script type="module" src="./src/main.ts"></script>
39 </body>
40</html>