<!--Minimal-Programm mit Einbindung von mathematischen Formeln mit MathJax--><!DOCTYPE html><html>
<head><script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script></head>
<body onload="Welle()">
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var t=0;
class Kreis{ constructor(x,y,r){ this.x=x; this.y=y; this.r=r; } zeichnen(){ ctx.beginPath(); ctx.arc(this.x,this.y, this.r, 0, 2 * Math.PI); ctx.stroke(); }}
class Perlenkette{ constructor(Anzahl){ this.Anzahl=Anzahl; for (var i=0;i<this.Anzahl;i++){ var r=5; var x=2*r*i; var y=c.height/2+20*Math.sin(0.1*t-0.05*x); Kreis[i]=new Kreis(x,y,r); } } zeichnen(){ for (var i=0;i<this.Anzahl;i++){ Kreis[i].zeichnen(); } }}
function Welle(){ ctx.clearRect(0, 0, c.width, c.height); t=t+0.1; Perlenkette1=new Perlenkette(20); Perlenkette1.zeichnen(); requestAnimationFrame(Welle);}</script> <ul><li>Wellengleichung<br>\(f(x,t)=a\sin(\omega\cdot t-k\cdot x),\; k=\frac{2\pi}{\lambda},\; \omega =\frac{2\pi}{T}\\ \text{ mit Amplitude }a, \text{Wellenlänge }\lambda ,\text{Schwingungsdauer }T\)</li><li>Durch die Wellengleichung werden die Perlen am Ort x in vertikaler Richtung mit der Schwingungsdauer T bewegt.</li></ul></body></html>