214 lines
7.4 KiB
HTML
214 lines
7.4 KiB
HTML
<!--
|
|
This work is licensed under CC BY-NC-ND 4.0
|
|
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
|
Attribute to Russell Georgi
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Chapter 7 - Gravity and Kepler's Laws
|
|
</title>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
border: 0;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
}
|
|
|
|
.greenSlider {
|
|
-webkit-appearance: none;
|
|
border-radius: 5px;
|
|
height: 10px;
|
|
background: #d3d3d3;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
-webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
|
|
}
|
|
|
|
.greenSlider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: #000000;
|
|
border-radius: 50%;
|
|
width: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.greenSlider::-moz-range-thumb {
|
|
background: #000000;
|
|
border-radius: 50%;
|
|
width: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
|
Your browser does not support the HTML5 canvas tag.</canvas>
|
|
|
|
<script>
|
|
var c = document.getElementById("myCanvas");
|
|
var ctx = c.getContext("2d");
|
|
c.width = window.innerWidth;
|
|
c.height = window.innerHeight;
|
|
//Time step
|
|
var dt = 0.01;
|
|
var rc = 25;
|
|
var a = 100000 * rc * rc / 625;
|
|
var x = 100;
|
|
var y = -50;
|
|
var xVel = 25;
|
|
var yVel = 0;
|
|
|
|
var clickedOnMass = false;
|
|
var clickedOnPlanet = false;
|
|
var dragging = false;
|
|
var maxDist = 5;
|
|
//Relative position of canvas
|
|
var xPos = 0;
|
|
var yPos = 0;
|
|
|
|
//Moves and scales canvas
|
|
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
|
ctx.scale(1, -1);
|
|
Draw();
|
|
|
|
function Clear(ctx)
|
|
{
|
|
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
|
}
|
|
|
|
function Draw()
|
|
{
|
|
Clear(ctx);
|
|
ctx.beginPath();
|
|
ctx.arc(xPos, yPos, rc, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.beginPath();
|
|
ctx.arc(xPos + x, yPos + y, 5, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
arrow(xPos + x, yPos + y, xPos + x + xVel, yPos + y + yVel);
|
|
var xt = x;
|
|
var yt = y;
|
|
var xvt = xVel;
|
|
var yvt = yVel;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xPos + x, yPos + y);
|
|
for (t = 0; t < 200; t += dt)
|
|
{
|
|
var r = Math.sqrt(xt ** 2 + yt ** 2);
|
|
var f = a / (r ** 2);
|
|
var theta = Math.atan(yt/xt);
|
|
if (xt < 0)
|
|
{
|
|
theta += Math.PI;
|
|
}
|
|
xvt -= f * Math.cos(theta) * dt;
|
|
yvt -= f * Math.sin(theta) * dt;
|
|
xt += xvt * dt;
|
|
yt += yvt * dt;
|
|
if (r < rc)
|
|
{
|
|
break;
|
|
}
|
|
if (t > 1 && Math.sqrt((xt - x) ** 2 + (yt - y) ** 2) < 2)
|
|
{
|
|
console.log("converges");
|
|
}
|
|
ctx.lineTo(xPos + xt, yPos + yt);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
|
|
window.addEventListener('resize', function(event) {
|
|
c.width = window.innerWidth;
|
|
c.height = window.innerHeight;
|
|
ctx.translate(c.width / 2, c.height / 2);
|
|
ctx.scale(1, -1);
|
|
}, true);
|
|
|
|
function arrow(fromx, fromy, tox, toy) {
|
|
var headlen = 10; // length of head in pixels
|
|
var dx = tox - fromx;
|
|
var dy = toy - fromy;
|
|
var angle = Math.atan2(dy, dx);
|
|
ctx.moveTo(fromx, fromy);
|
|
ctx.lineTo(tox, toy);
|
|
ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
|
|
ctx.moveTo(tox, toy);
|
|
ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
|
|
ctx.stroke();
|
|
}
|
|
|
|
document.addEventListener("mousedown", function(e)
|
|
{
|
|
var rect = c.getBoundingClientRect()
|
|
var mouseX = e.clientX - rect.left - c.width / 2;
|
|
var mouseY = e.clientY - rect.top - c.height / 2;
|
|
mouseY *= -1;
|
|
console.log("x: " + mouseX + " y: " + mouseY);
|
|
if (Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2) < maxDist)
|
|
{
|
|
clickedOnMass = true;
|
|
}
|
|
if (Math.sqrt((mouseX) ** 2 + (mouseY) ** 2) < rc)
|
|
{
|
|
clickedOnPlanet = true;
|
|
}
|
|
dragging = true;
|
|
});
|
|
|
|
document.addEventListener("mouseup", function(e)
|
|
{
|
|
dragging = false;
|
|
clickedOnMass = false;
|
|
clickedOnPlanet = false;
|
|
});
|
|
|
|
document.addEventListener("mousemove", function(e)
|
|
{
|
|
if (clickedOnMass && dragging)
|
|
{
|
|
var rect = c.getBoundingClientRect()
|
|
x = e.clientX - rect.left - c.width / 2;
|
|
y = e.clientY - rect.top - c.height / 2;
|
|
y *= -1;
|
|
Draw();
|
|
} else if (clickedOnPlanet && dragging)
|
|
{
|
|
var rect = c.getBoundingClientRect()
|
|
mx = e.clientX - rect.left - c.width / 2;
|
|
my = e.clientY - rect.top - c.height / 2;
|
|
my *= -1;
|
|
rc = Math.sqrt(mx ** 2 + my ** 2);
|
|
a = 100000 * rc * rc / 625;
|
|
Draw();
|
|
} else if (dragging)
|
|
{
|
|
var rect = c.getBoundingClientRect()
|
|
xVel = e.clientX - rect.left - c.width / 2 - x;
|
|
yVel = e.clientY - rect.top - c.height / 2;
|
|
yVel *= -1;
|
|
yVel -= y;
|
|
Draw();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
|
This work is licensed under
|
|
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
|
</html> |