Added wave

2022-08-29 05:37:05 +02:00
parent aea5800b89
commit f680976e55
5 changed files with 113 additions and 0 deletions
--- a/wave/README.md
+++ b/wave/README.md
@@ -0,0 +1,11 @@
+# Schwebung
+
+_Als Schwebung bezeichnet man den Effekt, dass die Resultierende der additiven Überlagerung zweier Schwingungen, die sich in ihrer Frequenz nur wenig voneinander unterscheiden, eine periodisch zu- und abnehmende Amplitude aufweist._
+
+→ [Wikipedia](https://de.wikipedia.org/wiki/Schwebung)
+
+---
+
+Mittels NumPy werden die Daten für eine interaktive Demonstration von Schwebung bereitgestellt und mit Chart.js visualisiert.
+
+[Aufrufbare Instanz](https://checksch.de/pa-pyscript/wave/wave.html)
--- a/wave/plot.js
+++ b/wave/plot.js
@@ -0,0 +1,24 @@
+const chart = new Chart("chart", {
+    type: "line",
+    data: {
+        datasets: [{
+            label: "Auslenkung",
+            borderColor: "teal",
+            backgroundColor: "teal",
+        }
+        ]
+    },
+    options: {
+        scales: {
+            x: {
+                display: false
+            }
+        }
+    }
+})
+
+function update(x, y) {
+    chart.data.labels = x
+    chart.data.datasets[0].data = y
+    chart.update()
+}
--- a/wave/script.py
+++ b/wave/script.py
@@ -0,0 +1,36 @@
+from pyodide import create_proxy, to_js
+import numpy as np
+import js
+
+# Auslenkung -> ω * t = 2πft
+def deflection(frequency, time):
+    return np.sin(2 * np.pi * frequency * time)
+
+
+# Schwebung -> y(t) = y^(sin(2πft) + sin(2πft)); Annahme gleicher Amplitude (1), keine Phasenverschiebung
+def beat(freq1, freq2, time):
+    return deflection(freq1, time) + deflection(freq2, time)
+
+
+def freq_update(event):
+    document.querySelector("#freqlabel").innerText = freq2.value
+    plot()
+
+
+def plot():
+    beat_deflection = beat(freq1, float(freq2.value), time)
+    js.update(to_js(time), to_js(beat_deflection))
+
+
+freq1 = 440
+freq2 = document.querySelector("#freq")
+
+proxy = create_proxy(freq_update)
+freq2.addEventListener("input", proxy)
+
+sampling_frequency = 1920 / 10 * 4
+seconds = 2
+time = np.linspace(0, seconds, int(seconds * sampling_frequency))
+
+
+plot()
--- a/wave/style.css
+++ b/wave/style.css
@@ -0,0 +1,8 @@
+body {
+  padding: 1em;
+}
+canvas {
+  background-color: azure;
+  max-width: 1920px;
+  max-height: 800px;
+}
--- a/wave/wave.html
+++ b/wave/wave.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Schwebung</title>
+    <link rel="icon" type="image/x-icon" href="../assets/favicon.png" />
+    <link rel="stylesheet" href="../assets/pyscript.css" />
+    <script defer src="../assets/pyscript.js"></script>
+    <script src="../assets/chart.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <!-- prettier-ignore -->
+    <py-env>
+      - numpy
+    </py-env>
+  </head>
+  <body>
+    <fieldset>
+      <legend>f<sub>1</sub> = 440 Hz</legend>
+      f<sub>2</sub> = <label id="freqlabel" for="freq">441</label> Hz<br />
+      <input
+        id="freq"
+        type="range"
+        min="440"
+        max="442"
+        step="0.1"
+        value="441"
+      />
+    </fieldset>
+    <canvas id="chart"></canvas>
+    <py-script src="script.py"></py-script>
+    <script src="plot.js"></script>
+  </body>
+</html>