-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtwo-earths-canvases.html
107 lines (107 loc) · 4.95 KB
/
two-earths-canvases.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Two Views of Earth</title>
<link href="../stylesheets/style.css" rel="stylesheet" type="text/css"/>
<link href="../stylesheets/video-js.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../lib/scenejs-0.8.0/scenejs.js"></script>
</head>
<div id="container">
<div id="header-inner">
<h1 id="title"><a href="http://scenejs.org">SceneJS</a> : Earth</h1>
<div id="simulation-controls">
<ul class="horiz">
<li>
<label for="time_of_year">Time of year:</label>
<select id="time_of_year" name="time_of_year">
<option value="jun" selected="true">June 21</option>
<option value="sep">September 21</option>
<option value="dec">December 21</option>
<option value="mar">March 21</option>
</select>
</li>
<li>
<label for="earth_surface">Earth Surface:</label>
<select id="earth_surface" name="earth_surface">
<option value="terrain">Terrain</option>
<option value="temperature">Mean Monthly Temperature</option>
</select>
</li>
<li id="temperature-color-map">
<img src="images/color-map-minus30-to-30-500px.png" alt="color map for temperature"/>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="webglCanvasContainer">
<ul class="hlist">
<li>
<canvas id="theCanvas1" width="500" height="350">
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a>
<canvas> feature.</p>
</canvas>
</li>
<li>
<canvas id="theCanvas2" width="500" height="350">
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a>
<canvas> feature.</p>
</canvas>
</li>
</ul>
</div>
<div id="info">
<h2>Earth</h2>
<p>
The visualization starts with the Earth in it's June 21 orbital orientation ... summer in the northern hemisphere.
There are two views, the first is Earth from the side along the path of the orbit.
The second view is from the north with respect to the Earth's orbital plane.
You can drag in the first view to rotate your view around Earth.
You can select four different times of year and display either a terrain map or a map of monthly mean temperatures.
</p>
<h2>Getting a WebGL-enabled browser</h2>
<div id="getting-webgl">
<p>
You need a <a href='http://learningwebgl.com/blog/?p=11'>WebGL-enabled</a> browser to explore this visualization.
Beta releases of <a href="http://www.google.com/landing/chrome/beta/">Chrome</a> for Mac OS X and Windows
and the <a href="http://nightly.webkit.org/">WebKit nightly</a> beta release for Mac OS X appear to work best.
</p>
</div>
<h2>Credits</h2>
<p>
Earth texture from <a href="http://www.esa.int/esaEO/SEMGSY2IU7E_index_1.html">the European Space Agency/Envisat</a>.<br/>
</p>
<p>
The Milky Way galaxy texture from <a href="http://www.gigagalaxyzoom.org/image_milkyway.html">Gigagalaxy Zoom: Milky Way Panorama</a>, by ESO/S. Brunier.<br/>
</p>
<p>
Temperature map images adapted from the <a href="http://www.esrl.noaa.gov/psd/cgi-bin/DataAccess.pl?DB_dataset=CDC+Derived+NCEP+Reanalysis+Products+Surface+Level&DB_variable=Air+Temperature&DB_statistic=Mean&DB_tid=27959&DB_did=39&DB_vid=1041">CDC Derived NCEP Reanalysis Products Surface Level Data</a> produced by the
<a href="http://www.esrl.noaa.gov/psd/">Physical Science Division</a> at <a href="http://www.esrl.noaa.gov/">NOAA's Earth System Research Laboratory</a>.
</p>
<p>
Outline image of continents adapted from <a href="http://www.giss.nasa.gov/tools/panoply/overlays/Earth_MWDB1.gif">Earth_MWDB1</a> gif image produced by the <a href="http://www.giss.nasa.gov/tools/panoply/overlays/">Panoply Data Viewer Project</a> at National Aeronautics and Space Administration's <a href="http://www.giss.nasa.gov/">
Goddard Institute for Space Studies</a>.
</p>
<h2>Source Code</h2>
<p>Some of the JavaScript source code:</p>
<ul>
<li><a target="_other" href="two-earths-canvases-earth.js">two-earths-canvases.js</a></li>
</ul>
<p>
View the rest of the code on <a href="https://github.com/stepheneb/seasons">github</a>.
</p>
</div>
<div id="log">
<h3>SceneJS Log 1</h3>
<div id="theLoggingDiv1"></div>
<h3>SceneJS Log 2</h3>
<div id="theLoggingDiv2"></div>
</div>
</div>
</div>
<script type="text/javascript" src="javascript/two-earths-canvases.js"></script>
</body>
</html>