public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

223015b phase 3: nyquist-diagram demo (kap1 folie 35 nyquist-theorem). drei vergleichs-cases mit derselben grundwelle (8 cycles über 880px svg): (1) aliasing rot f_s=0.9f, 8 sample-punkte sitzen mathematisch korrekt auf der welle und ergeben verbunden eine ganz andere langsamere kurve, (2) nyquist-grenze gelb f_s=2f, 16 punkte exakt auf peak/tal und zigzag-verbindung zeigt mathematisches minimum, (3) überabtastung grün f_s=8f mit 64 dichten punkten die der welle treu folgen wie eine CD. punkte mit python berechnet (y = 70 - 45*sin(2π*(x-20)/105) für jede sample-position). verdict erklärt 44,1 khz: ohr hört bis 20 khz, 2x20=40 plus 4,1 sicherheitsmarge

Browse Source
This commit is contained in:
libretech
2026-05-14 11:25:50 +02:00
parent 478966903a
commit fc941c6ac3
2 changed files with 232 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015b/assets/demos/nyquist-diagram.html
+232
View File
@@ -0,0 +1,232 @@
<!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>
slides/223015b/assets/demos/nyquist-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB