2c:null 2d:["$","title",null,{"children":"FFT usage and result interpretation / plotting (npm:fft.js) | x | Observable"}] 32:[] 30:{"id":"fac0a5b1cb2e3c57","slug":"fft-usage-and-result-interpretation-plotting-npm-fft-js","title":"FFT usage and result interpretation / plotting (npm:fft.js)","thumbnail":"c48fec2ac46c6af24502b0e89bd5b6543ec6b8344618a9e44007f33bbb75d238","access_level":"public","create_time":"$D2021-08-31T19:49:24.230Z","update_time":"$D2023-02-20T09:41:50.875Z","view_time":null,"first_public_time":"$D2021-08-31T22:57:32.156Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"0769ff99b3875329","login":"ndry","name":"x","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":"starter_2024"},"version":614,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null}],"members":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"0b7a438605508cba","slug":"index","title":"Index","owner":{"id":"0769ff99b3875329","login":"ndry","name":"x"}},"type":"notebook","body":{"title":"FFT usage and result interpretation / plotting (npm:fft.js)","cells":[{"id":0,"value":"md`# FFT usage and result interpretation / plotting (npm:fft.js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"md`I struggled to find out, how to interprete Fourier transform output to get frequencies. So, here it goes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":537,"value":"md`Frequencies ${freq1} and ${freq2} are clearly visible on the graph:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"{\n const w = signal.length * 0.5;\n const h = w / 2;\n\n const signalPath = ` [i, v])\n )}\" stroke-width=\"2\" stroke=\"red\" fill=\"none\">`;\n\n const freqsPath = ``;\n\n const signalReconstructedPath = ` [i, signalReconstructed[i * 2]])\n )}\" stroke-width=\"0.5\" stroke=\"black\" fill=\"none\">`;\n\n const gridStep = 10 ** Math.floor(Math.log10(w) - 1);\n const grid = Array.from(\n { length: 1 + signal.length / gridStep },\n (_, i) =>\n ``\n );\n\n const el = html``;\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"viewof freq1 = Inputs.range([1, 500], {\n label: \"Frequency 1\",\n step: 1,\n value: 40,\n width\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"viewof freq2 = Inputs.range([1, 500], {\n label: \"Frequency 2\",\n step: 1,\n value: 130,\n width\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"signal = Array.from(\n { length: 2 ** 10 },\n (_, i) =>\n 40 * Math.sin((i * Math.PI * 2) / freq2) +\n 70 * Math.sin((i * Math.PI * 2) / freq1)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"fft = new FFT(signal.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"fftOutput = {\n const fftOutput = [];\n fft.realTransform(fftOutput, signal);\n fft.completeSpectrum(fftOutput);\n return fftOutput;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"frequencies = signal.map((v, i) => [\n signal.length / (i || 1e-10),\n (1 / signal.length) * Math.hypot(fftOutput[i * 2], fftOutput[i * 2 + 1])\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"signalReconstructed = {\n const signalReconstructed = [];\n fft.inverseTransform(signalReconstructed, fftOutput);\n\n return signalReconstructed;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"FFT = (await import(\"https://jspm.dev/npm:fft.js@4.0.4\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"line = points =>\n `M ${points[0][0]},${points[0][1]} ${points\n .slice(1)\n .map(([x, y]) => `L ${x},${y}`)\n .join(\" \")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"