-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
208 lines (197 loc) · 7.49 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
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<title>4D Geometry Viewer</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="src/css/index.css">
<!-- For making POST requests -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- For parsing mathematical expressions. Used by the gui -->
<script src="src/lib/parser.js"></script>
<script src="src/lib/glsl_parser.js"></script>
<!-- Triangulation library from https://github.com/mapbox/earcut -->
<script src="src/lib/earcut.min.js"></script>
<!-- Dat.gui library -->
<script src="src/lib/dat.gui.js"></script>
<!-- three.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>-->
<script src="src/lib/threejs/three.js"></script>
<!-- Threejs QuickHull implementation -->
<script src="src/lib/threejs/QuickHull.js"></script>
<script src="src/lib/threejs/ConvexGeometry.js"></script>
<script src="src/lib/threejs/ConvexHyperGeometry.js"></script>
<script src="src/lib/threejs/HyperGeometry.js"></script>
<script src="src/lib/threejs/THREE.MeshLine.js"></script>
<!-- Geometric Algebra libary -->
<script src="src/lib/versor.js"></script>
<!-- Controls -->
<script src="src/lib/threejs/OrbitControls.js"></script>
<!-- Nick Nooney's Polygonize, used in the modes to convert an equation to a set of points/faces -->
<script src="src/util/polygonize.js"></script>
<!-- Our common gui interface & utilities -->
<script src="src/util/gui.js"></script>
<script src="src/util/grid.js"></script>
<script src="src/util/util.js"></script>
<script src="src/util/QuickHull4D.js"></script>
<!-- All of our 2d/3d/4d modes -->
<script src="src/2d.js"></script>
<script src="src/3d.js"></script>
<script src="src/4d.js"></script>
<!-- Where all functions for rendering the left side of the screen are -->
<script src="src/Projecting.js"></script>
<!-- Right side of the screen -->
<script src="src/Slicing.js"></script>
</head>
<body>
<div id="main-menu">
<center>
<h1>4D Geometry Viewer</h1>
<p>Created at St. Olaf College for Professor Paul Humke. <span id="open_about">More about this Project.</span></p>
<!-- mode buttons -->
<div id="mode_buttons">
<!-- 2D -->
<div class="button_base b_3d_roll" id="btn_2d">
<div>
<svg width="100" height="100">
<rect x="37" y="1" width="25" height="25"
style="stroke:#ffa0a3;stroke-width:2px;fill:none;" />
</svg>
</div>
<div>2D</div>
</div>
<!-- 3D -->
<div class="button_base b_3d_roll" id="btn_3d">
<div>
<img src="src/img/cube.svg" alt="Cube" style="width:45%; height:auto; margin-top:-15px;">
</div>
<div>3D</div>
</div>
<!-- 4D -->
<div class="button_base b_3d_roll" id="btn_4d">
<div>
<img src="src/img/tesseract.svg" alt="Tesseract" style="width:32%; height:auto; margin-top:-8px;">
</div>
<div>4D</div>
</div>
</center>
</div>
<!-- This is where the actual program will live. It's hidden until you select a mode -->
<div id="mode_container" style="display: none;">
<div id="header">
<center>
<p><span id="world_title"></span> - <span id="back_to_menu_btn">Back to Menu</span></p>
</center>
</div>
<div id="display">
<div id="left-view">
<canvas></canvas>
</div>
<div id="right-view">
<canvas></canvas>
</div>
</div>
</div>
<!-- About Section, Hidden until Click Link -->
<section id="about">
<div id="modal_content">
<span id="close_btn">×</span>
<h1>About 4D Geometry Viewer</h1>
<p>This project was developed by students at <a target="_blank" href="https://wp.stolaf.edu">St. Olaf College</a>: Omar Shehata ('18), Joe Peterson ('18), Tianyu Pang ('18'), Justin Pacholec ('18) and Nick Nooney ('16) under the direction of <a target="_blank" href="https://www.stolaf.edu/people/humke/">Professor Paul Humke</a> in 2017.</p>
<p>You can check out the project on <a target="_blank" href="https://github.com/StoDevX/humke-4d-geometry">GitHub</a>.</p>
<h2>Credits</h2>
<ol>
<li>Cube icon by <a target="_blank" href="https://thenounproject.com/mffajes/">Michel Faz Fajes</a>, and Tesseract icon by <a target="_blank" href="https://thenounproject.com/kemesh/">Kemesh Maharjan</a>; both from <a target="_blank" href="https://thenounproject.com">Noun Project</a>.</li>
<li>This project relies on
<a target="_blank" href="https://threejs.org">three.js</a>,
<a target="_blank" href="https://github.com/silentmatt/expr-eval">expr-eval</a>,
<a target="_blank" href="https://github.com/mapbox/earcut">Earcut</a>,
<a target="_blank" href="https://github.com/dataarts/dat.gui">dat.GUI</a> and
<a target="_blank" href="https://github.com/weshoke/versor.js/">versor.js</a>
</li>
</ol>
</div>
</section>
<script>
// open and close about page
// get about section and the button to open about page
var modal = document.querySelector("#about");
var content = document.querySelectorAll("#modal_content")[0];
var open_btn = document.querySelector("#open_about");
var close_btn = document.querySelector("#close_btn");
// click link to open about page
open_btn.onclick = function() {
modal.style.display = "flex";
modal.style.animationName = "fade_in";
content.style.animationName = "slide_in_from_top";
};
// click close button or anywhere outside about page to close
close_btn.onclick = function() {
modal.style.animationName = "fade_out";
content.style.animationName = "slide_out";
setTimeout( function(){
modal.style.display = "none";
}, 350);
};
document.onclick = function(event) {
if (event.target == modal) {
modal.style.animationName = "fade_out";
content.style.animationName = "slide_out";
setTimeout( function(){
modal.style.display = "none";
}, 350);
}
};
</script>
<script>
// Create a global copy of util for keyboard listening
window.Keyboard = new Util();
window.Keyboard.SetupKeyListeners();
// Listen for clicks on any of the mode buttons to:
// - Hide the menu
// - Init the mode
// - Init the gui
// - Create the top bar with the back button
var buttons = ['btn_2d','btn_3d','btn_4d']
var text_map = {'btn_2d':'2D','btn_3d':'3D','btn_4d':'4D'}
var mode_objects = {};
var current_mode = "";
mode_objects['2D'] = new Mode2D(document);
mode_objects['3D'] = new Mode3D(document);
mode_objects['4D'] = new Mode4D(document);
var gui = new GUI();
for(var i=0;i<buttons.length;i++){
var b_name = "#" + buttons[i];
document.querySelector(b_name).onclick = function(e){
var clicked_name = e.target.id.replace("#","");
current_mode = text_map[clicked_name];
// Hide main menu
document.querySelector("#main-menu").style.display = "none";
// Show the display container div
document.querySelector("#mode_container").style.display = "block";
document.querySelector("#world_title").innerHTML = text_map[clicked_name] + " World"
// Init the mode (the mode inits the gui with its own options)
mode_objects[current_mode].init(document.querySelector("#display"),gui);
// Add window resize event listener
window.addEventListener('resize',mode_objects[current_mode]);
}
}
// Back to menu button
document.querySelector("#back_to_menu_btn").onclick = function(e){
// Switch back to main menu
document.querySelector("#main-menu").style.display = "block";
document.querySelector("#mode_container").style.display = "none";
// Destory the mode
mode_objects[current_mode].cleanup();
}
//Initialize the versor library
if(window.E4 == null){
window.E4 = versor.create({
metric:[1, 1, 1, 1],
types: [
{ name:"Rot", bases:["s", "e12", "e13", "e23", "e14", "e24", "e34"] },
]
});
}
</script>
</body>
</html>