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":"Aliasing","cells":[{"id":0,"value":"# Aliasing","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"viewof signalWidth = Inputs.range([4, 100], {value: 40, step: 0.01, label: \"Signal Bandwidth\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof combWidth = Inputs.range([2, 50], {value: 37, step: 0.01, label: \"Sampling Bandwidth\"})","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":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":452,"value":"[This tweet](https://twitter.com/jagarikin/status/1419165889950142465) shows the phenomenon of [*aliasing*](https://en.wikipedia.org/wiki/Aliasing) through a very effective animation. The notebook port here provides a little bit of interactivity so you can explore what happens when a signal is not sampled often enough in a reconstruction:\n\n* A well-sampled signal must be sampled at least twice as often as the highest frequency in the original signal. It's not obvious yet [always possible](https://en.wikipedia.org/wiki/Whittaker%E2%80%93Shannon_interpolation_formula) to reconstruct a signal exactly if it's been sampled at a sufficiently-high rate.\n\n* A signal sampled less frequently than that will **alias**: no matter what the algorithm, it's not possible to always reconstruct the correct frequency of the true signal.","pinned":false,"hidden":false,"mode":"md"},{"id":432,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"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":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"}