233 lines
11 KiB
HTML
233 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Nyquist-Shannon — wie oft muss man messen?</title>
|
||
<style>
|
||
:root {
|
||
--dark: #1a1a2e;
|
||
--muted: #6b7280;
|
||
--soft: #f8fafc;
|
||
--border: #cbd5e1;
|
||
--hl: #d63384;
|
||
--bad: #ef4444;
|
||
--warn: #f59e0b;
|
||
--good: #16a34a;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||
body { padding: 28px 40px; }
|
||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||
.sub strong { color: var(--dark); }
|
||
|
||
.cases {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.case {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
gap: 18px;
|
||
align-items: center;
|
||
border: 2px solid;
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
background: #fff;
|
||
}
|
||
.case.bad { border-color: var(--bad); }
|
||
.case.warn { border-color: var(--warn); }
|
||
.case.good { border-color: var(--good); }
|
||
|
||
.case-meta { display: flex; flex-direction: column; gap: 4px; }
|
||
.case-tag {
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--muted);
|
||
}
|
||
.case-name { font-size: 1.05rem; font-weight: 700; }
|
||
.case.bad .case-name { color: var(--bad); }
|
||
.case.warn .case-name { color: var(--warn); }
|
||
.case.good .case-name { color: var(--good); }
|
||
.case-rate { font-family: ui-monospace, monospace; font-size: 0.82rem; color: var(--dark); }
|
||
.case-note { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
|
||
|
||
.plot { background: var(--soft); border-radius: 8px; }
|
||
.plot svg { display: block; }
|
||
|
||
.verdict {
|
||
margin-top: 20px;
|
||
max-width: 1180px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
border: 2px solid var(--hl);
|
||
border-radius: 12px;
|
||
padding: 14px 22px;
|
||
}
|
||
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
|
||
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
|
||
.verdict-a strong { color: var(--hl); }
|
||
.verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Nyquist-Shannon — wie oft müssen wir messen?</h1>
|
||
<div class="sub">Dieselbe Welle, drei Sample-Raten. Eine fällt durch, eine reicht knapp, eine ist sicher.</div>
|
||
|
||
<div class="cases">
|
||
|
||
<div class="case bad">
|
||
<div class="case-meta">
|
||
<div class="case-tag">Zu wenig</div>
|
||
<div class="case-name">Aliasing</div>
|
||
<div class="case-rate">f<sub>s</sub> = 0,9 · f</div>
|
||
<div class="case-note">Die Sample-Punkte sitzen auf der Welle — aber verbunden sehen sie aus wie eine <strong>ganz andere, langsamere</strong> Welle.</div>
|
||
</div>
|
||
<div class="plot">
|
||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
|
||
<polyline points="20,70 136.7,41 253.4,25.7 370.1,31.2 486.8,54.9 603.5,85.8 720.2,109.2 836.9,114.2"
|
||
stroke="#ef4444" stroke-width="2.5" fill="none"/>
|
||
<circle cx="20" cy="70" r="5" fill="#ef4444"/>
|
||
<circle cx="136.7" cy="41" r="5" fill="#ef4444"/>
|
||
<circle cx="253.4" cy="25.7" r="5" fill="#ef4444"/>
|
||
<circle cx="370.1" cy="31.2" r="5" fill="#ef4444"/>
|
||
<circle cx="486.8" cy="54.9" r="5" fill="#ef4444"/>
|
||
<circle cx="603.5" cy="85.8" r="5" fill="#ef4444"/>
|
||
<circle cx="720.2" cy="109.2" r="5" fill="#ef4444"/>
|
||
<circle cx="836.9" cy="114.2" r="5" fill="#ef4444"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="case warn">
|
||
<div class="case-meta">
|
||
<div class="case-tag">Genau</div>
|
||
<div class="case-name">Nyquist-Grenze</div>
|
||
<div class="case-rate">f<sub>s</sub> = 2 · f</div>
|
||
<div class="case-note">Sample exakt auf <strong>Peak und Tal</strong>. Mathematisch reicht das — visuell sieht es kaputt aus.</div>
|
||
</div>
|
||
<div class="plot">
|
||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
|
||
<polyline points="46.25,25 98.75,115 151.25,25 203.75,115 256.25,25 308.75,115 361.25,25 413.75,115 466.25,25 518.75,115 571.25,25 623.75,115 676.25,25 728.75,115 781.25,25 833.75,115"
|
||
stroke="#f59e0b" stroke-width="2" fill="none" opacity="0.5"/>
|
||
<circle cx="46.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="98.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="151.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="203.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="256.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="308.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="361.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="413.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="466.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="518.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="571.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="623.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="676.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="728.75" cy="115" r="5" fill="#f59e0b"/>
|
||
<circle cx="781.25" cy="25" r="5" fill="#f59e0b"/>
|
||
<circle cx="833.75" cy="115" r="5" fill="#f59e0b"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="case good">
|
||
<div class="case-meta">
|
||
<div class="case-tag">Sicher</div>
|
||
<div class="case-name">Überabtastung</div>
|
||
<div class="case-rate">f<sub>s</sub> = 8 · f</div>
|
||
<div class="case-note">Genug Punkte — die Welle wird Punkt für Punkt nachgezeichnet. So macht es eine CD.</div>
|
||
</div>
|
||
<div class="plot">
|
||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||
stroke="#16a34a" stroke-width="2.5" fill="none" opacity="0.9"/>
|
||
<circle cx="20" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="33.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="46.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="59.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="72.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="85.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="98.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="111.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="125" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="138.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="151.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="164.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="177.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="190.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="203.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="216.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="230" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="243.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="256.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="269.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="282.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="295.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="308.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="321.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="335" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="348.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="361.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="374.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="387.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="400.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="413.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="426.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="440" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="453.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="466.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="479.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="492.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="505.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="518.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="531.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="545" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="558.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="571.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="584.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="597.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="610.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="623.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="636.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="650" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="663.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="676.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="689.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="702.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="715.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="728.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="741.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="755" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="768.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="781.2" cy="25" r="2.5" fill="#16a34a"/>
|
||
<circle cx="794.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||
<circle cx="807.5" cy="70" r="2.5" fill="#16a34a"/>
|
||
<circle cx="820.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
<circle cx="833.8" cy="115" r="2.5" fill="#16a34a"/>
|
||
<circle cx="846.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="verdict">
|
||
<div class="verdict-q">f<sub>s</sub> ≥ 2 · f<sub>max</sub>. So einfach. So endgültig.</div>
|
||
<div class="verdict-a">Das Ohr hört bis <strong>20 kHz</strong>. 2 × 20 = 40 kHz. Die CD nimmt <code>44,1 kHz</code> — die 4,1 sind Sicherheits-Marge.</div>
|
||
</div>
|
||
</body>
|
||
</html>
|