-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (115 loc) · 4.61 KB
/
index.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126133316-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-126133316-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>N-body simulation WASM</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background-color: #111;
}
#overlay {
position: absolute;
top: 12px;
right: 12px;
background-color: whitesmoke;
padding: 10px;
max-width: 350px;
}
.input-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 0.5em;
}
.input-wrapper label {
flex: 1 0 40px;
}
.input-wrapper input,
.input-wrapper select {
flex: 1 0 120px;
}
.github {
text-align: center;
margin-top: 0.5em;
}
</style>
</head>
<body>
<div id="overlay">
<div class="input-wrapper">
<label for="body-data">
Select simulation:
</label>
<select id="body-data">
<option value="asteroids1000">asteroids1000 - Near earth asteroids and the earth in orbit around the
sun.
</option>
<option value="cluster2582">cluster2582 - A star cluster containing 2,582 particles.</option>
<option value="collision1">collision1 - Two large irregular galaxies collide and mostly pass through
each other.
</option>
<option value="collision2">collision2 - Collision of two 1000 particle elliptical galaxies.</option>
<option value="galaxy1">galaxy1 - A lighter galaxy is torn apart by a dense galaxy.</option>
<option value="galaxy2">galaxy2 - A galaxy orbits a heavier one and forms a spiral.</option>
<option value="galaxy3" selected>galaxy3 - A dense galaxy sucks stars out of a lighter galaxy that
orbits it.
</option>
<option value="galaxy4">galaxy4 - Galaxies orbiting each other.</option>
<option value="galaxy10k">galaxy10k - 10,000 bodies orbiting in an elliptical galaxy.</option>
<option value="galaxy20k">galaxy20k - 20,000 bodies orbiting in an elliptical galaxy.</option>
<option value="galaxy30k">galaxy30k - Two 15,000 particle galaxies collide.</option>
<option value="galaxyform2500">galaxyform2500 - A 2,500 particle dust cloud collapses under gravity and
forms into a galaxy.
</option>
<option value="galaxymerge1">galaxymerge1 - Two 1,000 particle clouds gravitate together and eventually
combine into a galaxy.
</option>
<option value="galaxymerge2">galaxymerge2 - Four 1,000 particle clouds gravitate together and combine
into a galaxy.
</option>
<option value="galaxymerge3">galaxymerge3 - A 900 particle spinning elliptical galaxy collides with a
big expanding galaxy and combines with it.
</option>
<option value="planets">planets</option>
<option value="saturnrings">saturnrings - Saturn with its 9 rings containing 11,987 particles.</option>
<option value="spiralgalaxy">spiralgalaxy - A round galaxy becomes a spiral due to two small galaxies
that fly by it.
</option>
</select>
</div>
<div class="input-wrapper">
<label for="time-step">
Time step:
</label>
<input id="time-step" type="number" value="0.1" min="0.1" max="10" step="0.1">
</div>
<div class="github">
<a href="https://github.com/novoselrok/nbody-wasm">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg" alt="Github Logo" width="32"
height="32">
</a>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script src="demo/nbody_wasm.js"></script>
<script src="demo/index.js"></script>
<script src="demo/simulation.js"></script>
</body>
</html>