From 517cd733258ce53b3d96bf04d427451278bc546e Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Thu, 24 Aug 2023 17:04:20 +0300
Subject: [WGL/P] Removed old black hole logic, started rework on movement,
 proper forward, backward, up, down movement and horizontal mouse movement

---
 .../Project/Project.html                           |  84 +++--------------
 .../Project/shaders.js                             |  30 +-----
 .../Project/spaceship.js                           | 102 +++++++++++++++++++++
 3 files changed, 115 insertions(+), 101 deletions(-)
 create mode 100644 Year 2/Computer Graphics with WebGL/Project/spaceship.js

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 627e21a..cacc8bc 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html	
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html	
@@ -13,7 +13,7 @@ body {
 }
 canvas {
 	display: block;
-	position: fixed;
+	pos: fixed;
 	left: 0;
 	top: 0;
 	width: 100vw;
@@ -23,62 +23,20 @@ canvas {
 	</style>
 
 	<script>
-		/*
-		 * Keyboard navigation
-		 */
-
-		const MOVE_SPEED = 0.1;
-		const ROTATION_SPEED = 0.05;
-
-		var position = [10, 0, 3];
-		var lookingVec = [-MOVE_SPEED,0,-0.02];
-		var movementVec = [0,0,0];
-
-		function vecSum(a, b) {
-			return [a[0]+b[0], a[1]+b[1], a[2]+b[2]];
-		}
-		function vecSub(a, b) {
-			return [a[0]-b[0], a[1]-b[1], a[2]-b[2]];
-		}
-
-		addEventListener("keydown", (event) => {
-			switch (event.key) {
-				case 'ArrowUp':
-				case 'w':
-					position = vecSum(position, lookingVec);
-					break;
-				case 'ArrowDown':
-				case 's':
-					position = vecSub(position, lookingVec);
-					break;
-				case 'ArrowLeft':
-				case 'a':
-					position = [0,-MOVE_SPEED,0];
-					break;
-				case 'ArrowRight':
-				case 'd':
-					position = [0,MOVE_SPEED,0];
-					break;
-			}
-		});
-
-		addEventListener("mousemove", (event) => {
-			var screenCenterX = document.body.clientWidth / 2;
-			var screenCenterY = document.body.clientHeight / 2;
-
-			// lookingVec = [];
-		});
-
+	</script>
+	<script src="spaceship.js"></script>
+	<script>
 		/*
 		 * WebGL
 		 */
 
 		function start()
 		{
-			var canvas = document.getElementById("picasso");
+			canvas = document.getElementById("picasso");
 			canvas.addEventListener('webglcontextlost',function(event){event.preventDefault();},false);
 			canvas.addEventListener('webglcontextrestored',function(){init();},false);
 
+			mouseInit();
 			init();
 		}
 
@@ -94,9 +52,6 @@ canvas {
 			gl.enable(gl.BLEND);
 			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-			// Black Hole variables
-			gl.vertexAttrib1f(aBH, 0);
-
 			identity();
 			perspective(30,gl.canvas.width/gl.canvas.height,1,40000);
 			gl.uniform1i(uUseNormalMatrix,false);
@@ -105,29 +60,16 @@ canvas {
 			gl.uniform3f(uDiffuseColor,1,1,1);
 			gl.uniform3f(uLightDir,0,0,-1);
 
-			blackHole = new BlackHole([0,0,0], 1);
-			planets = [new Sphere([-3,0,0.5], 0.5), new Sphere([-3,0,-1.2], 0.5), new Sphere([-3,0,-2.4], 0.5)];
+			planets = [new Sphere([1000,0,1000], 50),
+						new Sphere([1000,0,-1000], 50),
+						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]);
 
 			resizeglcanvas();
 		}
 
-		BlackHole = function(center, size) {
-			this.sphere = new Sphere(center, size);
-			this.shwarzschildRadius = 0.5; // bad
-		}
-
-		BlackHole.prototype.draw = function() {
-			gl.vertexAttrib1f(aBH, 1);
-			gl.vertexAttrib1f(aSR, this.shwarzschildRadius);
-			gl.vertexAttrib1f(aR, this.sphere.size + 0.03);
-			gl.vertexAttrib3f(aBHXYZ, ...this.sphere.center);
-
-			this.sphere.draw();
-
-			gl.vertexAttrib1f(aBH, 0);
-		}
-
 		function resizeglcanvas() {
 			gl.canvas.width = gl.canvas.offsetWidth;
 			gl.canvas.height = gl.canvas.offsetHeight;
@@ -144,13 +86,11 @@ canvas {
 		{
 			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
 
-			lookAt(position, vecSum(position, lookingVec), [0,0,1]);
+			lookUpdate();
 			planets.forEach((p) => p.draw());
-			blackHole.draw();
 
 			requestAnimationFrame(drawFrame);
 		}
-
 	</script>
 </head>
 
diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js
index 33fc743..3821899 100644
--- a/Year 2/Computer Graphics with WebGL/Project/shaders.js	
+++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js	
@@ -16,16 +16,6 @@
 	
 	varying vec3 vColor;
 	varying vec3 vXYZ;
-
-	// Black Hole variables
-	attribute float aBH;
-	varying float vBH;
-	attribute vec3 aBHXYZ;
-	varying vec3 vBHXYZ;
-	attribute float aSR;
-	varying float vSR;
-	attribute float aR;
-	varying float vR;
 	
 	void main ()
 	{
@@ -39,8 +29,6 @@
 		vec3 normal = vec3(normalize(nMatrix*vec4(aNormal,0)));
 		vColor += aColor*uDiffuseColor*max(dot(normal,light),0.0);
 		vXYZ = (uModelMatrix * vec4(aXYZ,1)).xyz;
-
-		vBH = aBH; vBHXYZ = aBHXYZ; vSR = aSR; vR = aR;
 	}
 `;
 	
@@ -50,24 +38,8 @@ var fShader = `
 	varying vec3 vColor;
 	varying vec3 vXYZ;
 
-	varying float vBH;
-	varying vec3 vBHXYZ;
-	varying float vSR;
-	varying float vR;
-
 	void main()
 	{
-		if (vBH > 0.5 && distance(vXYZ, vBHXYZ) <= vR) {
-			float dist = distance(vXYZ, vBHXYZ);
-			if (dist < vSR) {
-				gl_FragColor = vec4(0,0,0,1);
-			}
-			else {
-				gl_FragColor = vec4(vColor,0.5);
-			}
-		}
-		else {
-			gl_FragColor = vec4(vColor,1.0);
-		}
+		gl_FragColor = vec4(vColor,1.0);
 	}
 `;
diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
new file mode 100644
index 0000000..3cf7315
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js	
@@ -0,0 +1,102 @@
+/*
+ * Helpers
+ */
+
+const MOVE_SPEED = 1.5;
+const ROTATION_SPEED = 3;
+
+var pos     = [1000, 0, 30];
+
+var phi = 0;
+var theta1 = Math.PI / 2;
+var forward = [0,0,1];
+
+var up      = [0,1,0];
+
+function vecSum(a, b) {
+	return [a[0]+b[0], a[1]+b[1], a[2]+b[2]];
+}
+function vecSub(a, b) {
+	return [a[0]-b[0], a[1]-b[1], a[2]-b[2]];
+}
+function vecScale(a, scale) {
+	return [a[0] * scale, a[1] * scale, a[2] * scale];
+}
+
+/*
+ * Navigation keys
+ */
+
+var pressedKeys = [ false, false, false, false, false, false ];
+var keyAction = [
+	() => { pos = vecSum(pos, up); },      // ' '
+	() => { pos = vecSub(pos, up); },      // 'Shift'
+	() => { pos = vecSum(pos, forward); }, // 'w'
+	() => { pos = vecSub(pos, forward); }, // 's'
+	() => { },                             // 'a'
+	() => { },                             // 'd'
+];
+addEventListener("keydown", (event) => {
+	switch (event.key) {
+		case ' ': pressedKeys[0] = true; break;
+		case 'Shift': pressedKeys[1] = true; break;
+		case 'w': pressedKeys[2] = true; break;
+		case 's': pressedKeys[3] = true; break;
+		case 'a': pressedKeys[4] = true; break;
+		case 'd': pressedKeys[5] = true; break;
+	}
+});
+addEventListener("keyup", (event) => {
+	switch (event.key) {
+		case ' ': pressedKeys[0] = false; break;
+		case 'Shift': pressedKeys[1] = false; break;
+		case 'w': pressedKeys[2] = false; break;
+		case 's': pressedKeys[3] = false; break;
+		case 'a': pressedKeys[4] = false; break;
+		case 'd': pressedKeys[5] = false; break;
+	}
+});
+
+/*
+ * Mouse movement
+ */
+function updateForward(e) {
+	var vertical   = (e.movementY / canvas.offsetHeight) * ROTATION_SPEED;
+	var horizontal = (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED;
+
+	// forward = vecSum(forward, vecScale(up, vertical));
+	// forward = vecSum(forward, vecScale(left, horizontal));
+	var before = theta1 <= Math.PI;
+	theta1 = (theta1 + vertical) % (2 * Math.PI);
+	var theta = (theta1 <= Math.PI) ? theta1 : 2*Math.PI - theta1;
+	if (before && theta1 > Math.PI) phi = (phi + Math.PI) % (2 * Math.PI);
+	else if (!before && theta1 <= Math.PI) phi = (phi - Math.PI) % (2 * Math.PI);
+	// if (theta > Math.PI) {
+	// }
+	phi = (phi + horizontal) % (2 * Math.PI);
+	forward = [Math.sin(theta) * Math.sin(phi), Math.cos(theta), Math.sin(theta) * Math.cos(phi)];
+	up = [forward[0], forward[2], forward[1]];
+	console.log(forward);
+}
+
+function mouseInit() {
+	canvas.addEventListener('click', async () => {
+		await canvas.requestPointerLock();
+	});
+	document.addEventListener('pointerlockchange', () => {
+		if (document.pointerLockElement === canvas) {
+			document.addEventListener("mousemove", updateForward);
+		} else {
+			document.removeEventListener("mousemove", updateForward);
+		}
+	});
+}
+
+/*
+ * On every draw
+ */
+function lookUpdate() {
+	for (var i = 0; i < pressedKeys.length; i++)
+		if (pressedKeys[i]) keyAction[i]();
+	lookAt(pos, vecSum(pos, forward), up);
+}
-- 
cgit v1.3.1-26-gb76a