/ proof-of-concept / steelsim21
Sign in
proof-of-concept / steelsim21
steelsim21 / docs / gallery / index.html
230 lines · 12.2 KBBlameHistoryRaw
1<!doctype html>
2<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
3<title>Steel sheet gong: how the parameters shape the sound</title>
4<style>
5body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; background: #15171a; color: #dfe2e6; max-width: 1400px; margin: 0 auto; line-height: 1.4; }
6h1 { font-size: 24px; } h2 { font-size: 18px; margin-top: 40px; border-top: 1px solid #2c3036; padding-top: 16px; }
7p { max-width: 900px; } .dim { color: #9aa0a8; font-size: 13px; } a { color: #6fa8ea; }
8.cards { display: flex; flex-wrap: wrap; gap: 14px; }
9.card { background: #1c1e22; border: 1px solid #2c3036; border-radius: 8px; padding: 10px; width: 320px; display: flex; flex-direction: column; gap: 6px; }
10.card img { width: 100%; height: auto; border-radius: 4px; }
11.card audio { width: 100%; } .label { font-weight: 600; }
12.metrics { font-size: 12px; color: #c8cbd0; } .metrics div { padding: 1px 0; }
13ul.toc { columns: 2; }
14</style></head><body>
15<h1>Steel sheet gong: how the parameters shape the sound</h1>
16<p>Each section varies one property of the simulated sheet or of the excitation while everything else stays at the simulator defaults: a 12 by 18 inch, 22 gauge (0.79 mm) stainless steel sheet hanging in portrait orientation with a 3 mm bow across its width, heard 1 m in front of its center, recorded for 4 s. The clips are computed on a 4 mm grid (the interactive app defaults to 8 mm for speed; the 'Open in simulator' links carry the 4 mm setting, so they reproduce the clip exactly but run slower). Click a player to hear a clip. Within a section the clips share one playback gain, so the loudness differences you hear are the ones the model predicts; between sections the gain differs. The numbers under each clip are the peak pressure and sound pressure level at the listener, the RMS pressure over the clip, the spectral centroid of the sound between 0.2 and 1.2 s (a measure of brightness), and fitted 60 dB decay times of a low and a high band.</p>
17<ul class="toc"><li><a href="#strike-speed">Drumstick: stick speed</a></li><li><a href="#strike-mass">Drumstick: stick mass</a></li><li><a href="#strike-stiffness">Drumstick: tip hardness</a></li></ul>
18<section id="strike-speed">
19<h2>Drumstick: stick speed</h2>
20<p>A wooden stick tip (30 g effective mass) strikes the sheet at 70 percent of its width and 35 percent of its height. Speed sets both the loudness and the character: the contact force grows with speed, the contact shortens, and more energy reaches the high modes. The sound grows brighter as well as louder.</p>
21<p class="dim">All clips in this section share the same playback gain (-10 dB relative to 1 Pa = 0 dBFS), so their loudness differences are real. Spectrograms: 0 to 5 kHz over the clip, 80 dB range, shared color scale.</p>
22<div class="cards"><div class="card">
23 <div class="label">0.5 m/s</div>
24 <audio controls preload="none" src="clips/strike-speed-0.wav"></audio>
25 <img src="clips/strike-speed-0.png" alt="spectrogram" width="640" height="200">
26 <div class="metrics">
27 <div>peak 0.330 Pa (84 dB SPL)</div>
28 <div>RMS 1.4 mPa</div>
29 <div>centroid 211 Hz</div>
30 <div>T60 100-500 Hz 4.8 s, 2-8 kHz 7.8 s</div>
31 <div>contact force 28 N</div>
32 <div class="dim">wav peak -19.6 dBFS</div>
33 </div>
34 <a href="../../?excitation=strike&strikeVelocity=0.5&spacing=0.004&autostart=1">Open in simulator</a>
35</div>
36<div class="card">
37 <div class="label">1 m/s</div>
38 <audio controls preload="none" src="clips/strike-speed-1.wav"></audio>
39 <img src="clips/strike-speed-1.png" alt="spectrogram" width="640" height="200">
40 <div class="metrics">
41 <div>peak 0.720 Pa (91 dB SPL)</div>
42 <div>RMS 2.9 mPa</div>
43 <div>centroid 236 Hz</div>
44 <div>T60 100-500 Hz 4.8 s, 2-8 kHz 6.1 s</div>
45 <div>contact force 57 N</div>
46 <div class="dim">wav peak -12.9 dBFS</div>
47 </div>
48 <a href="../../?excitation=strike&strikeVelocity=1&spacing=0.004&autostart=1">Open in simulator</a>
49</div>
50<div class="card">
51 <div class="label">2 m/s</div>
52 <audio controls preload="none" src="clips/strike-speed-2.wav"></audio>
53 <img src="clips/strike-speed-2.png" alt="spectrogram" width="640" height="200">
54 <div class="metrics">
55 <div>peak 1.483 Pa (97 dB SPL)</div>
56 <div>RMS 6.3 mPa</div>
57 <div>centroid 220 Hz</div>
58 <div>T60 100-500 Hz 4.5 s, 2-8 kHz 4.8 s</div>
59 <div>contact force 117 N</div>
60 <div class="dim">wav peak -6.6 dBFS</div>
61 </div>
62 <a href="../../?excitation=strike&strikeVelocity=2&spacing=0.004&autostart=1">Open in simulator</a>
63</div>
64<div class="card">
65 <div class="label">3 m/s</div>
66 <audio controls preload="none" src="clips/strike-speed-3.wav"></audio>
67 <img src="clips/strike-speed-3.png" alt="spectrogram" width="640" height="200">
68 <div class="metrics">
69 <div>peak 2.205 Pa (101 dB SPL)</div>
70 <div>RMS 9.5 mPa</div>
71 <div>centroid 435 Hz</div>
72 <div>T60 100-500 Hz 4.6 s, 2-8 kHz 4.0 s</div>
73 <div>contact force 179 N</div>
74 <div class="dim">wav peak -3.1 dBFS</div>
75 </div>
76 <a href="../../?excitation=strike&strikeVelocity=3&spacing=0.004&autostart=1">Open in simulator</a>
77</div>
78<div class="card">
79 <div class="label">4.5 m/s</div>
80 <audio controls preload="none" src="clips/strike-speed-4.wav"></audio>
81 <img src="clips/strike-speed-4.png" alt="spectrogram" width="640" height="200">
82 <div class="metrics">
83 <div>peak 3.271 Pa (104 dB SPL)</div>
84 <div>RMS 15.2 mPa</div>
85 <div>centroid 786 Hz</div>
86 <div>T60 100-500 Hz 4.9 s, 2-8 kHz 3.5 s</div>
87 <div>contact force 274 N</div>
88 <div class="dim">wav peak 0.3 dBFS (soft-clipped)</div>
89 </div>
90 <a href="../../?excitation=strike&strikeVelocity=4.5&spacing=0.004&autostart=1">Open in simulator</a>
91</div>
92<div class="card">
93 <div class="label">6 m/s</div>
94 <audio controls preload="none" src="clips/strike-speed-5.wav"></audio>
95 <img src="clips/strike-speed-5.png" alt="spectrogram" width="640" height="200">
96 <div class="metrics">
97 <div>peak 4.558 Pa (107 dB SPL)</div>
98 <div>RMS 22.4 mPa</div>
99 <div>centroid 1578 Hz</div>
100 <div>T60 100-500 Hz 4.5 s, 2-8 kHz 3.2 s</div>
101 <div>contact force 372 N</div>
102 <div class="dim">wav peak 3.2 dBFS (soft-clipped)</div>
103 </div>
104 <a href="../../?excitation=strike&strikeVelocity=6&spacing=0.004&autostart=1">Open in simulator</a>
105</div></div>
106</section>
107<section id="strike-mass">
108<h2>Drumstick: stick mass</h2>
109<p>The same speed with a lighter or heavier stick. A heavier stick carries more momentum, stays in contact longer, and pushes the sheet further, which favours the low modes; a light stick gives a short, bright tap.</p>
110<p class="dim">All clips in this section share the same playback gain (-4 dB relative to 1 Pa = 0 dBFS), so their loudness differences are real. Spectrograms: 0 to 5 kHz over the clip, 80 dB range, shared color scale.</p>
111<div class="cards"><div class="card">
112 <div class="label">10 g</div>
113 <audio controls preload="none" src="clips/strike-mass-0.wav"></audio>
114 <img src="clips/strike-mass-0.png" alt="spectrogram" width="640" height="200">
115 <div class="metrics">
116 <div>peak 1.963 Pa (100 dB SPL)</div>
117 <div>RMS 8.5 mPa</div>
118 <div>centroid 740 Hz</div>
119 <div>T60 100-500 Hz 4.2 s, 2-8 kHz 4.8 s</div>
120 <div>contact force 169 N</div>
121 <div class="dim">wav peak 1.9 dBFS (soft-clipped)</div>
122 </div>
123 <a href="../../?excitation=strike&stickMass=0.01&spacing=0.004&autostart=1">Open in simulator</a>
124</div>
125<div class="card">
126 <div class="label">30 g</div>
127 <audio controls preload="none" src="clips/strike-mass-1.wav"></audio>
128 <img src="clips/strike-mass-1.png" alt="spectrogram" width="640" height="200">
129 <div class="metrics">
130 <div>peak 2.205 Pa (101 dB SPL)</div>
131 <div>RMS 9.5 mPa</div>
132 <div>centroid 435 Hz</div>
133 <div>T60 100-500 Hz 4.6 s, 2-8 kHz 4.0 s</div>
134 <div>contact force 179 N</div>
135 <div class="dim">wav peak 2.9 dBFS (soft-clipped)</div>
136 </div>
137 <a href="../../?excitation=strike&stickMass=0.03&spacing=0.004&autostart=1">Open in simulator</a>
138</div>
139<div class="card">
140 <div class="label">60 g</div>
141 <audio controls preload="none" src="clips/strike-mass-2.wav"></audio>
142 <img src="clips/strike-mass-2.png" alt="spectrogram" width="640" height="200">
143 <div class="metrics">
144 <div>peak 2.270 Pa (101 dB SPL)</div>
145 <div>RMS 10.6 mPa</div>
146 <div>centroid 893 Hz</div>
147 <div>T60 100-500 Hz 4.0 s, 2-8 kHz 3.4 s</div>
148 <div>contact force 182 N</div>
149 <div class="dim">wav peak 3.1 dBFS (soft-clipped)</div>
150 </div>
151 <a href="../../?excitation=strike&stickMass=0.06&spacing=0.004&autostart=1">Open in simulator</a>
152</div>
153<div class="card">
154 <div class="label">120 g</div>
155 <audio controls preload="none" src="clips/strike-mass-3.wav"></audio>
156 <img src="clips/strike-mass-3.png" alt="spectrogram" width="640" height="200">
157 <div class="metrics">
158 <div>peak 2.303 Pa (101 dB SPL)</div>
159 <div>RMS 16.0 mPa</div>
160 <div>centroid 3406 Hz</div>
161 <div>T60 100-500 Hz 4.1 s, 2-8 kHz 3.0 s</div>
162 <div>contact force 229 N</div>
163 <div class="dim">wav peak 3.2 dBFS (soft-clipped)</div>
164 </div>
165 <a href="../../?excitation=strike&stickMass=0.12&spacing=0.004&autostart=1">Open in simulator</a>
166</div></div>
167</section>
168<section id="strike-stiffness">
169<h2>Drumstick: tip hardness</h2>
170<p>The Hertz contact stiffness K stands for the hardness of the tip: a soft (rubber or felt) tip has a low K and a long, gentle contact that excites mainly the low modes; a hard tip (dense wood, or a metal beater) has a high K and a sharp click.</p>
171<p class="dim">All clips in this section share the same playback gain (-6 dB relative to 1 Pa = 0 dBFS), so their loudness differences are real. Spectrograms: 0 to 5 kHz over the clip, 80 dB range, shared color scale.</p>
172<div class="cards"><div class="card">
173 <div class="label">5000000 N/m^1.5</div>
174 <audio controls preload="none" src="clips/strike-stiffness-0.wav"></audio>
175 <img src="clips/strike-stiffness-0.png" alt="spectrogram" width="640" height="200">
176 <div class="metrics">
177 <div>peak 0.261 Pa (82 dB SPL)</div>
178 <div>RMS 4.2 mPa</div>
179 <div>centroid 404 Hz</div>
180 <div>T60 100-500 Hz 4.4 s, 2-8 kHz 4.3 s</div>
181 <div>contact force 113 N</div>
182 <div class="dim">wav peak -17.7 dBFS</div>
183 </div>
184 <a href="../../?excitation=strike&contactStiffness=5000000&spacing=0.004&autostart=1">Open in simulator</a>
185</div>
186<div class="card">
187 <div class="label">50000000 N/m^1.5</div>
188 <audio controls preload="none" src="clips/strike-stiffness-1.wav"></audio>
189 <img src="clips/strike-stiffness-1.png" alt="spectrogram" width="640" height="200">
190 <div class="metrics">
191 <div>peak 1.085 Pa (95 dB SPL)</div>
192 <div>RMS 6.4 mPa</div>
193 <div>centroid 381 Hz</div>
194 <div>T60 100-500 Hz 4.6 s, 2-8 kHz 4.1 s</div>
195 <div>contact force 150 N</div>
196 <div class="dim">wav peak -5.3 dBFS</div>
197 </div>
198 <a href="../../?excitation=strike&contactStiffness=50000000&spacing=0.004&autostart=1">Open in simulator</a>
199</div>
200<div class="card">
201 <div class="label">500000000 N/m^1.5</div>
202 <audio controls preload="none" src="clips/strike-stiffness-2.wav"></audio>
203 <img src="clips/strike-stiffness-2.png" alt="spectrogram" width="640" height="200">
204 <div class="metrics">
205 <div>peak 2.205 Pa (101 dB SPL)</div>
206 <div>RMS 9.5 mPa</div>
207 <div>centroid 435 Hz</div>
208 <div>T60 100-500 Hz 4.6 s, 2-8 kHz 4.0 s</div>
209 <div>contact force 179 N</div>
210 <div class="dim">wav peak 0.9 dBFS (soft-clipped)</div>
211 </div>
212 <a href="../../?excitation=strike&contactStiffness=500000000&spacing=0.004&autostart=1">Open in simulator</a>
213</div>
214<div class="card">
215 <div class="label">5000000000 N/m^1.5</div>
216 <audio controls preload="none" src="clips/strike-stiffness-3.wav"></audio>
217 <img src="clips/strike-stiffness-3.png" alt="spectrogram" width="640" height="200">
218 <div class="metrics">
219 <div>peak 2.800 Pa (103 dB SPL)</div>
220 <div>RMS 10.3 mPa</div>
221 <div>centroid 463 Hz</div>
222 <div>T60 100-500 Hz 4.8 s, 2-8 kHz 4.1 s</div>
223 <div>contact force 354 N</div>
224 <div class="dim">wav peak 2.9 dBFS (soft-clipped)</div>
225 </div>
226 <a href="../../?excitation=strike&contactStiffness=5000000000&spacing=0.004&autostart=1">Open in simulator</a>
227</div></div>
228</section>
229<p class="dim">Generated by <code>steelsim gallery</code>; parameters not listed take the simulator defaults.</p>
230</body></html>
↑↓ move↵openescclose