let str; let ymax; alert("This is the result of my attemt at trying to make Fourier Transform animation as shown in YouTube video by 3Blue1Brown Fourier Transform visual introduction.\n\nCheck out this very intuitive intro to Fourier Transform from 3Blue1Brown on YouTube.\nhttps://youtu.be/spUNpyF58BY"); alert("Info on harmonic function:\n\nA harmonic function is a function that can be mathematically represented as sum/difference of multiples of sines and cosines (phase may also vary)\n\nExample:\n\n1. cos(2*t)+1\nThis makes a harmonic wave of 2 beats/second and offset by 1 making it always positive.\nFT should give 1 peak at 2 cyc/sec\n\n2. sin(2*t) + sin(3*t)\nThis wave is a combination of 2 beats/second and 3 beats/second\nFT should give 1 peak each at 2 cyc/sec and 3 cyc/sec"); function init(prestr){ let time = 4.403; let beatFreq = 1; let cycleFreq = 0.01; let fx = function(x){ return cos(3*x)+1; } str = prompt("Enter the harmonic function to plot\nIntensity as a function of time\nI = f(t)\n\nExample:\n\n1. cos(2*t)+1\n2. sin(2*t) + sin(3*t)\n3. sin(t)+sin(2*t)+sin(3*t)+sin(4*t)\n4. cos(2*t)+cos(3*t)+2\n\nYou can sum up any number of sin and cosine to make a custom wave; like : cos(3*t) + sin(t)+ sin(4*t) + ...\n\nFourier transform on a wave should give peaks at every frequency included in the wave.\nYou can experiment with a custom harmonic function here",prestr==null? "cos(3*t)+1":prestr); ymax = 0; if(str != null){ str = str.replace(/x/g, 't'); eval('fx = (t)=>'+str); for(let i = 0; i < 12; i+=0.01){ if(abs(fx(i)) > ymax) ymax = abs(fx(i)); } ymax = ceil(ymax); eval('fx = (t)=>('+str+')/ymax * 2'); }else{ str = "cos(3*t)+1"; } str = "I = "+ str; graph1 = graph(12,40,width - 24, width / 8, { time : time, beatFreq : beatFreq, }, fx); plot1 = plot(12, width / 6.5 + 100, width/2, width/2, { // was w*0.3 time : time, beatFreq : beatFreq, cycleFreq : cycleFreq, }, fx); graph2 = comGraph(12 + 30, width / 6.5 + 100 + width/2 + 50, width - 12 - 30 - 12 - 10, width/3,{ xm : 6, ym : 1, }, fx); lt = Date.now() } function setup() { createCanvas(displayWidth - 16, (displayWidth-16)*1.6); //createCanvas(396, 396*1.6); // print(width); // frameRate(20); smooth(); background(0); init(); } let graph1; let lt; let com; function draw() { background(0); noStroke(); fill(255); textAlign(LEFT); // if(frameCount % 120 == 0) //text(frameRate(), 0,10); if(plot1.dim.cycleFreq < 6){ let t = Date.now() plot1.dim.cycleFreq+=0.01/5 * (t - lt) / 16.0 * (speed/50.0); // plot1.dim.cycleFreq+=0.01; // graph1.updateArr(); plot1.updateArr(); com = plot1.getCOM(); graph2.addPoint(plot1.dim.cycleFreq, com.x / plot1.scl); lt = t; }else{ //graph2.deleteArr(); //plot1.dim.cycleFreq = 0.01; alert("Please leave an upvote if you like it.\n\nShare it with your friends too."); noLoop(); } graph1.draw(); plot1.draw(com); graph2.draw(); fill(220,160,120); textSize(13); text("Click on above plot to change waveform", 30, graph1.h + 100); fill(230); text("Simulation speed", plot1.w + plot1.x + 12, plot1.y + plot1.h - 20); stroke(250); fill(32); strokeWeight(2); rect(plot1.w + plot1.x + 12, plot1.y + plot1.h - 10, 120, 10) fill(200); rect(plot1.w + plot1.x + 14, plot1.y + plot1.h - 8, speed, 6); fill(255); noStroke(); textAlign(CENTER); text("Hit like and share your thoughts with me in the comment\nSuggestions are welcome\n\nMade by Om Kumar", width / 2, height-55); // noLoop(); } function graph(X, Y, w, h, dim, func){ let grp = { x: X, y: Y, dim : dim, w: w, h: h, arr : [], func: func, updateArr:function(){ this.arr.splice(0); //let step = 0.003; //print(step); for(let x = 0;x < this.w; x+=0.5){ this.arr.push({x : x / this.w * this.dim.xm, y: this.func(x / this.w * this.dim.xm)}); } }, draw: function(){ push(); translate(this.x, this.y); stroke(200,150,100, 200); noFill(); rect(-10,-25, this.w + 20, this.h + 90); noStroke(); fill(240); textFont("serif", 12); text("Intensity", 4, -4); text("Time", this.w - 20, this.h+16); textSize(14); //text(this.dim.beatFreq+" beats/second", this.w / 2 + 10, -4); textAlign(CENTER); text(str,this.w/2, -4); textSize(10); textAlign(LEFT); strokeWeight(1); stroke(240); line(0,0,0, this.h); line(0,this.h, this.w - 24, this.h); fill(200); beginShape(); vertex(0, 0); vertex(-3, 6); vertex(3, 6); endShape(CLOSE); beginShape(); vertex(this.w, this.h); vertex(this.w - 6, this.h + 3); vertex(this.w - 6, this.h - 3); endShape(CLOSE); let step = floor(this.dim.time) / 16; //print(step); noStroke(); fill(240); textSize(12); for(let x = 0; x < this.dim.time; x+=step*4){ text(x, x / this.dim.time * this.w -4, this.h + 16); } stroke(200); if(step <= 0) step = 1; for(let x = 0; x < this.dim.time; x+=step){ // line(x * this.xscl * grp.dim.xm / grp.dim.time , this.h - 4, x*this.xscl * grp.dim.xm / grp.dim.time , this.h + 4); let l = floor(x) == x? 4:2; line(x / this.dim.time * this.w , this.h - l, x / this.dim.time * this.w , this.h + l); } translate(0, this.dim.ym * this.yscl / 9); step = 1; for(let y = 0; y <= this.dim.ym; y+=step){ line(-2, y * this.yscl, 2, y * this.yscl); } noFill(); stroke(220, 220, 90); beginShape(); //print(this.arr); for(let p of this.arr){ vertex(p.x * this.xscl, (this.dim.ym-p.y) * this.yscl); } endShape(); pop(); } } grp.dim.xm = TWO_PI * grp.dim.time * grp.dim.beatFreq; grp.dim.ym = 2; grp.xscl = grp.w / grp.dim.xm; grp.yscl = grp.h / grp.dim.ym * 0.9; grp.updateArr(); return grp; } function plot(X, Y, w, h, dim, func){ let plt = { x : X, y : Y, w : w, h : h, arr : [], dim : dim, func : func, scl : w / 4, updateArr : function(){ this.dim.tm = this.dim.time * this.dim.cycleFreq * TWO_PI; this.dim.xm = TWO_PI * this.dim.time * this.dim.beatFreq, this.arr.splice(0); let step = 0.003; //print(step); let a = 0; let t = 0; for(let p = 0; p < this.dim.time; p+=step){ t = p/this.dim.time * this.dim.tm; a = this.scl * this.func(p/this.dim.time*plt.dim.xm); this.arr.push({ x : a*cos(t), y : a*sin(t) }); } }, getCOM : function(){ let cx = 0; let cy = 0; for(let p of this.arr){ cx += p.x; cy += p.y; } cx /= this.arr.length; cy /= this.arr.length; return { x : cx, y : cy, } }, draw : function(com){ push(); translate(this.x, this.y); textFont("serif", 14); fill(255); text(nfc(this.dim.cycleFreq,2)+" cycles/second", width /2 + 10, 10); textSize(12); text("When cycle frequency\nmatches one of the\nincluded beat\nfrequency of the wave,\na peak is observed in\nbelow x coord of COM\nvs cycles/second plot.", width / 2+10, 40) strokeWeight(1); for(let i = 0; i < 5; i++){ if(i == 2){ stroke(200, 160); }else{ stroke(137, 207, 240, 100); } line(i*this.w/4, 0, i*this.w/4, this.h); line(0, i*this.w/4, this.w, i*this.w/4); } translate(this.w/2, this.h/2); noFill(); stroke(200,80); ellipse(0,0,2*this.scl,2*this.scl); stroke(220, 220, 90); beginShape(); for(let p of this.arr){ vertex(p.x, p.y); } endShape(); if(com){ strokeWeight(10); //stroke(200,100,50); stroke(200,60,40); point(com.x, com.y); } noStroke(); textSize(13); fill(200); textAlign(CENTER); text("COM of winding",0, this.h/2 + 14) textAlign(LEFT); pop(); } } plt.updateArr(); return plt; } function comGraph(X, Y, w, h, dim, func){ let plt = { x : X, y : Y, w : w, h : h, arr : [], dim : dim, func : func, deleteArr : function(){ this.arr.splice(0); }, addPoint : function(x, y){ if(x > 0 && x < this.dim.xm){ // for(let pt of this.arr){ // if(abs(pt.x - x) < 0.01) return; // } this.arr.push({ x :x, y :y }) } }, draw : function(){ push(); translate(this.x, this.y); noFill(); stroke(100, 200, 120); rect(-10 - 15, -10,this.w+30, this.h+20); fill(240); noStroke(); textFont("serif", 12); // text("Intensity", 4, -4); text("Cycle Frequency", this.w - 100, this.h / 2 + 30); textSize(11); text("Plot of x-coord of COM of winding\nvs cycle frequency", this.w / 5, this.h / 2 - 50); // textSize(14); // text(this.dim.beatFreq+" beats/second", this.w / 2 + 10, -4); strokeWeight(1); stroke(240); line(0,0,0, this.h); translate(0, this.h/2); line(0,0, this.w, 0); fill(200); beginShape(); vertex(0, -this.h / 2); vertex(-3, -this.h / 2 + 6); vertex(3, -this.h / 2 + 6); endShape(CLOSE); beginShape(); vertex(this.w, 0); vertex(this.w - 6, + 3); vertex(this.w - 6, - 3); endShape(CLOSE); let step = 1; //print(step); noStroke(); fill(240); textSize(12); for(let x = step; x < this.dim.xm; x+=step){ text(x, x * this.xscl -4, 16); } textSize(10); for(let y = -this.dim.ym; y <= this.dim.ym; y+=step / 2){ text(nfc(-y, 1), -22, y * this.yscl + 4); } stroke(200); if(step <= 0) step = 1; for(let x = 0; x < this.dim.xm; x+=step){ // line(x * this.xscl * grp.dim.xm / grp.dim.time , this.h - 4, x*this.xscl * grp.dim.xm / grp.dim.time , this.h + 4); line(x * this.xscl , -2, x * this.xscl , +2); } step = 0.5; // translate(0, this.dim.ym * this.yscl / 9); for(let y = -this.dim.ym; y <= this.dim.ym; y+=step){ line(-2, y / this.dim.ym * this.h / 2, 2, y * this.yscl); } noFill(); stroke(220, 220, 90); beginShape(); //print(this.arr); for(let p of this.arr){ vertex(p.x * this.xscl, -p.y * this.yscl); } endShape(); pop(); } } plt.xscl = plt.w / plt.dim.xm; plt.yscl = (plt.h / plt.dim.ym) / 2; return plt; } function mouseClicked(){ if(mouseY < graph1.y + graph1.h + 50){ str = str.substring(3); init(str); } if(mouseX > plot1.w + plot1.x + 14 && mouseX < plot1.w + plot1.x + 14 + 116){ if(mouseY > plot1.y + plot1.h - 26 && mouseY < plot1.y + plot1.h + 18){ speed = mouseX - plot1.w - plot1.x - 14; } } } let speed = 50; function mouseDragged(){ if(mouseX > plot1.w + plot1.x + 14 && mouseX < plot1.w + plot1.x + 14 + 116){ if(mouseY > plot1.y + plot1.h - 26 && mouseY < plot1.y + plot1.h + 18){ speed = mouseX - plot1.w - plot1.x - 14; } } //rect(plot1.w + plot1.x + 14, plot1.y + plot1.h - 8, 50, 6); }

Fourier Transform | Simulation 〰️ | Inspired by 3Blue1Brown