Kreisbewegung
Kreisbewegung mit der Methode der kleinen Schritte
Kreisbewegung mit der Methode der kleinen Schritte
<!DOCTYPE html><!-- Kommentar in HTML --><!-- // einzeiliger Kommentar in JavaScript --><!-- /*mehrzeiliger Kommentar in JavaScript*/ --><html><head><title>BallmitBewegung</title><script>MathJax = {chtml: {displayAlign: 'left'}}</script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><style>.flex{display: flex}.flex > div {margin: 10px; width:500px}</style></head><body><div class="flex"><div><canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;background: #eee;"></canvas></div><div>$$\begin{align}&\text{Bedingung für Kreisbahn}\\&a=\dfrac{v^2}{r}\\&a_x=a\frac{r_x}{r}, a_y=a\frac{r_y}{r}\\&a_x=\frac{v^2}{r^2}r_x=\frac{v_x^2+v_y^2}{r_x^2+r_y^2}r_x\\&a_y=\frac{v^2}{r^2}r_y=\frac{v_x^2+v_y^2}{r_x^2+r_y^2}r_y\end{align}$$<div><ul><li> <a href="https://www.geogebra.org/m/frnbf6f3">Herleitung der Bedingung für die Keisbeschleunigung mit Geogebra</a></li><li>Die Bedingung für eine Kreisbahn bestimmt die Beschleunigungen in x- und y-Richtung, die mit der Methode der kleinen Schritte den neuen Ort ergeben.<li>Wandelt man die Löschung des Canvas durch zwei Schrägstriche in einen Kommentar um, ergibt sich eine Bahnkurve für die Bewegung. </li><li>Die Bedingung der Beschleunigung für die Kreisbahn in Zusammenhang mit der Methode der kleinen Schritte führt nicht wie sonst üblich zu einer Spirale nach außen, sondern zu einer Spirale nach innen.</li><li>Der JavaScript-Code ist objektorientiert, aber nicht als Klasse programmiert, da Klassen in JavaScript nicht von Bedeutung sind. Parameter können durch Darstellung in einem <a href="https://www.w3schools.com/tryit/">Editor</a> verändert werden. </li><li> Die Darstellung der Web-Seite wird durch <a href="https://www.w3schools.com/css/css3_flexbox.asp">Flexible Boxes</a> realisiert, die Darstellung der Formeln mit MathJax ist im Header linksbündig konfiguriert.</li></ul></li></div></div></div>
<script>
'use strict';//allgemeine Variablen (keine Objekt-Attribute)var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var dt=0.01;var dx;var dy;var dvx;var dvy;var ax;var ay;var ref;var Breite=10;var Höhe=10;var Faktorx=canvas.width/(2*Breite);var Faktory=canvas.height/(2*Höhe);var Normierung;
//Um mehrer Objekte gleicher Art verwenden zu können, werden sie nicht als Variable deklariert, sondern als Constructor-Funktionen, die mit großem Anfangsbuchstaben bezeichnet werden.function Ball(ballRadius,x0,y0,vx0,vy0){//Objekt-Attribute this.ballRadius=ballRadius; this.x=canvas.width/2+x0*Faktorx; this.y=canvas.height/2-y0*Faktory; this.rx=this.x-canvas.width/2; this.ry=this.y-canvas.height/2; this.vx=vx0*Faktorx; this.vy=vy0*Faktory;
//Objekt-Methoden this.zeichnen=function(){ ctx.beginPath(); ctx.arc(this.x,this.y,this.ballRadius,0, Math.PI*2,false); ctx.closePath(); ctx.strokeStyle = 'black'; ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.stroke(); } this.bewegen=function(){ Normierung=(this.vx*this.vx+this.vy*this.vy)/(this.rx*this.rx+this.ry*this.ry); ax=-this.rx*Normierung; ay=-this.ry*Normierung; dvx=ax*dt; dvy=ay*dt; this.vx=this.vx+dvx; this.vy=this.vy+dvy; dx=this.vx*dt; dy=this.vy*dt this.x=this.x+dx; this.y=this.y+dy; this.rx=this.x-canvas.width/2; this.ry=this.y-canvas.height/2; }};
//Bildung der Objekte und Verknüpfung mit Ereignissen (direkte Ausführung ohne Funktionsaufruf, da Script im Body) var Ball1=new Ball(10,0,4,6,0);var Ball2=new Ball(5,0,8,6,0);document.getElementById("myCanvas").addEventListener("mouseover",start);document.getElementById("myCanvas").addEventListener("mouseout",stop);
//Unterprogramme (Methoden sind Untergrogramme von Objekten bzw. Klassen) für die Ereignissefunction start(){ BallmitBewegung();}function stop(){window.cancelAnimationFrame(ref);}
function BallmitBewegung(){ctx.clearRect(0, 0, canvas.width, canvas.height); //ohne Löschen des Bildschirms erhält man eine Kreisbahn Koordinatensystem();Ball1.zeichnen();Ball2.zeichnen();Ball1.bewegen();Ball2.bewegen();ref=window.requestAnimationFrame(BallmitBewegung);}function Koordinatensystem(){ ctx.moveTo(canvas.width/2,0); ctx.lineTo(canvas.width/2,canvas.height); ctx.moveTo(0,canvas.height/2); ctx.lineTo(canvas.width,canvas.height/2); ctx.stroke(); }
</script></body>
<script>
'use strict';//allgemeine Variablen (keine Objekt-Attribute)var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var dt=0.01;var dx;var dy;var dvx;var dvy;var ax;var ay;var ref;var Breite=10;var Höhe=10;var Faktorx=canvas.width/(2*Breite);var Faktory=canvas.height/(2*Höhe);var Normierung;
//Um mehrer Objekte gleicher Art verwenden zu können, werden sie nicht als Variable deklariert, sondern als Constructor-Funktionen, die mit großem Anfangsbuchstaben bezeichnet werden.function Ball(ballRadius,x0,y0,vx0,vy0){//Objekt-Attribute this.ballRadius=ballRadius; this.x=canvas.width/2+x0*Faktorx; this.y=canvas.height/2-y0*Faktory; this.rx=this.x-canvas.width/2; this.ry=this.y-canvas.height/2; this.vx=vx0*Faktorx; this.vy=vy0*Faktory;
//Objekt-Methoden this.zeichnen=function(){ ctx.beginPath(); ctx.arc(this.x,this.y,this.ballRadius,0, Math.PI*2,false); ctx.closePath(); ctx.strokeStyle = 'black'; ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.stroke(); } this.bewegen=function(){ Normierung=(this.vx*this.vx+this.vy*this.vy)/(this.rx*this.rx+this.ry*this.ry); ax=-this.rx*Normierung; ay=-this.ry*Normierung; dvx=ax*dt; dvy=ay*dt; this.vx=this.vx+dvx; this.vy=this.vy+dvy; dx=this.vx*dt; dy=this.vy*dt this.x=this.x+dx; this.y=this.y+dy; this.rx=this.x-canvas.width/2; this.ry=this.y-canvas.height/2; }};
//Bildung der Objekte und Verknüpfung mit Ereignissen (direkte Ausführung ohne Funktionsaufruf, da Script im Body) var Ball1=new Ball(10,0,4,6,0);var Ball2=new Ball(5,0,8,6,0);document.getElementById("myCanvas").addEventListener("mouseover",start);document.getElementById("myCanvas").addEventListener("mouseout",stop);
//Unterprogramme (Methoden sind Untergrogramme von Objekten bzw. Klassen) für die Ereignissefunction start(){ BallmitBewegung();}function stop(){window.cancelAnimationFrame(ref);}
function BallmitBewegung(){ctx.clearRect(0, 0, canvas.width, canvas.height); //ohne Löschen des Bildschirms erhält man eine Kreisbahn Koordinatensystem();Ball1.zeichnen();Ball2.zeichnen();Ball1.bewegen();Ball2.bewegen();ref=window.requestAnimationFrame(BallmitBewegung);}function Koordinatensystem(){ ctx.moveTo(canvas.width/2,0); ctx.lineTo(canvas.width/2,canvas.height); ctx.moveTo(0,canvas.height/2); ctx.lineTo(canvas.width,canvas.height/2); ctx.stroke(); }
</script></body>