[WGL/P] Added a proper level management system, added more options to the menu

5 files changed, 123 insertions, 23 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 6133dba..1dc3ffe 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -11,7 +11,7 @@
 body {

 	padding: 0;

 	margin: 0;

-	font: 21px sans-serif;

+	font: 18px sans-serif;

 }

 canvas {

 	display: block;

@@ -44,6 +44,7 @@ h2 {
 	padding: 0.2em;

 	border: 2px solid white;

 	width: auto;

+	background-color: black;

 }

 #paused { 

 	left: 0;

@@ -55,7 +56,8 @@ h2 {
 	right: 0;

 	top: 0;

 	padding: 0.5em;

-	max-width: 15em;

+	max-width: 24em;

+	max-height: calc(100vh - 0.5em);

 }

 	</style>

 

@@ -63,6 +65,7 @@ h2 {
 	<script src="skybox.js"></script>

 	<script src="star.js"></script>

 	<script src="blackhole.js"></script>

+	<script src="level.js"></script>

 	<script>

 		/*

 		 * WebGL

@@ -101,20 +104,12 @@ h2 {
 			gl.uniform3f(uDiffuseColor,1,1,1);

 			gl.uniform3f(uLightDir,0,0,-1);

 

-			skybox = new Skybox(10000, [0,0,0], undefined);

-

-			stars = [

-				new Star([1200,0,1000], 10),

-				// new Star([1000,0,900], 30),

-				// new Star([950,0,1100], 40),

-			];

-						// new Star([1000,0,-1000], 50)

-			// 			new Star([0,0,0], 100)

-			// 			new Star([1000, 0, -30], 20);

+			gl.uniform4f(uBlack, 0,0,0,1);

+			gl.uniform4f(uBHBlack, 0,0,0,1);

 

-			blackHoles = [

-				new BlackHole([1000,0,900], 30)

-			];

+			skybox = new Skybox(10000, [0,0,0], undefined);

+			createLevels();

+			initMenu();

 

 			resizeglcanvas();

 		}

@@ -135,7 +130,7 @@ h2 {
 			updateCamera();

 			gl.uniform3fv(uEye, pos);

 

-			stars[0].moveTo(vecSum(stars[0].sphere.center, [-0.5,0,0]));

+			// stars[0].moveTo(vecSum(stars[0].sphere.center, [-0.5,0,0]));

 

 			skybox.draw();

 			stars.forEach((s) => s.draw());

@@ -148,15 +143,29 @@ h2 {
 <body onload="start()">

 	<canvas id="picasso"></canvas>

 	<div id="menu">

-		<div id="paused">Click here to explore</div>

+		<div id="paused">Click here to start moving</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.

+				WASD to move around, space and shift for up and down, mouse cursor to look around.<br>

+				Escape will remove your controls and bring you back here.

+			</p>

+			<h2>Level</h2>

+			<p>

+				<select id="level-select"></select>

+				<p id="level-description"></p>

+				<p>

+					Pause movement: <input type="checkbox" id="pause-movement">

+				</p>

 			</p>

 			<h2>Settings</h2>

-			Move speed:

+			<p>

+				Debug mode: <input type="checkbox" id="debug-mode"><br>

+				Only horizontal mouse movement: <input type="checkbox" id="only-horizontal"><br>

+				Only vertical mouse movement: <input type="checkbox" id="only-vertical">

+			</p>

 		</div>

 	</div>

+	<script src="menu.js"></script>

 </body>

diff --git a/Year 2/Computer Graphics with WebGL/Project/level.js b/Year 2/Computer Graphics with WebGL/Project/level.js
new file mode 100644
index 0000000..65c3cc6
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Project/level.js
@@ -0,0 +1,32 @@
+stars = [];
+blackHoles = [];
+levels = [];
+
+Level = function(name, description, cameraCoords) {
+	this.name = name;
+	this.description = description;
+	this.cameraCoords = cameraCoords;
+	this.stars = [];
+	this.blackHoles = [];
+	levels.push(this);
+}
+Level.prototype.addStar = function(center, size) {
+	this.stars.push(new Star(center, size));
+}
+Level.prototype.addBlackHole = function(center, size) {
+	this.blackHoles.push(new BlackHole(center, size));
+}
+Level.prototype.load = function() {
+	stars = this.stars;
+	blackHoles = this.blackHoles;
+	pos = this.cameraCoords;
+}
+
+function createLevels() {
+	var l1 = new Level(
+		"Star passing behind black hole",
+		"You can see how the black hole (correctly) warps the light of the star behind it when it passes",
+		[1000,0,650]);
+	l1.addStar([1100,0,1000], 10);
+	l1.addBlackHole([1000,0,900], 30);
+}
diff --git a/Year 2/Computer Graphics with WebGL/Project/menu.js b/Year 2/Computer Graphics with WebGL/Project/menu.js
new file mode 100644
index 0000000..83a8e3c
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Project/menu.js
@@ -0,0 +1,52 @@
+function initMenu() {
+	initLevels();
+	debugChange.call(debugModeCB);
+}
+
+const debugModeCB = document.getElementById('debug-mode');
+function debugChange() {
+	if(this.checked) {
+		gl.uniform4f(uBlack, 1,0,0,1);
+		gl.uniform4f(uBHBlack, 0,1,0,1);
+	}
+	else {
+		gl.uniform4f(uBlack, 0,0,0,1);
+		gl.uniform4f(uBHBlack, 0,0,0,1);
+	}
+}
+debugModeCB.addEventListener('change', debugChange);
+
+const onlyHorizontalCB = document.getElementById('only-horizontal');
+function horChange() {
+	onlyHorizontal = this.checked;
+}
+horChange.call(horChange);
+onlyHorizontalCB.addEventListener('change', horChange);
+
+const onlyVerticalCB = document.getElementById('only-vertical');
+function verChange() {
+	onlyVertical = this.checked;
+}
+verChange.call(onlyVerticalCB);
+onlyVerticalCB.addEventListener('change', verChange);
+
+/* Levels */
+
+const levelSelect = document.getElementById('level-select');
+const levelDesc = document.getElementById('level-description');
+
+function initLevels() {
+	for (var i = 0; i < levels.length; i++) {
+		var elem = document.createElement('option');
+		elem.value = i;
+		elem.innerText = levels[i].name;
+		levelSelect.appendChild(elem);
+	}
+	levelChange.call(levelSelect);
+}
+
+function levelChange() {
+	levelDesc.innerText = levels[this.value].description;
+	levels[this.value].load();
+}
+levelSelect.addEventListener('change', levelChange);
diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js
index 302ed50..4027c6d 100644
--- a/Year 2/Computer Graphics with WebGL/Project/shaders.js
+++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js
@@ -44,6 +44,10 @@ var fShader = `
 	varying vec3 vColor;

 	varying vec3 vXYZ;

 

+	// Settings

+	uniform vec4 uBlack;

+	uniform vec4 uBHBlack;

+

 	// For ray marching

 	uniform vec4 uStars[` + STAR_MAX_COUNT + `];

 	uniform vec4 uBH[` + BLACKHOLE_MAX_COUNT + `];

@@ -146,7 +150,7 @@ var fShader = `
 		}

 

 		if (bhStatus == 1) {

-			return vec4(0,1,0,1);

+			return uBHBlack;

 		}

 

 		// Does the ray hit a star

@@ -156,7 +160,7 @@ var fShader = `
 				return calculateColor(bhStatus == 2, uStars[i], ray, step);

 			}

 		}

-		return vec4(1,0,0,1);

+		return uBlack;

 	}

 

 	void main()

diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
index cb3b548..654b451 100644
--- a/Year 2/Computer Graphics with WebGL/Project/spaceship.js
+++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
@@ -112,11 +112,14 @@ document.addEventListener('keyup', (event) => {
 /*
  * Mouse movement
  */
+
+var onlyHorizontal = false;
+var onlyVertical = false;
 function updateLookingDirection(e) {
 	if (isPaused) return;
 
-	var vertical   = (e.movementY / canvas.offsetHeight) * ROTATION_SPEED;
-	var horizontal = (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED;
+	var vertical   = (1-onlyHorizontal) * (e.movementY / canvas.offsetHeight) * ROTATION_SPEED;
+	var horizontal = (1-onlyVertical)   * (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED;
 
 	forward.addAngles(vertical, horizontal);
 	up.addAngles(vertical, horizontal);