From f0368c806b9462f84b0524e45887cc664b6dd6bb Mon Sep 17 00:00:00 2001 From: Sasserisop Date: Thu, 7 Dec 2023 14:16:26 -0700 Subject: [PATCH] added support for custom forier formulas --- content/Fourier Series (lec 28-29).md | 33 +++++++-------- static/playaudio.js | 42 ++++++++++++++------ themes/zettels/layouts/partials/content.html | 2 + 3 files changed, 46 insertions(+), 31 deletions(-) diff --git a/content/Fourier Series (lec 28-29).md b/content/Fourier Series (lec 28-29).md index 04f861b..2868c89 100644 --- a/content/Fourier Series (lec 28-29).md +++ b/content/Fourier Series (lec 28-29).md @@ -175,40 +175,37 @@ $$\bar{f}(x)=\frac{2}{\pi}+\frac{2}{\pi}\sum_{k=1}^\infty\left( \frac{1}{2k+1}-\ Even with 10 terms, we get a pretty good approximation: ![fouriercosineofsin.png](drawings/fouriercosineofsin.png) Here's a little script that generates an audible waveform of this Fourier series! - - + -   - - -  - +  +  + 
+  +  +    +
  -   -

Number of harmonics:

  -
-
- 

Frequency:

+ 

Frequency (for $n=1$):

  - - -
- - - +You can generate any arbitrary Fourier series with this. Try putting +imag[n] = (2*Math.PI/n)*(-1)**(n+1)+4/((n**3)*Math.PI)*((-1)**(n)-1) + +for the $b_{n}$ formula and delete the $a_{n}$ formula. Now it will show the fourier sin series of $x^2$ we derived earlier! +you can also make some nasty sounds, try this one: +imag[Math.floor(n**1.1)] = (-1)**(n)*1/(2*n)+Math.random()/10 We have prepared ourselves now, now we start solving PDE's. He's encouraging us to attend the lectures in these last two weeks. He's making it sound like PDE's are hard. \ No newline at end of file diff --git a/static/playaudio.js b/static/playaudio.js index 6b9411d..3bec20c 100644 --- a/static/playaudio.js +++ b/static/playaudio.js @@ -3,6 +3,8 @@ var textHarmonics = document.getElementById("textHarmonics"); var sliderFreq = document.getElementById("sliderFreq") var textFreq = document.getElementById("textFreq"); var playing = document.getElementById("playButton"); +var real_coff = document.getElementById("realc") +var imag_coff = document.getElementById("imagc") textHarmonics.innerHTML = slider.value; // Display the default slider value textFreq.innerHTML=sliderFreq.value @@ -22,7 +24,7 @@ var cspec = document.getElementById('spectrum'), sliderFreq.oninput = function() { textFreq.innerHTML=this.value; - osc.frequency.value=this.value/2; + osc.frequency.value=this.value; } // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { @@ -38,12 +40,15 @@ slider.oninput = function() { //} for (var i = 1; i <= 110; i++) { real[i]=0; + imag[i]=0; } - for (var i = 1; i <= numCoeffs; i++) { // note i starts at 1 - real[2*i] = (2/Math.PI) *( 1/(2*i+1)-1/(2*i-1) ); + for (var n = 1; n <= numCoeffs; n++) { // note i starts at 1 + //real[2*i] = (2/Math.PI) *( 1/(2*i+1)-1/(2*i-1) ); + eval(real_coff.value); + eval(imag_coff.value); } - osc.frequency.value = textFreq.innerHTML/2; + osc.frequency.value = textFreq.innerHTML; //var imag= new Float32Array([0,0,0,0,0]); // sine //var real = new Float32Array(imag.length); // cos var customWave = context.createPeriodicWave(real, imag); // cos,sine @@ -81,8 +86,8 @@ function drawWave(analyser, ctx) { ctx.strokeStyle = "#D44"; //reddish color ctx.setTransform(1,0,0,-1,0,100.5); // flip y-axis and translate to center ctx.lineWidth = 2; - ctxspec.strokeStyle = "#44D" //blueish color - ctxspec.setTransform(1,0,0,1,0,100.5); + + //ctxspec.setTransform(1,0,0,1,0,100.5); ctxspec.lineWidth = 2; var wspec=ctxspec.canvas.width; (function loop() { @@ -106,11 +111,19 @@ function drawWave(analyser, ctx) { //spectrum stuff: //real=getReal(); //console.log(real); - ctxspec.clearRect(0, -100, wspec, ctxspec.canvas.height); + ctxspec.clearRect(0, 0, wspec, ctxspec.canvas.height); ctxspec.beginPath(); - ctxspec.moveTo(0, 80); + ctxspec.moveTo(0, 100); + ctxspec.strokeStyle = "#44D" //blueish color for cos for (var j=0; j<100; j++){ - ctxspec.lineTo(j*10,real[j]*400+80); + ctxspec.lineTo(j*10,real[j]*-200+100); + } + ctxspec.stroke(); + ctxspec.beginPath(); + ctxspec.moveTo(0, 100); + ctxspec.strokeStyle = "#D44" //redish color for sine + for (var j=0; j<100; j++){ + ctxspec.lineTo(j*10,imag[j]*-200+100); } ctxspec.stroke(); if (isPlaying) requestAnimationFrame(loop) @@ -159,15 +172,18 @@ function playSound(h){ var numCoeffs = h; // The more coefficients you use, the better the approximation - //real[0] = 0.5; + //real[0] = 2/Math.PI; //for (var i = 1; i < numCoeffs; i++) { // note i starts at 1 // imag[i] = 1 / (i * Math.PI); //} for (var i = 1; i <= 110; i++) { real[i]=0; + imag[i]=0; } - for (var i = 1; i <= numCoeffs; i++) { // note i starts at 1 - real[2*i] = (2/Math.PI) *( 1/(2*i+1)-1/(2*i-1) ); + for (var n = 1; n <= numCoeffs; n++) { // note i starts at 1 + //real[2*i] = (2/Math.PI) *( 1/(2*i+1)-1/(2*i-1) ); + eval(real_coff.value); + eval(imag_coff.value); } @@ -181,7 +197,7 @@ function playSound(h){ //var real = new Float32Array(imag.length); // cos var customWave = context.createPeriodicWave(real, imag); // cos,sine osc.setPeriodicWave(customWave); - osc.frequency.value = textFreq.innerHTML/2; + osc.frequency.value = textFreq.innerHTML; osc.connect(masterGain); osc.start(); isPlaying = true; diff --git a/themes/zettels/layouts/partials/content.html b/themes/zettels/layouts/partials/content.html index b2e5f72..1c5eda7 100644 --- a/themes/zettels/layouts/partials/content.html +++ b/themes/zettels/layouts/partials/content.html @@ -34,6 +34,8 @@ {{/* $content := $content | replaceRE "(\\$.*)\\*(.*\\$)" "$1$2" */}} {{ $content := $content | replaceRE "\\*" "\\*"}}