-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex_m.html
183 lines (144 loc) · 11.3 KB
/
index_m.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="javascripts/mobiledetect.js" type="text/javascript" charset="utf-8"></script>
<meta property="og:image" content="http://api.verold.com/demos/falling-in-circles/images/falling-in-circles.jpg"/>
<meta property="og:title" content="Falling in Circles: A 3D experiment powered by Verold and Three.js"/>
<meta property="og:url" content="http://api.verold.com/demos/falling-in-circles"/>
<meta property="og:site_name" content="Falling in Circles: A 3D experiment powered by Verold and Three.js"/>
<meta property="og:description" content="An interactive simulation of more than 260,000 asteroids, running in your web browser. This WebGL experiment demonstrates the gravitational balance that exists at the L4 and L5 Lagrange points between the Sun and Jupiter. Runs in your browser with no plugin required. Powered by Verold Studio and Three.js."/>
<meta property="og:type" content="website"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Falling in Circles: A 3D experiment powered by Verold and Three.js</title>
<link rel="stylesheet" href="stylesheets/reset.css">
<link rel="stylesheet" href="stylesheets/dat.gui.css">
<link rel="stylesheet" href="stylesheets/style_m.css">
<link rel="stylesheet" href="stylesheets/scene-font.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="javascripts/browsercaps.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="javascripts/jquery.hashchange.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.easytabs.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.nicescroll.min.js" type="text/javascript" charset="utf-8"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<style>
/* Application */
#verold3d {
margin: 0 auto;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="runtime/verold.loader.js"></script>
<script type="text/javascript" src="javascripts/ui_m.js"></script>
<script type="text/javascript" src="javascripts/GravitationApp.js"></script>
<script type="text/javascript" src="javascripts/GPGPUSimulation.js"></script>
<script type="text/javascript" src="javascripts/AsteroidSimulation.js"></script>
<script type="text/javascript" src="javascripts/TrojanCamera.js"></script>
<script type="text/javascript" src="javascripts/dat.gui.min.js"></script>
<div id="page-header">
<p>Powered by
<a href="http://studio.verold.com" target="_blank"><img src="images/verold_logo_white.png" width="60" /></a>
&
<a href="http://mrdoob.github.com/three.js/" target="_blank"><img src="images/three_js_logo.png" width="45" /></a>
</p>
<div id="mainMenu" class="menu">
<a id="helpLink" href="javascript:void(0);"><i class="icon-moon icon-help-alt" data-defaultClass="icon-help-alt"></i></a>
<a id="infoLink" href="javascript:void(0);"><i class="icon-moon icon-project" data-defaultClass="icon-project"></i></a>
</div>
</div>
<div id="fic-container">
<div id="headers">
<h1>FALLING IN CIRCLES</h1>
<h2>The Trojan Asteroids</h2>
</div>
<div id="loading-progress-container">
<p>Loading...</p>
<div class="loading-progress">
<div> </div>
</div>
</div>
<div id="info-panel" class="overlay panel">
<div id="info-panel-overflow">
<h2>About this Simulation</h2>
<p>This demo simulates the effect that the gravitational interaction between the Sun and Jupiter has on about 16,000 asteroids. After it runs for a few minutes, you will begin to see some patterns develop. First, Jupiter will clear out most of the asteroids from its orbit but will leave some inside its orbit and some outside. Second, you will see two pockets of <a href="http://en.wikipedia.org/wiki/Trojan_Asteroids" target="_blank">"Trojan" asteroids</a> develop about 60 degrees ahead and behind the planet. These are locations of gravitationally stability where the forces balance out and allow objects to remain in lock-step with Jupiter. The simulation of the asteroids is done entirely on your handheld's GPU. Normally used for rendering graphics, the GPU is also an extremely powerful vector processor, allowing many calculations to be done in parallel.</p><br>
<h2>The Trojan Asteroids</h2>
<p>The force of gravity can be described with a very simple equation involving only mass and distance. Despite this, the resulting behaviour of gravitating bodies can be extremely complex, even chaotic, when three or more objects are involved. There are, however, restricted versions of the so-called "three-body" problem that are well understood and can be described mathematically.</p><br>
<p>The simulation on the left demonstrates two such situations that were first described by the French mathematician Joseph Lagrange in 1772. For two bodies which have circular orbits, relative to each other, there are two locations where additional objects of negligible mass can remain in a stable lock-step with the larger bodies. This can occur because the centripetal acceleration of the small objects (induced by the gravitational pull of the larger bodies) exactly balances the centrifugal force of the their orbital trajectories. These locations, known as the L4 and L5 points after Lagrange, are stable. A slight perturbation in any direction will be met with a net force causing the object to move back toward the point, leading to what are often referred to as "tadpole" orbits. After this simulation runs for a minute or two, you will start to see asteroids collecting at these locations.</p><br>
<p>In 1906, more than one hundred years after Lagrange proposed the existence of these points, the first "Trojan" asteroids were discovered at the L4 and L5 points of the Sun-Jupiter system. Named after mythological heroes on the two opposing sides of the Trojan War, there are dozens that are known and probably thousands that exist.</p><br>
<p>For more information, read my <a href="http://verold.com/blog/2013/3/4/falling-in-circles-lagrange-points" target="_blank">blog post</a> about Lagrange points.</p>
<h2>Credits</h2>
<p><strong>Programming and design:</strong> Michael Bond</p><br>
<p><strong>UI Programming and design:</strong> Aaron Cepukas and Carlos Sánchez García</p><br>
<p><strong>Assets:</strong></p><br>
<p class="pMargin">Jupiter texture map by <a href="http://laps.noaa.gov/albers/sos/sos.html" target="_blank">Steve Albers</a> and the <a href="http://photojournal.jpl.nasa.gov/catalog/PIA07782" target="_blank">JPL</a>.</p><br>
<!-- <p class="pMargin">Jupiter title image courtesy of the JPL and the <a href="http://photojournal.jpl.nasa.gov/targetFamily/jupiter?subselect=Spacecraft%3ACassini+Orbiter%3A" target="_blank">Cassini-Huygens</a> mission.</p><br> -->
<p><strong>A big thanks to:</strong></p><br>
<p class="pMargin">The <a href="http://www.swinburne.edu.au/">Swinburne University of Technology</a> where I'm currently working towards a Masters degree in Astronomy.</p><br>
<p class="pMargin">Fraser Cain and Dr. Pamela Gay from <a href="http://www.astronomycast.com/">AstronomyCast</a>, who's weekly show inspired me to make something to help spread my love of astronomy and all the awesomely cool stuff that's out there.</p><br>
<p class="pMargin">Mr. Doob, Altered Qualia and the countless others working on <a href="http://mrdoob.github.com/three.js/">Three.JS</a>, the superb open-source library for WebGL development.</p><br>
<p class="pMargin"><a href="studio.verold.com">Verold Inc.</a>, for given me to the chance to make this.</p><br>
<div id="share-panel">
<a href="http://www.facebook.com/sharer.php?u=http://api.verold.com/demos/falling-in-circles/" target="_blank"><i class="icon-moon icon-facebook"></i></a>
<a href="http://twitter.com/share?text=Check%20out%20Verold's%20%22Falling%20In%20Circles%22%20demo!%20%40verold&url=http://api.verold.com/demos/falling-in-circles/" target="_blank"><i class="icon-moon icon-twitter"></i></a>
<a href="http://plus.google.com/share?url=http://api.verold.com/demos/falling-in-circles/" target="_blank"><i class="icon-moon icon-google-plus"></i></a>
</div>
</div>
</div>
<div id="instructions" class="panel">
<a href="javascript:void(0);"><img src="images/x.png" alt="close" class="close" /></a>
<div class="inst-item clearfix"><img src="images/one_finger_tap.png" alt="Single Touch" /><p>Spawn asteroids in a circular orbit.</p></div>
<div class="inst-item clearfix"><img src="images/two_finger_tap.png" alt="Double Touch" /><p>Toggle between Jupiter and Sun reference frames.</p></div>
<div class="inst-item clearfix"><img src="images/three_finger_tap.png" alt="Triple Touch" /><p>Reset all asteroids into circular orbits.</p></div>
</div>
</div>
<div style="display:none;" id="webGLunsupported">
<p>This demo requires support for WebGL.<br />
Click <a href="http://verold.com/blog/2013/1/2/enabling-webgl-in-your-browser" target="_blank">here</a> to learn more.</p>
</div>
<div style="display:none;" id="fpTexturesUnsupported">
<p>This demo requires support for floating-point textures. Updating your video card drivers may resolve the issue.<br />
</div>
<div style="display:none;" id="vTexturesUnsupported">
<p>This demo requires support for vertex textures. Updating your video card drivers may resolve the issue.<br />
</div>
<div id="verold3d"></div>
<script>
if (BrowserCaps.isWebGLEnabled()) {
if ( BrowserCaps.isFloatingPointTexturesEnabeled() ) {
if ( BrowserCaps.isVertexTexturesEnabeled() ) {
verold.load('body', 'application.json', null, function( app ) {
var gravApp = new GravitationApp( app );
gravApp.run();
});
}
else {
AppUI.vertexTexturesUnavailable();
}
}
else {
AppUI.floatingPointTexturesUnavailable();
}
} else {
AppUI.webGLDisabled();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32112573-1']);
_gaq.push(['_setDomainName', 'verold.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>