forked from ofrohn/d3-celestial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
planets-animation.html
80 lines (70 loc) · 2.94 KB
/
planets-animation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3-Celestial Starmap</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
<script type="text/javascript" src="../celestial.js"></script>
<link rel="stylesheet" href="../celestial.css">
<style type="text/css">
.btnPlanet { display: inline-block; font: bold 14pt Consolas; margin: 0 6px; padding: 2px 6px; border: 2px solid #000; border-radius: 3px; background: rgba(204, 204, 255, 0.6) }
</style>
</head>
<body>
<div id="follow"></div>
<div style="overflow:hidden;"><div id="celestial-map"></div></div>
<div id="celestial-form"></div>
<script type="text/javascript">
var cfg = Celestial.settings().set({
geopos: [0,0],
location: true,
form: true,
formFields: {"location": true, "general": false, "stars": false, "dsos": false, "constellations": false, "lines": false, "other": true},
advanced: false,
follow: "center",
projection: "orthographic",
datapath: "https://ofrohn.github.io/data/",
planets: { show: true },
stars: { names: false, limit: 4.6 },
dsos: { show: false },
constellations: { names: false }
}),
reqID,
reqAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
window.oRequestAnimationFrame,
cncAnimFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame || window.msCancelAnimationFrame ||
window.oCancelAnimationFrame,
dt = new Date();
Celestial.display(cfg);
/*
var planets = {"sol": "Sun", "mer": "Mercury", "ven": "Venus", "lun": "Moon", "mar": "Mars", "jup": "Jupiter",
"sat": "Saturn", "ura": "Uranus", "nep": "Neptune", "cer": "Ceres", "plu": "Pluto"}
follow = "",
div = d3.select("#follow");
for (key in planets) {
div.append("div").attr("id", key).attr("class", "btnPlanet").html(planets[key]).on("click", function() {
follow = this.id;
cncAnimFrame(reqID);
p = Celestial.getPlanet(follow, dt);
Celestial.rotate({center: p.ephemeris.pos});
})
}
*/
function animate() {
dt.setDate(dt.getDate()+1);
Celestial.date(dt);
reqID = reqAnimFrame(animate);
if (follow === "") return;
}
d3.select('#celestial-map').on('mousedown', function() { cncAnimFrame(reqID) } )
d3.select('#celestial-map').on('mouseup', function() { reqAnimFrame(animate) } )
reqID = reqAnimFrame(animate);
</script>
<footer id="d3-celestial-footer">
<p><a href="https://github.com/ofrohn/d3-celestial"><b>D3-Celestial</b></a> released under <a href="http://opensource.org/licenses/BSD-3-Clause">BSD license</a>. Copyright 2015-20 <a href="http://armchairastronautics.blogspot.com/" rel="author">Olaf Frohn</a>.</p>
</footer>
</body>
</html>