-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (87 loc) · 3.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="description" content="Fall 2018 CS 480/680 Computer Graphics Fundamentals homework site">
<meta name="robots" content="index/nofollow">
<meta name="author" content="Jonathan B. Metzgar">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./assets/favicon.png">
<link rel="shortcut icon" href="./assets/favicon.ico">
<link rel="apple-touch-icon" href="./assets/favicon.png">
<script>
let g_PageTitle = "Hackathon 2018: The Rubiks Cube";
let g_PageAuthor = "C. Emerson";
let loc = window.location.href.search(".html");
document.write("<title>" + g_PageTitle + "</title>");
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<header>
<h1 class="uaf" style="font-size: 1.2em;">
<a href="index.html">
<script>
document.write(g_PageTitle);
</script>
</a>
</h1>
<h2 style="font-size: 1em;">
<script>
document.write("by B. Hedges, J. Thomas and C. Emerson");
</script>
</h2>
<hr class="goldhr" />
</header>
<div class="app" id="app"></div>
<div class="desc" id="desc">
<b>The Rubiks Cube</b> <br/>
This is a collaboration between a biologist, physicist, and a computer engineer. Together we created a 3D representation of the ubiquitous Rubiks Cube.
<br/>
<br/>
<b>Controls</b> <br/>
<b>A</b> - Rotate the Front-Left Face Clockwise<br/>
<b>W</b> - Rotate the Top Face Clockwise <br/>
<b>D</b> - Rotate the Front-Right Face Clockwise <br/>
<b>While Holding Shift</b> - Do the opposite <br/>
<b>UpArrow</b> - Flip the Rubiks Cube <br/>
<b>LeftArrow - RightArrow</b> - Rotate the Rubiks Cube Left or Right <br/>
<b>R</b> - Solve the Rubiks Cube (Resets the Rubiks Cube) <br/>
<b>G</b> - Scramble the Rubiks Cube (Hold for a disco cube) <br/>
<br/>
<b>Power User Controls</b><br/>
<b>Tab</b> - Enable Power Users (includes previous controls) and show the back faces <br/>
<b>Q</b> - Rotate the Back-Left Face Clockwise <br/>
<b>E</b> - Rotate the Back-Right Face Clockwise <br/>
<b>S</b> - Rotate the Bottom Face Clockwise <br/>
<br/>
<br/>
<b>Notes</b> <br/>
<ul>
<li>Each of the 6 faces is composed of 9 subfaces for a total of 54 subfaces to keep track of (Stored in an array of integers). </li>
<li>Each face has one face rotation written. (Reverse rotations are implemented via forward rotation three times). </li>
<li>Each face doesn't move, their subfaces are modified accordingly. </li>
<li>Scramble chooses a random face and rotates clockwise 1 to 3 times (It uses the defined face rotations). </li>
<li>The Rubiks Cube is drawn by drawing two triangles (which make up one subface) 54 times.</li>
<li>The WorldMatrix, which the "one" subface uses to draw all the subfaces, is constructed by translating as if the subface was on the front face and then is rotated to the appropriate face. </li>
</ul>
</div>
<button onclick="hflog.clear()">Clear Log</button>
<div class="log" id="log"></div>
<script src="library.js"></script>
<footer>
<hr class="bluehr" />
<script>
document.write("<a style=\"color:blue\" href=\"https://github.com/cjemerson/Hackathon2018_RubiksCube\"> Navigate back to Github </a>");
</script>
</footer>
</article>
<script>
window.onload = () => {
let app = new HackathonApp();
app.run();
};
</script>
</body>
</html>