Barnes-Hut-Tree-N-body-Implementation-in-HTML-Js/index.html at master · Elucidation/Barnes-Hut-Tree-N-body-Implementation-in-HTML-Js · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>

<head>
	<link rel="stylesheet" type="text/css" href="bnStyle.css" />
	<script src="bntree.js"></script>
	<script src="graphics.js"></script>
	<script src="userInput.js"></script>
	<script src="fileIO.js"></script>
	<title>Barnes-Hut Tree Implementation in HTML/Javascript</title>
</head>

<body>
	<h2>Barnes-Hut Implementation in HTML/Javascript</h2>
	<p>A <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut Simulation</a> is an N-body
		simulation of gravitational interactions between point particles using the Barnes-Hut algorithm.</p>

	<table>
		<tr>
			<td colspan=2>
				<div>
					<button type="button" onclick="addNrandomBodies(100)">Add 100 Random Bodies</button>
					or Choose JSON Input File<input type="file" id="fileInputs" name="files[]" accept="json" /></br>
					<output id="fileList"></output>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<canvas id="bnCanvas" width="600" height="400">
				</canvas>
				<div>
					<table border=0>
						<tr>
							<td><button type="button" onclick="toggleArrows()">Arrows Toggle</button></td>
							<td><button type="button" onclick="toggleShowBNtree()">BN Tree Show/Hide</button></td>
							<td><button type="button" onclick="toggleDEBUG()">Debug Toggle</button></td> -->
							<td>
								<center><b>DEBUG <span id="debugLVL"></span></b></center>
							</td>
							<td>0</td>
							<td><input id="debugSlider" type="range" min=0 max=1 value=0 step=1
									onchange="setDEBUG(this.value)" /></td>
							<td>1</td>
						</tr>
					</table>
				</div>
			</td>
			<td>
				<div align=center>
					<button type="button" onclick="resetSys()">Reset</button>
					<button type="button" onclick="startSys()">Start</button>
					<button type="button" onclick="pauseSys()">Stop/Pause</button>
					<table border=0>
						<tr>
							<td colspan=3>
								Bodies: <b><output id="bodyCount">0</output></b><br />
								TIME: <b><output id="timeDisp">0.0</output></b><br />
								DT: <b><span id="dtSliderVal">0.01</span></b>
							</td>
						</tr>
						<tr>
							<td colspan=3 align="center">

							</td>
						</tr>
						<tr>
							<td>DT</td>
							<td>0.0001</td>
							<td><input type="range" min="-4" max="1" value="-2" step=0.1 onchange="setDT(this.value)" />
							</td>
							<td>10</td>
						</tr>
					</table>
				</div>
				<code>
				<div id="data"><b>Quick Start:</b><br/>- Add some bodies<br/>- Press <b>Start</b></div>
			</code>
			</td>
		</tr>
	</table>

	<p>
	<ul>
		<li>Click to place body</li>
		<li>Click-Drag to set velocity of body</li>
		<li>No collision checks, Bodies exert no gravitation when outside canvas area (but still get attracted back in).
		</li>
		<li>Press e/d keys while dragging to change mass of body</li>
		<li>Press p to toggle system pause/run.</li>
		<li>Press s to step system once by time step dt.</li>
	</ul>
	</p>
	<p>Check out the <a href="https://github.com/Elucidation/Barnes-Hut-Tree-N-body-Implementation-in-HTML-Js">Source
			Code</a> on GitHub.</p>

	<script>
		drawArrows = false;
		initBN("bnCanvas");
		initGraphics("bnCanvas", "data");
		initUI("bnCanvas");
		initFileIO();
	</script>

</body>

</html>