This repository has been archived by the owner on Nov 19, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab02.html
114 lines (82 loc) · 3.44 KB
/
lab02.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
<!DOCTYPE html>
<html>
<head>
<title>Lab02 — Jeremy Grifski</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="shaders.js"></script>
<script type="text/javascript" src="constants.js"></script>
<script type="text/javascript" src="shader_setup.js"></script>
<script type="text/javascript" src="lab02.js"></script>
<script type="text/javascript" src="glMatrix-0.9.5.min_1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script async defer data-domain="rtr.therenegadecoder.com" src="https://plausible.io/js/plausible.js"></script>
</head>
<body onload="webGLStart();">
<h1>Ant Maze</h2>
<div class="container">
<canvas id="lab02-canvas" class="graph" width="700" height="700"></canvas>
</div>
<h2>Controls</h2>
Below you'll find various controls for this scene. They're broken up into the
following sections:
<ol>
<li>Mouse</li>
<li>Keyboard</li>
<li>Buttons</li>
</ol>
Hope you enjoy the game!
<h3>Mouse</h3>
Click and drag the mouse to rotate the current component.
<h3>Keyboard</h3>
<ul>
<li>w: moves component up along y-axis</li>
<li>s: moves component down along y-axis</li>
<li>a: moves component left along the x-axis</li>
<li>d: moves the component right along the x-axis</li>
<li>q: applies uniform scaling to shrink the component</li>
<li>e: applies uniform scaling to scale the component</li>
<li>1: pans the camera down by center of interest</li>
<li>2: pans the camera up by center of interest</li>
<li>3: pans the camera left by center of interest</li>
<li>4: pans the camera right by center of interest</li>
<li>5: pans the camera in by view angle</li>
<li>6: pans the camera out by view angle</li>
</ul>
<h3>Buttons</h3>
<p>
The following controls are used to select the various body parts of the ant
for transformation.
</p>
<p>
Each subsection refers to the level of the object in
the scene graph. Try grabbing a leg and pulling it off the body!
</p>
<p>
If you don't like what you've done, consider resetting the scene!
</p>
<h4>Top Level</h4>
<button onclick="obj('body')">Body</button>
<h4>Tier 2</h4>
<button onclick="obj('head')">Head</button>
<button onclick="obj('top-left-femur')">Top Left Femur</button>
<button onclick="obj('middle-left-femur')">Middle Left Femur</button>
<button onclick="obj('bottom-left-femur')">Bottom Left Femur</button>
<button onclick="obj('top-right-femur')">Top Right Femur</button>
<button onclick="obj('middle-right-femur')">Middle Right Femur</button>
<button onclick="obj('bottom-right-femur')">Bottom Right Femur</button>
<h4>Tier 3</h4>
<button onclick="obj('top-left-tibia')">Top Left Tibia</button>
<button onclick="obj('middle-left-tibia')">Middle Left Tibia</button>
<button onclick="obj('bottom-left-tibia')">Bottom Left Tibia</button>
<button onclick="obj('top-right-tibia')">Top Right Tibia</button>
<button onclick="obj('middle-right-tibia')">Middle Right Tibia</button>
<button onclick="obj('bottom-right-tibia')">Bottom Right Tibia</button>
<h4>Reset</h4>
<button onclick="redraw()"> Go Back! </button>
<footer>
<center>
<p>© Jeremy Grifski 2018</p>
</center>
</footer>
</body>
</html>