-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (89 loc) · 3.72 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<title>Trappist-1</title>
<meta name="author" content="Jerome Martinez" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://favicon.cargocollective.com/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="p5canvas"></div>
<div id="dashboard">
<div class="sliders">
<label for="">Zoom</label>
<input type="range" id="zoom" name="" value="" step=".5">
<label for="">Speed</label>
<input type="range" id="rate" name="" value="0" step=".5">
</div>
<div class="buttons">
<button id="trappist">TRAPPIST-1</button>
<button id="home">SOLAR SYSTEM</button>
<button id="infoBtn">INFO</button>
</div>
</div>
</div>
<div id="info">
<div class="ctn">
<div>
<h1>Trappist-1</h1>
<p>In February 2017, NASA announced the discovery of a seven-planet system called TRAPPIST-1, just 39 light-years from our Sun. The system is particularly exciting, not only because of its proximity to our planet, but because it has three planets within the habitable zone, where liquid water (and potentially life) could be supported.</p>
<p>This simulation compares our solar system with Trappist-1. Sizes, rates of orbit, and distance to the sun are all vaguely to scale.</p>
<p><em>hint: try zooming out once you hit the Solar System button</em></p>
</div>
<button id="noInfo">Ok, Cool</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.dom.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.sound.min.js"></script> -->
<script type="text/javascript">
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {
37: 1,
38: 1,
39: 1,
40: 1
};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
window.scrollTo(0, 1);
disableScroll();
</script>
<script src="lib/p5.collide2d.js" type="text/javascript"></script>
<!-- <script src="range-touch.js" type="text/javascript"></script> -->
<script src="planet.js" type="text/javascript"></script>
<script src="star.js" type="text/javascript"></script>
<script src="sun.js" type="text/javascript"></script>
<script src="comet.js" type="text/javascript"></script>
<script src="starsystem.js"></script>
</body>
</html>