From a35a987997415dc8af71a3524ed19fc9bc4896e7 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Thu, 9 Feb 2023 14:57:19 +0200
Subject: [WGL/P] Added semi-working keyboard navigation and toyed around with
 shaders

---
 .../Project/Project.html                           | 84 ++++++++++++++++++++--
 1 file changed, 77 insertions(+), 7 deletions(-)

(limited to 'Year 2/Computer Graphics with WebGL/Project/Project.html')

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index a9e1d66..627e21a 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html	
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html	
@@ -8,16 +8,71 @@
 	<script src="shaders.js"></script>
 
 	<style>
+body {
+	padding: 0;
+}
 canvas {
 	display: block;
 	position: fixed;
-	border: 1px solid black;
-	width: calc(100vw - 18px);
-	height: calc(100vh - 18px);
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	/* cursor: none; */
 }
 	</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 = [];
+		});
+
+		/*
+		 * WebGL
+		 */
+
 		function start()
 		{
 			var canvas = document.getElementById("picasso");
@@ -35,6 +90,12 @@ canvas {
 
 			gl.enable(gl.DEPTH_TEST);
 			gl.clearColor(1,1,1,1);
+			// For proper transparency
+			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);
@@ -45,18 +106,26 @@ canvas {
 			gl.uniform3f(uLightDir,0,0,-1);
 
 			blackHole = new BlackHole([0,0,0], 1);
-			planet1 = new Sphere([-5,0,0], 0.5);
-			planet1.color = [1,0,0];
+			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.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() {
@@ -75,12 +144,13 @@ canvas {
 		{
 			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
 
-			lookAt([10, 0, 3], [0,0,0], [0,0,1]);
+			lookAt(position, vecSum(position, lookingVec), [0,0,1]);
+			planets.forEach((p) => p.draw());
 			blackHole.draw();
-			planet1.draw();
 
 			requestAnimationFrame(drawFrame);
 		}
+
 	</script>
 </head>
 
-- 
cgit v1.3.1-23-gd82d