diff options
[WGL/P] Added basic UI when you aren't moving around
1 files changed, 49 insertions, 1 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/Project/Project.html | 50 |
diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html index bd70dcc..9852ab8 100644 --- a/Year 2/Computer Graphics with WebGL/Project/Project.html +++ b/Year 2/Computer Graphics with WebGL/Project/Project.html @@ -11,6 +11,7 @@ body {
padding: 0;
margin: 0;
+ font: 21px sans-serif;
}
canvas {
display: block;
@@ -21,6 +22,41 @@ canvas { height: 100vh;
/* cursor: none; */
}
+
+.hide {
+ display: none;
+}
+
+h2 {
+ border-bottom: 2px solid gray;
+}
+#menu {
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ left: 0;
+ top: 0;
+ color: white;
+}
+#menu > * {
+ position: absolute;
+ margin: 0.5em;
+ padding: 0.2em;
+ border: 2px solid white;
+ width: auto;
+}
+#paused {
+ left: 0;
+ top: 0;
+ font-size: 25px;
+ cursor: pointer;
+}
+#settings {
+ right: 0;
+ top: 0;
+ padding: 0.5em;
+ max-width: 15em;
+}
</style>
<script src="spaceship.js"></script>
@@ -66,7 +102,7 @@ canvas { new Sphere([700,0,1000], 40),
new Sphere([0,0,0], 100),
new Sphere([1000, 0, -30], 20)];
- planets.forEach((p) => p.color = [1,0,0]);
+ planets.forEach((p) => p.color = [0.956,0.5,0.215]);
resizeglcanvas();
}
@@ -98,4 +134,16 @@ canvas { <body onload="start()">
<canvas id="picasso"></canvas>
+ <div id="menu">
+ <div id="paused">Click here to explore</div>
+ <div id="settings">
+ <h2>About</h2>
+ <p>
+ Simulation of the light-bending effects of black holes.<br>
+ WASD to move around, space and shift for up and down, mouse cursor to look around.
+ </p>
+ <h2>Settings</h2>
+ Move speed:
+ </div>
+ </div>
</body>
|