Implemented Fourier wheel

Author: chanrt

fourier_series/basic.js

@@ -15,8 +15,12 @@ let context = canvas.getContext("2d");
 let freq_display = document.getElementById("freq-display");
 let freq_input = document.getElementById("freq-input");
 
+let sampling_freq_display = document.getElementById("sampling-freq-display");
+let sampling_freq_input = document.getElementById("sampling-freq-input");
+
 let wave_type = document.getElementById("wave-type");
 let waves_display = document.getElementById("waves-display");
+let fourier_display = document.getElementById("fourier-display");
 
 if (mobile) {
     canvas_width = 0.9 * screen_width;
@@ -55,6 +59,8 @@ window.onload = function () {
 
 function defaultParams() {
     freq_input.value = 1;
+    sampling_freq_input.value = 1;
+    wave_type.value = "sin";
 }
 
 let click_x, click_y, pressed;

fourier_series/simulation.html

@@ -56,8 +56,8 @@ <h2>Fourier Series</h2>
         </div>
         <div class="col s12 l4">
           <center>
-            <span id="freq-display">Frequency: 1</span>
-            <input id="freq-input" type="range" min="0.5" max="10" step="0.5" value="1" oninput="updateParams('freq')"
+            <span id="freq-display">Frequency: </span>
+            <input id="freq-input" type="range" min="0.5" max="10" step="0.1" value="1" oninput="updateParams('freq')"
               onchange="updateParams('freq')">
             <select id="wave-type" class="browser-default">
               <option value="sin">Sine</option>
@@ -68,6 +68,11 @@ <h2>Fourier Series</h2>
             <hr>
 
             <p id="waves-display"></p>
+            <p id="fourier-display"></p>
+
+            <span id="sampling-freq-display">Sampling Frequency: </span>
+            <input id="sampling-freq-input" type="range" min="0.5" max="10" step="0.1" value="1"
+              oninput="updateParams('sampling-freq')" onchange="updateParams('sampling-freq')">
           </center>
         </div>
       </div>

fourier_series/simulation.js

@@ -1,7 +1,12 @@
+let waves = [];
+
 let graph_xrange, graph_xscale;
 let graph_y, graph_yrange;
 
-let waves = [];
+let circle_y, circle_radius;
+
+let sampling_freq = 1;
+let dtheta = 0;
 
 let updated;
 
@@ -10,9 +15,64 @@ function update() {
 }
 
 function render() {
+    context.fillStyle = "#000000";
     context.fillRect(0, 0, canvas_width, canvas_height);
 
     drawGraph();
+    drawCircle();
+}
+
+function drawCircle() {
+    context.beginPath();
+    context.moveTo(canvas_width / 2, circle_y - circle_radius);
+    context.lineTo(canvas_width / 2, circle_y + circle_radius);
+    context.stroke();
+
+    context.beginPath();
+    context.moveTo(canvas_width / 2 - circle_radius, circle_y);
+    context.lineTo(canvas_width / 2 + circle_radius, circle_y);
+    context.stroke();
+
+    if (waves.length > 0) {
+        let x_values = [];
+        let y_values = [];
+        let r, theta;
+
+        context.beginPath();
+        for (let i = 0; i < graph_xrange; i += 0.001) {
+            r = 0;
+            for (let wave of waves) {
+                if (wave["type"] == "sin") {
+                    r += Math.sin(2 * Math.PI * wave["freq"] * i);
+                }
+                else if (wave["type"] == "cos") {
+                    r += Math.cos(2 * Math.PI * wave["freq"] * i);
+                }
+            }
+            theta = i * 2 * Math.PI * sampling_freq;
+            x_values.push(r * Math.cos(theta));
+            y_values.push(r * Math.sin(theta));
+            r = 0.9 * circle_radius * r / waves.length;
+
+            context.lineTo(canvas_width / 2 + r * Math.cos(theta), circle_y - r * Math.sin(theta));
+        }
+        context.stroke();
+
+        let com_x = 0, com_y = 0;
+        for (let i = 0; i < x_values.length; i++) {
+            com_x += x_values[i];
+            com_y += y_values[i];
+        }
+        com_x /= x_values.length;
+        com_y /= y_values.length;
+        let magnitude = Math.sqrt(com_x * com_x + com_y * com_y);
+
+        fourier_display.innerHTML = `F(${sampling_freq}) = ${com_x.toFixed(2)} + (${com_y.toFixed(2)})i`;
+        fourier_display.innerHTML += `<br> Magnitude = ${magnitude.toFixed(2)}`;
+    }
+    else {
+        fourier_display.innerHTML = "F(all) = 0 <br> Magnitude = 0";
+    }
 }
 
 function drawGraph() {
@@ -72,6 +132,11 @@ function updateParams(variable) {
     if (variable == "freq") {
         freq_display.innerHTML = `Wave frequency: ${freq_input.value} Hz`;
     }
+    else if (variable == "sampling-freq") {
+        sampling_freq_display.innerHTML = `Sampling frequency: ${sampling_freq_input.value} Hz`;
+        sampling_freq = parseFloat(sampling_freq_input.value);
+        updated = true;
+    }
 }
 
 function addWave() {
@@ -93,7 +158,11 @@ function clearWaves() {
 function initParams() {
     graph_xrange = 1;
     graph_xscale = graph_xrange / canvas_width;
+    dtheta = 1 / Math.PI;
+
     graph_y = 0.1 * canvas_height;
+    circle_y = 0.6 * canvas_height;
+    circle_radius = 0.35 * canvas_height;
 
     waves.push({
         "type": "sin",
@@ -103,4 +172,5 @@ function initParams() {
     updated = true;
 
     updateParams('freq');
+    updateParams('sampling-freq');
 }