DashCampbell
/
MATH201
forked from Sasserisop/MATH201
1
0
Fork 0
Code Pull Requests Activity

added support for custom forier formulas

This commit is contained in:
Sasserisop 2023-12-07 14:16:26 -07:00
parent 541827e168
commit f0368c806b
3 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
content/Fourier Series (lec 28-29).md
View File

@ -176,39 +176,36 @@ 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!
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <button id="playButton">Play the sound</button>
  <label for="real_coff">$a_n$ formula:</label>
  <input type="text" id="realc" name="real_coff" size="50" value="real[2&starn] = (2/Math.PI)&star( 1/(2&starn+1)-1/(2&starn-1) )">
  </br>
  <label for="imag_coff">$b_n$ formula:</label>
  <input type="text" id="imagc" name="imag_coff" size="50" value="">
    <button id="playButton">Play the sound</button>
</br>
  <canvas id='scope'></canvas>
  <canvas id='spectrum'></canvas>
<div class="slidecontainer">
<p>Number of harmonics: <span id="textHarmonics"></span></p>
  <input type="range" min="0" max="100" value="50" style="width: 500px;" id="sliderHarmonics">
</div>
<div class="slidecontainer">
  <p>Frequency: <span id="textFreq"></span></p>
  <p>Frequency (for $n=1$): <span id="textFreq"></span></p>
  <input type="range" min="0" max="440" value="220" style="width: 500px;" id="sliderFreq">
</div>
<script src="playaudio.js"></script>
</body>
</html>
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.

42
static/playaudio.js
View File

@ -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;

2
themes/zettels/layouts/partials/content.html
View File

@ -34,6 +34,8 @@
{{/* $content := $content | replaceRE "(\\$.*)\\*(.*\\$)" "$1$2" */}}
{{ $content := $content | replaceRE "\\*" "\\*"}}
<!-- The above command replaces * with \* so that *'s inside equations dont get interpreted as emphasis or bold tags. Needed for the page on convolutions.>
{{$content := $content | replaceRE "&star" "*"}}
<!-- The above command replaces &star with * so that I can write javascript multiplication in the .md notes, particularly for the Fourier series page. This is really messy.>
{{ $content := $content | replaceRE "\n" "\n\n" }}
{{ $content := $content | replaceRE $matrixBreak "\\\\\\\\\\\\\\\\" }}
<!--The above command replaces a \\ in content/*.md files with a \\\\ yes it looks silly-->