1793cecTime-domain nonlinear shell cymbal after Samejima (2021)Jeremy Magland 1import type { RenderResponse } from '../worker/renderWorker';
3export default function DiagnosticsPanel({ result }: { result: RenderResponse }) {
4 const d = result.diag;
5 return (
6 <div className="diag">
7 <table>
8 <tbody>
9 <tr>
10 <th>Stroke</th>
11 <td>
12 {d.strokesPlayed === 1
13 ? `single, hand ${d.meanV.toFixed(2)} m/s`
14 : `${d.strokesPlayed} strokes, mean hand ${d.meanV.toFixed(2)} m/s`}
15 {' '}→ tip {Math.abs(d.contactVel).toFixed(2)} m/s at contact
16 </td>
17 </tr>
18 <tr>
19 <th>Contact</th>
20 <td>
21 {d.peakForceN.toFixed(0)} N peak · {d.peakXiMm.toFixed(2)} mm compression ·{' '}
22 {d.contactMs.toFixed(1)} ms over {d.contactEvents} event{d.contactEvents === 1 ? '' : 's'}
23 </td>
24 </tr>
25 <tr>
26 <th>Where</th>
27 <td>
28 strike r = {(d.strikeRadiusM * 100).toFixed(1)} cm · pickup r ={' '}
29 {(d.pickupRadiusM * 100).toFixed(1)} cm
30 </td>
31 </tr>
32 <tr>
33 <th>Shell</th>
34 <td>
35 curvature radius {d.RsM.toFixed(2)} m · peak {d.peakDispMm.toFixed(1)} mm ={' '}
36 {d.peakDispThickness.toFixed(1)} thicknesses
37 </td>
38 </tr>
39 <tr>
40 <th>Pickup</th>
41 <td>{d.peakAccel.toExponential(2)} m/s² peak acceleration</td>
42 </tr>
43 <tr>
44 <th>Integration</th>
45 <td>
46 {d.nsteps.toLocaleString()} steps at {(d.simRate / 1000).toFixed(1)} kHz ·{' '}
47 {d.nTheta} azimuthal points · oversample {d.oversample}
48 </td>
49 </tr>
50 <tr>
51 <th>Length</th>
52 <td>
53 {d.durationS.toFixed(2)} s · {result.quality} · rendered in{' '}
65ecc03Run the time loop on the GPU in the web app when WebGPU is availableJeremy Magland 54 {(d.renderMs / 1000).toFixed(1)} s{' '}
55 {d.backend === 'webgpu' ? 'on the GPU' : 'on the CPU'}
57 </tr>
58 </tbody>
59 </table>
60 {d.warnings.map((w, i) => (
61 <div key={i} className="warning">⚠ {w}</div>
62 ))}
63 </div>
64 );
65}