-
Notifications
You must be signed in to change notification settings - Fork 0
/
gravity_demo.html
82 lines (73 loc) · 1.95 KB
/
gravity_demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="de">
<html>
<head>
<meta charset="utf-8"/>
<title>Demonstration der Gravitation</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="background-color:#333"></canvas>
<br><input id="kreisteile" type="text" value="32">
<br><input id="intervall" type="text" value="200">
<br><input type="button" value="Start" onclick="init()" />
<script>
var bahnradius = 149598022.96;
var sonnenradius= bahnradius*0.1;
var erdradius = bahnradius*0.05;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = null;
var y = null;
var xold = null;
var yold = null;
var intervallId = null;
var wDelta = null;
var winkel = null;
function init () {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width / 2, canvas.height / 2);
var dFaktor = 0.45 * Math.min(canvas.height, canvas.width) / bahnradius;
ctx.scale(dFaktor, -dFaktor);
ctx.strokeStyle = 'red';
ctx.lineWidth = 1 / dFaktor;
x = bahnradius;
y = 0;
xold = bahnradius;
yold = 0;
winkel = 0;
if (intervallId) {
clearInterval(intervallId);
}
intervallId = setInterval(drawPlanet, document.getElementById('intervall').value);
wDelta = Math.PI*2/document.getElementById('kreisteile').value;
drawSun();
}
function nextPoint () {
winkel += wDelta;
x = Math.cos(winkel)*bahnradius;
y = Math.sin(winkel)*bahnradius;
}
function drawSun() {
drawCircle(0, 0, sonnenradius, 'yellow')
}
function drawPlanet() {
ctx.clearRect(x-erdradius-ctx.lineWidth, y-erdradius-ctx.lineWidth, 2*(erdradius+ctx.lineWidth), 2*(erdradius+ctx.lineWidth))
ctx.beginPath();
ctx.moveTo(xold, yold);
ctx.lineTo(x, y);
ctx.stroke();
xold = x
yold = y
nextPoint();
drawCircle(x, y, erdradius, 'blue');
}
function drawCircle(x, y, radius, color) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
</script>
</body>
</html>