223015b kap2: demos + barn rgb/cmyk
- 18 demos aus refactor/didaktik-rewrite-2026 cherry-picked (aliasing-paar, byte-fuer-byte, container-vs-codec, drei-dateien, jpeg-pipeline, kap02-05-eroeffner, kb-vs-kib, nyquist-diagram, pivot-signal-zu-byte, psychoakustik/psychovisualitaet-grafik, raster-vs-vektor, summary-kap02, summary-organizer, usb-c-drei-achsen) - barn-rgb.png + barn-cmyk.png neu generiert (analog zu ybcbr.webp, kanaltrennung mit korrekter k-extraktion) - lv-original-vs-fake.jpg + 02-bild-audio-video.md slides wired up
This commit is contained in:
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Aliasing — derselbe Fehler in zwei Sinnen</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--audio: #ea580c;
|
||||
--bild: #2563eb;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pair {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modality {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.modality.audio { border-color: var(--audio); }
|
||||
.modality.bild { border-color: var(--bild); }
|
||||
|
||||
.mod-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.mod-name { font-size: 1.25rem; font-weight: 700; }
|
||||
.modality.audio .mod-name { color: var(--audio); }
|
||||
.modality.bild .mod-name { color: var(--bild); }
|
||||
.mod-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
|
||||
.canvas {
|
||||
background: var(--soft);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.canvas svg { display: block; }
|
||||
|
||||
.scene-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.scene { display: flex; flex-direction: column; gap: 4px; }
|
||||
.scene-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.scene-cap {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
.scene-cap strong { color: var(--dark); }
|
||||
|
||||
.ear-eye {
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
color: var(--dark);
|
||||
}
|
||||
.ear-eye .arrow { color: var(--hl); font-weight: 700; }
|
||||
.ear-eye-headline {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.modality.audio .ear-eye-headline { color: var(--audio); }
|
||||
.modality.bild .ear-eye-headline { color: var(--bild); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1200px;
|
||||
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.1rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Aliasing — derselbe Fehler in zwei Sinnen</h1>
|
||||
<div class="sub">Was im Ohr <strong>Brummen</strong> macht, macht im Auge <strong>Moiré</strong>. Wurzel: Sampling zu grob.</div>
|
||||
|
||||
<div class="pair">
|
||||
|
||||
<div class="modality audio">
|
||||
<div class="mod-head">
|
||||
<span class="mod-name">Audio</span>
|
||||
<span class="mod-tag">Unterabtastung</span>
|
||||
</div>
|
||||
|
||||
<div class="scene-pair">
|
||||
<div class="scene">
|
||||
<div class="scene-label">Original (18 kHz)</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
|
||||
stroke="#ea580c" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap">20 Schwingungen<br>schnelle Welle</div>
|
||||
</div>
|
||||
<div class="scene">
|
||||
<div class="scene-label">Bei 22 kHz gesampelt</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
|
||||
stroke="#fed7aa" stroke-width="1.2" fill="none"/>
|
||||
<path d="M0,40 Q70,10 140,40 T280,40"
|
||||
stroke="#ea580c" stroke-width="2.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap"><strong>2 Schwingungen</strong><br>Brumm-Frequenz</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ear-eye">
|
||||
<div class="ear-eye-headline">Was das Ohr hört</div>
|
||||
Ein schriller 18-kHz-Ton wird zu einem dumpfen 4-kHz-Brumm. Das hohe ist <strong>nicht leiser</strong> — es ist <strong>verloren und falsch ersetzt</strong>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modality bild">
|
||||
<div class="mod-head">
|
||||
<span class="mod-name">Bild</span>
|
||||
<span class="mod-tag">Moiré-Effekt</span>
|
||||
</div>
|
||||
|
||||
<div class="scene-pair">
|
||||
<div class="scene">
|
||||
<div class="scene-label">Original (feine Streifen)</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<pattern id="fine-real" x="0" y="0" width="3" height="80" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="1.5" height="80" fill="#1e3a8a"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="280" height="80" fill="url(#fine-real)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap">93 Linien<br>volle Auflösung</div>
|
||||
</div>
|
||||
<div class="scene">
|
||||
<div class="scene-label">In niedriger DPI gerendert</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="moire-bands" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#1e3a8a"/>
|
||||
<stop offset="10%" stop-color="#bfdbfe"/>
|
||||
<stop offset="20%" stop-color="#1e3a8a"/>
|
||||
<stop offset="30%" stop-color="#bfdbfe"/>
|
||||
<stop offset="40%" stop-color="#1e3a8a"/>
|
||||
<stop offset="50%" stop-color="#bfdbfe"/>
|
||||
<stop offset="60%" stop-color="#1e3a8a"/>
|
||||
<stop offset="70%" stop-color="#bfdbfe"/>
|
||||
<stop offset="80%" stop-color="#1e3a8a"/>
|
||||
<stop offset="90%" stop-color="#bfdbfe"/>
|
||||
<stop offset="100%" stop-color="#1e3a8a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="280" height="80" fill="url(#moire-bands)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap"><strong>5 breite Bänder</strong><br>Moiré-Frequenz</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ear-eye">
|
||||
<div class="ear-eye-headline">Was das Auge sieht</div>
|
||||
Feine Linien sind weg, dafür <strong>breite Streifen</strong>, die nie da waren. Aus 93 Linien werden 5 Bänder — das Bild lügt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Aliasing kennt keine Modalität. Es ist ein <strong>mathematischer</strong> Fehler — kein technischer.</div>
|
||||
<div class="verdict-a">Egal ob Ton, Bild, Video, Radar, GPS — Sampling muss immer mindestens <strong>doppelt</strong> so dicht sein wie das Signal. Sonst tauscht die Realität Frequenzen aus.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user