Perlenkette - Welle
<!--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>
<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>
<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="400" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><p><button onclick="welleStarten()">Welle</button></p><p><button onclick="stop()">Stop</button></p><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var t=0;var AnzahlPerlen=50;var radius=0.5*c.width/AnzahlPerlen;var amplitude=c.height/4;var AnzahlWellenLaengen=2;var f=1;var repeater;class Kreis{ constructor(x,y){ this.x=x; this.y=y; } zeichnenKreis(){ ctx.beginPath(); ctx.arc(this.x, this.y, Perlenkette1.radius, 0, 2 * Math.PI); ctx.stroke(); }}class Perlenkette{ constructor(radius){ this.Perle=Array(); this.radius=radius; } zeichnenPerlenkette(){ for (var i=0;i<=AnzahlPerlen;i++){ this.Perle[i]=new Kreis(2*this.radius*i,c.height/2); this.Perle[i].zeichnenKreis(); } }}class Welle{ constructor(amplitude,AnzahlWellenLaengen,f){ this.amplitude=amplitude; this.AnzahlWellenLaengen=AnzahlWellenLaengen; this.f=f; } zeichnenWelle(){ for (var i=0;i<=AnzahlPerlen;i++){ Perlenkette1.Perle[i]=new Kreis(2*Perlenkette1.radius*i,c.height/2+this.amplitude*Math.sin(2*Math.PI/c.width*i*2*radius*AnzahlWellenLaengen-0.5*f*t)); Perlenkette1.Perle[i].zeichnenKreis(); } }}
//beim Laden der Dateivar Perlenkette1=new Perlenkette(radius);Perlenkette1.zeichnenPerlenkette();function welleStarten(){ stop(); start();}function start(){ ctx.clearRect(0, 0, c.width, c.height); t=t+0.1;var Perlenkette11=new Perlenkette(radius); var Welle1=new Welle(amplitude,AnzahlWellenLaengen,f); Welle1.zeichnenWelle(); repeater=requestAnimationFrame(start);}function stop(){ cancelAnimationFrame(repeater);}
</script>
</body></html>
<canvas id="myCanvas" width="400" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><p><button onclick="welleStarten()">Welle</button></p><p><button onclick="stop()">Stop</button></p><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var t=0;var AnzahlPerlen=50;var radius=0.5*c.width/AnzahlPerlen;var amplitude=c.height/4;var AnzahlWellenLaengen=2;var f=1;var repeater;class Kreis{ constructor(x,y){ this.x=x; this.y=y; } zeichnenKreis(){ ctx.beginPath(); ctx.arc(this.x, this.y, Perlenkette1.radius, 0, 2 * Math.PI); ctx.stroke(); }}class Perlenkette{ constructor(radius){ this.Perle=Array(); this.radius=radius; } zeichnenPerlenkette(){ for (var i=0;i<=AnzahlPerlen;i++){ this.Perle[i]=new Kreis(2*this.radius*i,c.height/2); this.Perle[i].zeichnenKreis(); } }}class Welle{ constructor(amplitude,AnzahlWellenLaengen,f){ this.amplitude=amplitude; this.AnzahlWellenLaengen=AnzahlWellenLaengen; this.f=f; } zeichnenWelle(){ for (var i=0;i<=AnzahlPerlen;i++){ Perlenkette1.Perle[i]=new Kreis(2*Perlenkette1.radius*i,c.height/2+this.amplitude*Math.sin(2*Math.PI/c.width*i*2*radius*AnzahlWellenLaengen-0.5*f*t)); Perlenkette1.Perle[i].zeichnenKreis(); } }}
//beim Laden der Dateivar Perlenkette1=new Perlenkette(radius);Perlenkette1.zeichnenPerlenkette();function welleStarten(){ stop(); start();}function start(){ ctx.clearRect(0, 0, c.width, c.height); t=t+0.1;var Perlenkette11=new Perlenkette(radius); var Welle1=new Welle(amplitude,AnzahlWellenLaengen,f); Welle1.zeichnenWelle(); repeater=requestAnimationFrame(start);}function stop(){ cancelAnimationFrame(repeater);}
</script>
</body></html>