marvinscham/pa-pyscript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added wave

Browse Source
This commit is contained in:
Marvin Scham
2022-08-29 05:37:05 +02:00
parent aea5800b89
commit f680976e55
5 changed files with 113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
wave/README.md Normal file
View File

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

24
wave/plot.js Normal file
View File

@@ -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()
}

36
wave/script.py Normal file
View File

@@ -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()

8
wave/style.css Normal file
View File

@@ -0,0 +1,8 @@
body {
padding: 1em;
}
canvas {
background-color: azure;
max-width: 1920px;
max-height: 800px;
}

34
wave/wave.html Normal file
View File

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