30:T6bc,diagram = { const sliderPos = document.querySelectorAll("input[type='range']")[0].getBoundingClientRect(); const svg = htl.svg``; const xLeft = sliderPos.x - 12.5 // account for margin :shrug: const xRight = xLeft + sliderPos.width; const xScale = d3.scaleLinear().domain([4, 100]).range([xLeft, xRight]); const criticalBandWidth = xScale(signalWidth); const goodOpacity = 2 * combWidth > signalWidth ? 0.2 : 1.0; const badOpacity = 2 * combWidth > signalWidth ? 1.0 : 0.2; const badColor = d3.lab(70, 30, 0); const goodColor = d3.lab(70, -30, 0); const goodSampling = htl.svg``; const badSampling = htl.svg``; const line = d3.line(); goodSampling.setAttribute("d", line([[xLeft, 18], [criticalBandWidth-2, 18], [criticalBandWidth-2, 2]])); badSampling.setAttribute("d", line([[xRight, 18], [criticalBandWidth+2, 18], [criticalBandWidth+2, 2]])); const goodLabel = htl.svg`Good`; const badLabel = htl.svg`Aliasing`; svg.appendChild(goodLabel); svg.appendChild(badLabel); svg.appendChild(goodSampling); svg.appendChild(badSampling); // svg.appendChild(htl.svg``); // svg.appendChild(htl.svg``); // svg.appendChild(htl.svg` return svg; }31:[] 2e:{"title":"Frequency Aliasing","cells":[{"id":0,"value":"viewof title = md`# Frequency Aliasing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"viewof content = md`**Frequency Aliasing** is the phenomenon that caused by undersampling of a continuous signal. In particular, the discrete time series derived from a too coarse sampling of a continuous signal actulally contains contributions from high-frequency components of that continuous signal. Those high frequencies ***fold back*** onto the spectrum of the discrete time series and appear as lower frequencies (i.e ***alias frequency***) :\n\nAn example of a ${fS}-Hz sinusoid resampled to ${combWidth} ms is shown below (use the slides to change parameters). The Nyquist frequency for an ${combWidth}-ms sampling interval is ${fN} Hz. The true signal frequency is ${fS} Hz.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"dashboard = html` \n \n \n \n \n

\n ${viewof fS}\n

\n ${viewof combWidth}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"dashboard2 = html` \n \n \n \n \n \n

\n ${viewof animated}\n

\n ${viewof status}\n

\n ${diagram}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"svg = {\n d3.select(staticSVG.el).selectAll(\"path\").attr(\"transform\", `translate(${-phase}, 50)`);\n return staticSVG.el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"viewof content2 = md`\n---\n${guessTheMovie}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"viewof status = md`Status: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"viewof fS = Inputs.range([10, 250], {value: 150, step: 1, label: \"Signal Frequency (Hz)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof combWidth = Inputs.range([2, 50], {value: 8, step: 1, label: \"Sampling Interval (ms)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof animated = Inputs.toggle({label: \"Animate signal\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"guessTheMovie = {\nlet guessTheMovie = md `👉Nothing happened to the signal after resampling because the Nyquist frequency is higher than the true signal frequency.`;\n if (2 * combWidth > signalWidth) {guessTheMovie = md `As a result of resampling, the signal with ${fS}-Hz frequency ***folded back*** onto the spectrum and appear at its ***alias frequency*** of ${Alias_Frequency} Hz.\nThis alias frequency ***f_a*** is computed using the following formula:\\n\nf_a = |2mf_N - f_s| \\n\nwhere ***f_N*** is the folding frequency, ***f_s*** is the signal frequency, and ***m*** is an integer such that ***f_a < f_N***\\n\n👉By using a single-frequency sinusoid, we see that frequencies above the Nyquist really are not lost after sampling, but appear at frequencies below the Nyquist.`}\n yield guessTheMovie\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"Alias_Frequency = {\n let fa = 0;\n if (2 * combWidth > signalWidth){\n for (let i = 1; i < 500; i += 1) {\n fa = Math.abs(2*i*fN - fS);\n if (fa <= fN) yield fa.toFixed(2);\n }}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"fN = (1000/(2 * combWidth)).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"signalWidth = 1000/fS","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"phase = {\n let result = 0;\n if (animated) {\n result = (elapsed * signalWidth) % signalWidth;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"nowAtDocumentBoot = {\n return Number(new Date()); // we need this to avoid numerical issues with huge phases\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"elapsed = (now - nowAtDocumentBoot) / 1000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"//width = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"staticSVG = {\n console.log(\"Foo\");\n const svg = htl.svg``\n const sel = d3.select(svg);\n sel\n .append(\"path\")\n .attr(\"d\", signal)\n .attr(\"stroke\", \"red\")\n .attr(\"fill\", \"none\");\n const coverage = (combWidth - 2) / combWidth;\n const count = ~~(width / 2) / combWidth;\n combMask(sel, coverage, combWidth, count)\n .attr(\"transform\", \"translate(100, 0)\");\n return { el: svg };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"function sineCurve(freqInInvPixels, amplitudeInPixels) {\n const nPoints = 2 * width; \n const curveScale = d3.scaleLinear().domain([0, nPoints]).range([0, width * Math.PI * freqInInvPixels])\n const xScale = d3.scaleLinear().domain([0, nPoints]).range([0, width]);\n const line = d3.line();\n const points = d3.range(~~(2 * width + 4/freqInInvPixels)).map(x => [xScale(x), Math.sin(curveScale(x)) * amplitudeInPixels]);\n return line(points);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"signal = sineCurve(2/signalWidth, 30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function combMask(svg, coverage, width, count) {\n return svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(d3.range(count))\n .join(\"rect\")\n .attr(\"x\", d => d * width)\n .attr(\"width\", width * coverage)\n .attr(\"fill\", \"rgb(240, 240, 240)\")\n .attr(\"y\", 0)\n .attr(\"height\", 100)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}