2e:null 2f:["$","title",null,{"children":"Fourier Series | Curtis Hu | Observable"}] 34:Tc59,view = p5(s => { replay; let height = width/2; let infoLabel; let canDraw = true; s.setup = function() { s.createCanvas(width, height); s.background(205); infoLabel = s.createElement("label", "Draw a wave!"); infoLabel.position(10, height/2); infoLabel = s.createElement("label", "|s[f]|"); infoLabel.position(10, 10); infoLabel = s.createElement("label", "frequency"); infoLabel.position(width - 100, height/2 - 30); }; let points = []; let frequencies = []; s.draw = function() { s.fill(230); s.rect(0, 0, width, height/2); // display the wave decomposition. var padding = 30; for (var i = 0; i < points.length; i++ ) { var x = padding + i*(width - 2*padding)/points.length; s.line(x, height/2 - (height/3)*frequencies[i], x, height/2); } if (s.mouseIsPressed && s.mouseY > height/2 && canDraw) { s.stroke("black"); if (s.mouseX < s.pmouseX) { s.mouseX = s.pmouseX; } points.push({ x: s.mouseX, y: s.mouseY }); s.line(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY); } } s.mouseReleased = function() { // DFT if (canDraw) canDraw = false; else return; // filter for unique points var s = []; var offset = 0; for (var i = 0; i < points.length; i++) { var contains = s.some((el) => el.x == points[i].x) if (contains) continue; s.push(points[i]); offset += points[i].y; } offset = offset / s.length; // change the y coordinates so it is centered around 0. const firstTerm = s[0].x; console.log(offset, firstTerm) for (var i = 0; i < s.length; i++) { s[i].y -= offset; s[i].x -= firstTerm; } // create evenly distributed points var newPoints = []; for (var i = 0; i < s.length - 1; i++) { newPoints.push(s[i]) if (s[i+1].x != s[i].x + 1) { for (var j = s[i].x+1, k=1; j < s[i+1].x; j++, k++) { newPoints.push({ x: j, y: s[i].y + (s[i+1].y - s[i].y) * k / (s[i+1].x - s[i].x) }) } } } points = newPoints; dft(points); } function dft(s) { const N = s.length; const zeta = math.complex({ r: 1, phi: -2*math.PI / N}) for (var f = 0; f < N/2; f++) { var sum = 0; for (var i = 0; i < N; i++) { // the data points ARENT uniformly separated according to x, but are "uniformly" separated in respect to frame rate. // Let's pretend that it is uniform in respect to x (which is uniform to framerate if the user draws with a perfectly steady speed). // somehow, the pattern reverses. I can't spot the bug right now var zetaTerm = math.pow(zeta, math.multiply(f, i)); sum = math.add(sum, math.multiply(s[i].y, zetaTerm)); } // this complex number must decompose into both frequency and phase // we are taking the magnitude spectra, so absolute value. frequencies[f] = math.abs(sum); } // normalize frequencies. var max = Math.max(...frequencies); frequencies = frequencies.map(el => el/max); } })35:T409,p5(s => { let file; s.preload = function() { file = s.loadSound(sample); } let fft; s.setup = function() { let cnv = s.createCanvas(width, 300); cnv.mouseClicked(togglePlay); fft = new P5.FFT(); file.amp(0.2); var infoLabel = s.createElement("label", "Toggle to play music"); infoLabel.position(10, 10); var fftLabel = s.createElement("label", "library FFT"); fftLabel.position(10, 30); // var dftLabel = s.createElement("label", "our DFT"); // dftLabel.position(s.width/2+10, 30); } s.draw = function() { s.background(220); let spectrum = fft.analyze(); s.noStroke(); s.fill(255, 0, 255); for (let i = 0; i< spectrum.length; i++){ let x = s.map(i, 0, spectrum.length, 0, s.width/2); let h = -s.height + s.map(spectrum[i], 0, 255, s.height, 0); s.rect(x, s.height, s.width / spectrum.length, h ) } } function togglePlay() { if (file.isPlaying()) { file.pause(); } else { file.loop(); } } })36:T25fd,chart = p5(s => { replay2; // While drawing shape you can only draw a single loop. if mouse is lifted to draw seperately it will join to previous point. and if drawing is completed the start and end points are joined to make it a closed loop. var points = []; // The points we draw.. stored as p5.Vector var canDraw = true; // After hitting start button, to prevent mouseDragged creating extra points var coeff = {}; // The main object which carries data of { key = angular speed of circle, value = complex number as p5.Vector | which gives size and starting angle of circle => radius = value.mag() and starting angle = value.heading() } var maxCircles = 100; // this value changes how many circles you want to see on screen. If maxCircles = 100 you will see circles with angular speed -50 to 50 excluding 0. // maxCircles can be adjusted by circlesSlider (NOTE: maxCircles will only take even value so if circlesSlider is odd it will take circlesSlider.value()+1) // There are three phases of draws in this program // 1) the phase where you will give your shape // 2) the phase where we try to fit the shape by increasing number of circles // 3) the phase where epicycles try to draw the shape and this phase continues till termination var drawCounter = 0; // drawCounter indicates the phase you are in (0-indexed) var animResol = 200; // animResol = number of frames the second phase will stay. You can change it accordingly var animFram = 0; // animFram keeps count of number of frames passed in second phase var revolveResol = 400; // revolveResol = number of frames the third phase will stay. You can change it accordingly var revolveFrame = 0; // revolveFrame keeps count of number of frames passed in third phase var ansPoints = {}; // used to draw second phase. This carries data of shapes formed by different number of circles { key = n | circles with angular speed -n to n are used to form shape, value = shape stored in form of array of p5.Vector }. var cirGr; // cirGr is 'circlesGroup' object which consists of data regarding circles that are drawn in third phase var previewResol = 300; // This is used in second phase. previewResol = number of points to be shown in the loop in second phase. so ansPoints[i].length = previewResol let circlesSlider, errorLabel, infoLabel, sliderLabel, reset, button, sv; s.setup = function() { s.createCanvas(width, 470); button = s.createButton("Start"); button.position(width/2, 420); button.mousePressed(calcAndStart); reset = s.createButton("Reset"); reset.position(width/2 + 50, 420); reset.mousePressed(ResetAll); circlesSlider = s.createSlider(1, 2 * maxCircles, maxCircles); circlesSlider.position(10, 420); infoLabel = s.createElement("label", "Draw a single closed loop inside canvas"); infoLabel.position(10, 10); sv = circlesSlider.value(); errorLabel = s.createElement("label", "Draw Something"); errorLabel.position(150, 500); sliderLabel = s.createElement( "label", "Number of circles = " + (sv + (sv % 2)).toString() ); sliderLabel.position(10, 440); } // Resets all parameters and clears screen function ResetAll() { points = []; canDraw = true; coeff = {}; var sv = circlesSlider.value(); maxCircles = sv + (sv % 2); drawCounter = 0; animFram = 0; revolveFrame = 0; ansPoints = {}; cirGr = null; infoLabel.html("Draw a single loop inside canvas"); } // can only draw shape in first phase and within boundary of canvas (with a offset of 10 pixels) s.mouseDragged = function() { if (canDraw) if ( s.mouseX < s.width - 10 && s.mouseY < s.height - 10 && s.mouseX > 10 && s.mouseY > 10 ) points.push(s.createVector(s.mouseX, s.mouseY)); } // clicking start button starts this method function calcAndStart() { var sv = circlesSlider.value(); if (points.length > 0) { if (canDraw) { // if first time pressed animFram = 0; revolveFrame = 0; points.push(points[0]); maxCircles = sv + (sv % 2); // maxCircles should only contain even numbers canDraw = false; calcAllCoeff(); finalShapeCalc(); console.log(points.length); console.log("Calculated"); drawCounter = 1; cirGr = new circlesGroup(coeff); } else if (maxCircles != sv && maxCircles != sv + 1) { animFram = 0; revolveFrame = 0; maxCircles = sv + (sv % 2); // maxCircles should only contain even numbers calcAllCoeff(); finalShapeCalc(); drawCounter = 1; console.log(points.length); console.log("Calculated"); cirGr = new circlesGroup(coeff); } } } // used to calculate complex coefficients for respective angular speeds of circles function calcAllCoeff() { var n = maxCircles / 2; coeff = {}; for (var i = -1 * n; i <= n; ++i) { coeff[i] = calcCoeff(i); } } // used to calculate ansPoints object for second phase function finalShapeCalc() { ansPoints = {}; for (var i = 0; i <= maxCircles / 2; ++i) { ansPoints[i] = []; for (var j = 0; j < previewResol; ++j) { var x = s.map(j, 0, previewResol, -1 * Math.PI, Math.PI); var cn = coeff[i]; var cs = s.createVector(Math.cos(i * x), Math.sin(i * x)); var vec = complexMult(cn, cs); if (i != 0) { vec.add(ansPoints[i - 1][j]); cn = coeff[-1 * i]; cs = s.createVector(Math.cos(i * x), Math.sin(-1 * i * x)); vec.add(complexMult(cn, cs)); } ansPoints[i].push(vec); } ansPoints[i].push(ansPoints[i][0]); } } // Fourier series implementation to get complex coefficient for a angular speed function calcCoeff(n) { var ans = s.createVector(0, 0); for (var i = 0; i < points.length - 1; ++i) { ans.add(integrateLine(i, n)); } return ans; } // as complex numbers stored in p5.Vector this function gives complex multiplication of two p5.Vectors function complexMult(v1, v2) { var a = v1.x; var b = v1.y; var c = v2.x; var d = v2.y; return s.createVector(a * c - b * d, b * c + a * d); } // Fourier stuff.. formula implementation function integrateLine(pos, n) { var ll = s.map(pos, 0, points.length - 1, -1 * Math.PI, Math.PI); var ul = s.map(pos + 1, 0, points.length - 1, -1 * Math.PI, Math.PI); var ans = s.createVector(0, 0); for (var i = 0; i < 10; i++) { var x = s.map(i, 0, 10, ll, ul); var cs = s.createVector(Math.cos(n * x), Math.sin(-1 * n * x)); var midvec = P5.Vector.lerp(points[pos], points[pos + 1], i / 10); ans.add(complexMult(midvec, cs)); } ans.div(points.length - 1); ans.div(10); return ans; } // always draw the points array.. throughout all phases function alwaysDraw() { s.noFill(); s.stroke(0); s.strokeWeight(1); s.beginShape(); for (var i = 0; i < points.length; ++i) { s.vertex(points[i].x, points[i].y); } s.endShape(); } // phase 2 drawing.. function drawAnim() { s.stroke(255, 0, 0); s.strokeWeight(1); s.beginShape(); var curr = s.map(animFram, 0, animResol, 0, maxCircles / 2); var left = Math.floor(curr); var right = left + 1; for (var i = 0; i <= previewResol; ++i) { var temp = P5.Vector.lerp( ansPoints[left][i], ansPoints[right][i], curr - left ); s.vertex(temp.x, temp.y); } s.endShape(); animFram++; infoLabel.html("Showing Frames " + animFram + "/" + animResol); if (animFram == animResol) { drawCounter++; } } s.draw = function() { s.background(220); alwaysDraw(); var sv = circlesSlider.value(); if(maxCircles != sv && maxCircles != sv + 1) { calcAndStart() } sliderLabel.html("Number of circles = " + (sv + (sv % 2)).toString()); if (points.length > 0) errorLabel.html(""); else errorLabel.html("Draw Something before hitting start"); if (drawCounter == 1) { drawAnim(); } if (drawCounter == 2) { cirGr.update(); cirGr.show(); revolveFrame++; infoLabel.html("Showing Frames " + revolveFrame + "/" + revolveResol); if (revolveFrame == revolveResol) { revolveFrame = 0; cirGr = new circlesGroup(coeff); } } } class circle { constructor(center, coeff, omega) { this.c = center; this.r = coeff.mag(); this.ang = coeff.heading() - omega * Math.PI; this.sp = (2 * omega * Math.PI) / revolveResol; } getEnd() { var vec = s.createVector(this.r * Math.cos(this.ang), this.r * Math.sin(this.ang)); vec.add(this.c); return vec; } update(center) { this.c = center; this.ang += this.sp; } show() { s.stroke(0, 100); s.strokeWeight(1); s.ellipse(this.c.x, this.c.y, 2 * this.r, 2 * this.r); var end = this.getEnd(); s.line(this.c.x, this.c.y, end.x, end.y); } } class circlesGroup { constructor(coeffData) { this.orig = coeffData[0]; this.data = []; for (var n in coeffData) { if (n != 0) { this.data.push([n, coeffData[n]]); } } this.data.sort(function(a, b) { var m1 = a[1].mag(); var m2 = b[1].mag(); return m2 - m1; }); this.circles = []; this.points = []; var end = this.orig; for (var i in this.data) { var cir = new circle(end, this.data[i][1], this.data[i][0]); this.circles.push(cir); end = cir.getEnd(); } this.points.push(end); } update() { var newEnd = this.orig; for (var i in this.circles) { this.circles[i].update(newEnd); newEnd = this.circles[i].getEnd(); } this.points.push(newEnd); } show() { for (var i in this.circles) { this.circles[i].show(); } s.stroke(0, 0, 255); s.beginShape(); for (var i in this.points) { s.vertex(this.points[i].x, this.points[i].y); } s.endShape(); } } })37:[{"id":"29e1e60699658a13aa934262d41feecd35000dbff01f724d53b3dc5e6e2cb855c7b19c0c85281ebab4a99342f8524c8d79a31066445639c1bfc27db788d335ea","href":"https://static.observableusercontent.com/files/29e1e60699658a13aa934262d41feecd35000dbff01f724d53b3dc5e6e2cb855c7b19c0c85281ebab4a99342f8524c8d79a31066445639c1bfc27db788d335ea","name":"1_mf-eRkt6Nn7KxJlZp7Q29g.png","type":"image/png","lastModified":1703492357196.738,"size":105194},{"id":"4550a4987fbdea8a0c5b252f6955b87b858c05762b23f8594455b9721c7c11dcab6e34b2f67b62095c72a8054a80a3005a5806de995e1baa65b76a5bf45af0c4","href":"https://static.observableusercontent.com/files/4550a4987fbdea8a0c5b252f6955b87b858c05762b23f8594455b9721c7c11dcab6e34b2f67b62095c72a8054a80a3005a5806de995e1baa65b76a5bf45af0c4","name":"Figure2The-relationship-between-the-time-and-frequency-domains-a-Time-domain-view-b.png","type":"image/png","lastModified":1703492396616.267,"size":84532},{"id":"5d01b7290c039c1fb7b145d5e5d59b0b1e98a2360d453be169e80c234fdbe448ce4a03de9ced2ae36020c46ffa96842e953cb34ecbd087963538337a18e9144a","href":"https://static.observableusercontent.com/files/5d01b7290c039c1fb7b145d5e5d59b0b1e98a2360d453be169e80c234fdbe448ce4a03de9ced2ae36020c46ffa96842e953cb34ecbd087963538337a18e9144a","name":"Signal_Sampling.svg.png","type":"image/png","lastModified":1703619226547.31,"size":53421},{"id":"1282b2b2cf493a466800deb8659ae0fdf56c740a5163f970c9ddaba8881714629372f4acbd569936a9c989eab28173b34bc846fb4b8b120de109de1528f4de1b","href":"https://static.observableusercontent.com/files/1282b2b2cf493a466800deb8659ae0fdf56c740a5163f970c9ddaba8881714629372f4acbd569936a9c989eab28173b34bc846fb4b8b120de109de1528f4de1b","name":"sample.mp3","type":"audio/mpeg","lastModified":1703664668808.85,"size":121869}] 32:{"id":"4ce70fb02d846d1c","slug":"fourier-series","title":"Fourier Series","thumbnail":"2b1f5a4cfecdb8542bfa0c9ffb55152cb3220c30c37a5d8a96b2fb6a9c1b9b52","access_level":"unlisted","create_time":"$D2023-12-20T23:00:27.060Z","update_time":"$D2024-01-22T19:29:11.301Z","view_time":null,"first_public_time":"$D2023-12-20T23:00:27.060Z","has_unpublished_edits":null,"fork":{"id":"df38094bc9089946","slug":"processing-p5-js","title":"Processing (p5.js)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"36cfebe167a11b5a","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":"starter_2024"},"version":484,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null}],"members":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fourier Series","cells":[{"id":0,"value":"# Fourier Series","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"#### Analog to Linear Algebra\n\nRemember basis vectors in linear algebra? Let ${tex`\\vec{x} = [1 \\quad 0]^T`} and ${tex`\\vec{y} = [0 \\quad 1]^T`}\n\n${tex.block`\\vec{b} = c_1\\vec{x} + c_2\\vec{y} `}\n\nNow we can write **any** 2-dimensional vector using these two particular vectors.\n\n---\nAnalogously, we can have \"basis vectors\" ${tex`1, x, x^2, x^3...`}. \n${tex.block`f(x) = c_1 + c_2 x `}\n\nNow we can write **any** line on 2d plane using these two abstract vectors ${tex`1, x`}\n\n---\nFinally, we have the \"basis vectors\" ${tex`e^{ix}, e^{2ix}, e^{3ix}`}\n${tex.block`f(x) = c_1 e^{ix} + c_2 e^{2ix} `}\n\nNow we can write **certain** periodic functions using these two basis vectors ${tex`e^{ix}, e^{2ix}`}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"### Fourier Series\n\nSome wavelike, periodically repeating functions can expressed as a combination of many waves of different frequencies. \n${tex.block`f(x) = c_1 \\sin(x) + c_2 \\sin(2x) + ... + c_{1^*} \\cos(x) + c_{2^*} \\cos(2x) + ... \\quad \\text{for example}`}\n\nPut more formally, any function ${tex`f(x)`} that satisfies the Dirichlet Condition can be expressed as a fourier series.\n${tex.block`f(x) = \\sum_{n=-\\infty}^{\\infty} c_n e^{inx}`}\n\nWhere ${tex`e^{inx}`} is like a \"wave\" of frequency ${tex`n`} and ${tex`c_n`} is a complex coefficient.\n\n___\n\nWe can extend this idea to continous frequencies instead of discrete frequencies (think music for continous frequencies)\n\n${tex.block`f(x) = \\int g(\\alpha) e^{i\\alpha x} d\\alpha`}\nNotice we replaced the ${tex`\\sum \\rightarrow \\int`} and the ${tex`c_n \\rightarrow g(\\alpha)`}. Now the \"coefficients\" for frequency ${tex`\\alpha`} is expressed by the continous function ${tex`g(\\alpha)`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"## Fourier Transform\n\nFourier Transform transforms from time-space to frequency-space.\nInverse Fourier Transform transforms from frequency-space to time-space.\n\n\nFor continous functions:\n\n${tex.block`f(x) = \\int g(\\alpha) e^{i\\alpha x} d\\alpha`}\n${tex.block`g(\\alpha) = \\frac{1}{2 \\pi} \\int f(x) e^{-i\\alpha x} dx`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"Notice that the sine wave below is written in time-domain representation as \n${tex.block`f(t) = \\sin(50 t)`}\n\nAnd frequency-domain representation is just:\n${tex.block``}\n\nWe went from storing all the points of a sine wave within an interval to just storing one frequency value. There is a notion of \"compression\" that we will expand upon later (JPEG compression)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"_mfErkt6nn7kxjlzp7q29g = FileAttachment(\"1_mf-eRkt6Nn7KxJlZp7Q29g.png\").image({\n width: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"## Discrete Fourier Transform\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"This is an expansion of fourier transform.\n\nOur objective is still to transform from time-domain to frequency-domain. The only problem now is that our function in the time domain comes as sampled data.\n\nInput: ${tex`(0,0), (1, 5), (2, 6)...`}\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"signal_samplingSvg = FileAttachment(\"Signal_Sampling.svg.png\").image({\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"We want to convert this sampled data into a frequency space.\nWe can use DFT as measure of similarity between frequencies and the dataset.\n\nLet the sampled data be represented by an array ${tex`s`} where ${tex`s[t]`} would be the sampled datapoint at time ${tex`t`}.\n\n${tex.block`\\text{Let } \\zeta = e^{-2 \\pi i / N}, \\text{ where } N = \\text{ length of sampled data array }`}\n${tex.block`\\hat{s}[f] = \\sum_{n = 0}^{N-1} s[n]\\zeta^{nf}`}\n\nWhere you can think of ${tex`\\hat{s}[f]`} is a vague measure of similarity between the sampled data and the frequency ${tex`f`}.\n(Thank you Bikram Bains *JHU'26* for giving me some clarification on DFTs)\n\nIn the following demo, I'm graphing the magnitude of the complex number ${tex`\\hat{s}[f]`}. AKA magnitude spectra of the frequencies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"P5 = await require(\"p5\").then(async (P5) => {\n // newer versions of p5 sound don't work with es6 modules\n await require(\"p5@0.9.0/lib/addons/p5.sound.min.js\");\n await require(\"https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js\");\n return P5;\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"p5 = {\n return function* (_sketch) {\n const parent = DOM.element(\"div\");\n yield parent;\n const instance = new P5((p) => _sketch(p, P5), parent);\n try {\n while (true) yield parent;\n } finally {\n instance.remove();\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"math = require(\"mathjs@12.2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"I realize that for this specific demo, there is no real way to validate the results other than looking at the code. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"viewof replay = Inputs.button(\"replay\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"## Audio Example\n\nIn the following, we'll try this on an actual audio sample and separate into frequency spaces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"sample = FileAttachment(\"sample.mp3\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"Let's **compare with the p5 library FFT algorithm**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Fourier Transform Epicycles\n\nWe can do the same thing from above except our data points revolve around a center. Hence, we can create a superposition of wave-like epicycles that create the loop we draw.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"I did not write the following code. The following code is **written by ilmnarayana** on from p5js web editor. It is really well written and I don't think I can really do it any better.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"viewof replay2 = Inputs.button(\"replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"