113 lines
5.8 KiB
XML
113 lines
5.8 KiB
XML
<svg width="700" height="300" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<marker id="sa-arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
|
<polygon points="0,0 8,3 0,6" fill="#666"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<text x="350" y="22" fill="#333" font-size="14" font-weight="bold" text-anchor="middle">Sampling: Proper vs. Aliased</text>
|
|
|
|
<!-- ===== LEFT PANEL: Proper Sampling ===== -->
|
|
<text x="170" y="48" fill="#27ae60" font-size="12" font-weight="bold" text-anchor="middle">fs > 2f : Correct Sampling</text>
|
|
|
|
<!-- Left axes -->
|
|
<line x1="30" y1="150" x2="315" y2="150" stroke="#999" stroke-width="0.8" marker-end="url(#sa-arrow)"/>
|
|
<line x1="30" y1="235" x2="30" y2="55" stroke="#999" stroke-width="0.8" marker-end="url(#sa-arrow)"/>
|
|
<text x="320" y="155" fill="#666" font-size="8">t</text>
|
|
|
|
<!-- Continuous sine wave (left) — 3 full periods over 285px, period=95px -->
|
|
<path d="M 30,150
|
|
C 42,150 48,85 77,85 C 106,85 112,150 125,150
|
|
C 138,150 143,215 172,215 C 201,215 207,150 220,150
|
|
C 233,150 238,85 267,85 C 296,85 302,150 315,150" fill="none" stroke="#3498db" stroke-width="1.8" opacity="0.5"/>
|
|
|
|
<!-- Sample dots — 8 samples per period = 24 dots, evenly spaced ~12px -->
|
|
<!-- Period 1: x=30 to x=125 -->
|
|
<circle cx="30" cy="150" r="3" fill="#27ae60"/>
|
|
<circle cx="42" cy="126" r="3" fill="#27ae60"/>
|
|
<circle cx="54" cy="100" r="3" fill="#27ae60"/>
|
|
<circle cx="66" cy="87" r="3" fill="#27ae60"/>
|
|
<circle cx="77" cy="85" r="3" fill="#27ae60"/>
|
|
<circle cx="89" cy="96" r="3" fill="#27ae60"/>
|
|
<circle cx="101" cy="120" r="3" fill="#27ae60"/>
|
|
<circle cx="113" cy="143" r="3" fill="#27ae60"/>
|
|
<!-- Period 2: x=125 to x=220 -->
|
|
<circle cx="125" cy="150" r="3" fill="#27ae60"/>
|
|
<circle cx="137" cy="174" r="3" fill="#27ae60"/>
|
|
<circle cx="149" cy="200" r="3" fill="#27ae60"/>
|
|
<circle cx="160" cy="213" r="3" fill="#27ae60"/>
|
|
<circle cx="172" cy="215" r="3" fill="#27ae60"/>
|
|
<circle cx="184" cy="204" r="3" fill="#27ae60"/>
|
|
<circle cx="196" cy="180" r="3" fill="#27ae60"/>
|
|
<circle cx="208" cy="157" r="3" fill="#27ae60"/>
|
|
<!-- Period 3: x=220 to x=315 -->
|
|
<circle cx="220" cy="150" r="3" fill="#27ae60"/>
|
|
<circle cx="232" cy="126" r="3" fill="#27ae60"/>
|
|
<circle cx="244" cy="100" r="3" fill="#27ae60"/>
|
|
<circle cx="255" cy="87" r="3" fill="#27ae60"/>
|
|
<circle cx="267" cy="85" r="3" fill="#27ae60"/>
|
|
<circle cx="279" cy="96" r="3" fill="#27ae60"/>
|
|
<circle cx="291" cy="120" r="3" fill="#27ae60"/>
|
|
<circle cx="303" cy="143" r="3" fill="#27ae60"/>
|
|
|
|
<!-- Vertical stems from samples to axis -->
|
|
<line x1="77" y1="85" x2="77" y2="150" stroke="#27ae60" stroke-width="0.6" opacity="0.35"/>
|
|
<line x1="172" y1="215" x2="172" y2="150" stroke="#27ae60" stroke-width="0.6" opacity="0.35"/>
|
|
<line x1="267" y1="85" x2="267" y2="150" stroke="#27ae60" stroke-width="0.6" opacity="0.35"/>
|
|
|
|
<text x="170" y="243" fill="#27ae60" font-size="9" text-anchor="middle">Reconstructed signal matches original</text>
|
|
|
|
<!-- ===== Divider ===== -->
|
|
<line x1="345" y1="40" x2="345" y2="250" stroke="#ddd" stroke-width="1.5" stroke-dasharray="5,4"/>
|
|
|
|
<!-- ===== RIGHT PANEL: Aliased ===== -->
|
|
<text x="525" y="48" fill="#e74c3c" font-size="12" font-weight="bold" text-anchor="middle">fs < 2f : Aliased</text>
|
|
|
|
<!-- Right axes -->
|
|
<line x1="375" y1="150" x2="670" y2="150" stroke="#999" stroke-width="0.8" marker-end="url(#sa-arrow)"/>
|
|
<line x1="375" y1="235" x2="375" y2="55" stroke="#999" stroke-width="0.8" marker-end="url(#sa-arrow)"/>
|
|
<text x="675" y="155" fill="#666" font-size="8">t</text>
|
|
|
|
<!-- Same high-frequency sine wave (faint) — 3 periods, period=95px -->
|
|
<path d="M 375,150
|
|
C 387,150 393,85 422,85 C 451,85 457,150 470,150
|
|
C 483,150 488,215 517,215 C 546,215 552,150 565,150
|
|
C 578,150 583,85 612,85 C 641,85 647,150 660,150" fill="none" stroke="#3498db" stroke-width="1.5" opacity="0.25"/>
|
|
|
|
<!-- Undersampled dots — only ~1.3 samples per period (below Nyquist) -->
|
|
<!-- Place 4 dots across 3 periods (285px), spaced ~72px apart -->
|
|
<!-- These land at various phases of the high-freq wave -->
|
|
<circle cx="375" cy="150" r="4.5" fill="#e74c3c"/>
|
|
<line x1="375" y1="150" x2="375" y2="150" stroke="#e74c3c" stroke-width="0.8"/>
|
|
|
|
<circle cx="447" cy="92" r="4.5" fill="#e74c3c"/>
|
|
<line x1="447" y1="92" x2="447" y2="150" stroke="#e74c3c" stroke-width="0.8" opacity="0.4"/>
|
|
|
|
<circle cx="519" cy="210" r="4.5" fill="#e74c3c"/>
|
|
<line x1="519" y1="210" x2="519" y2="150" stroke="#e74c3c" stroke-width="0.8" opacity="0.4"/>
|
|
|
|
<circle cx="591" cy="95" r="4.5" fill="#e74c3c"/>
|
|
<line x1="591" y1="95" x2="591" y2="150" stroke="#e74c3c" stroke-width="0.8" opacity="0.4"/>
|
|
|
|
<circle cx="660" cy="150" r="4.5" fill="#e74c3c"/>
|
|
|
|
<!-- Aliased (false) low-frequency wave through the sample points -->
|
|
<path d="M 375,150
|
|
C 395,120 420,92 447,92
|
|
C 475,92 497,200 519,210
|
|
C 541,220 570,100 591,95
|
|
C 612,90 640,140 660,150" fill="none" stroke="#e74c3c" stroke-width="2" stroke-dasharray="8,4"/>
|
|
|
|
<!-- Label for the aliased wave -->
|
|
<text x="525" y="240" fill="#e74c3c" font-size="9" text-anchor="middle">Apparent low-frequency signal (alias)</text>
|
|
|
|
<!-- Legend -->
|
|
<line x1="395" y1="70" x2="420" y2="70" stroke="#3498db" stroke-width="1.5" opacity="0.4"/>
|
|
<text x="425" y="73" fill="#3498db" font-size="8">true signal (hidden)</text>
|
|
<line x1="500" y1="70" x2="525" y2="70" stroke="#e74c3c" stroke-width="2" stroke-dasharray="6,3"/>
|
|
<text x="530" y="73" fill="#e74c3c" font-size="8">aliased reconstruction</text>
|
|
|
|
<!-- Bottom note -->
|
|
<rect x="90" y="268" width="520" height="22" rx="4" fill="#f5f5f5" stroke="#333" stroke-width="0.8"/>
|
|
<text x="350" y="283" fill="#333" font-size="10" text-anchor="middle">Nyquist theorem: sample at >= 2x the highest frequency to avoid aliasing</text>
|
|
</svg> |