-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
100 lines (100 loc) · 5.36 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
<!DOCTYPE HTML>
<head>
<title>SUBMERSIBLE</title>
<link rel="shortcut icon" href="./images/favicon.jpg" type="image/jpg" />
<link rel="icon" href="./images/favicon.jpg" type="image/jpg">
<meta name="Description" content="Interactive Submarine Experience">
<!--STYLE SHEETS-->
<link rel="stylesheet" href="style/submersible.css" />
<!--link rel="stylesheet" href="style/jquery-ui-1.9.2.custom.css" /-->
<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
<!--DEPENDENCIES-->
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/jquery.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/jquery.transit.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/underscore.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/backbone.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/webkitAudioContextMonkeyPatch.js"></script>
<!--script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/jquery-ui-1.9.2.custom.js"></script-->
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/stats.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/RequestAnimationFrame.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/three.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/Random.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/Tween.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/Interpolate.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/modernizr.js"></script>
<!--script type="text/javascript" charset="UTF-8" src="http://tambien.github.com/MSG.js/src/MSG.js"></script-->
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/MSG.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/dependencies/Metro.js"></script>
<!--APPLICATION-->
<script type="text/javascript" charset="UTF-8" src="./scripts/application/Submersible.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/application/Fish.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/application/FishCollection.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/application/Fishes.js"></script>
<script type="text/javascript" charset="UTF-8" src="./scripts/application/Metronome.js"></script>
</head>
<body>
<div id="notSupported">
<div id='title'>
SORRY
</div>
<div id='explaination'>
We're sorry, but you're browser does not support the technologies that we use in this project. Please try a browser that has both HTML5 Canvas and Web Audio such as the latest <a href='http://www.google.com/chrome/'>Google Chrome</a> or <a href='http://www.apple.com/safari/'>Safari</a>.
</div>
</div>
<div id="loadingScreen">
<img src='./images/icon-nogradient.png' id='iconHeader'/>
<div id='title'>
SUBMERSIBLE
</div>
<div id='explaination'>
You are at a helm of a submarine navigating the depths of the ocean. At each strata, you see and hear different organisms. In the sunny epipelagic zone, watch the fast and massive tuna swim by in schools. Or catch a glimpse of the rare sea pig in the darkness of the abyssopelagic. Each of these organisms contributes a spatialized motif to the evolving soundscape.
<br><br>
Submersible is a 2013 commission of New Radio and Performing Arts, Inc. for its <a href="http://turbulence.org/">Turbulence web site</a>. It was made possible with funding from the <a href='http://www.jeromefdn.org/'>Jerome Foundation</a>.
</div>
<div id="loadingBar">
<div id="loadedArea"></div>
</div>
</div>
<div id="container">
<div id='screen'>
<div id='instructions'>
<div id='instruction0' class='instructions'>
<img src='./images/speakericon.jpeg' id='speakerIcon'/>
<div id='body'>make sure your volume is turned up</div>
</div>
<div id='instruction1' class='instructions'>
<div id='instructionArrow'>←</div>
<div id='body'>tap the arrow buttons to navigate to the next palegic zone</div>
</div>
<div id='instruction2' class='instructions'>
<div id='instructionArrow'>↑↓</div>
<div id='body'>or tap the UP and DOWN arrows on your keyboard</div>
</div>
<div id='instruction3' class='instructions'>
<div id='body'>listen. explore. enjoy.</div>
</div>
<div id='buttonContainer'>
<div id='closeButton' class='button'> CLOSE </div>
<div id='nextButton' class='button'> NEXT </div>
<div id='previousButton' class='button'> PREV </div>
</div>
</div>
<div id="cockpit">
<div id="consoleContainer">
<div id='console'>
<canvas id='zoneIndicatorBulb'></canvas>
</div>
</div>
<img id='background' src="./images/cockpit-16-9-fix3.png">
<div id="upArrowTouch"></div>
<div id="downArrowTouch"></div>
<img id='upArrow' class="arrow" src="./images/cockpit-up-arrow.png">
<img id='downArrow' class="arrow" src="./images/cockpit-down-arrow.png">
</div>
<canvas id='seaWall'>
<!--div id='seaWallGradient'></div-->
</canvas>
<div id="canvas"></div>
</div>
</div>
</body>