Merge branch 'main' into prod

docker-compose.yml

@@ -2,7 +2,7 @@ services:
   cg1:
     image: nginx:alpine
     volumes:
-      - ./src:/usr/share/nginx/html:ro
+      - ./public:/usr/share/nginx/html:ro
     networks:
       - public
     restart: unless-stopped

public/index.html

@@ -55,18 +55,18 @@
 			padding: var(--padding);
 			display: block;
 			border: solid 2px #11111b;
-			background-color: #31324480;
 			border-radius: 20px;
 		}
 
 		#stats {
+			background-color: #31324480;
 			right: var(--padding);
 			position: absolute;
 			top: var(--padding);
 		}
 
 		#controls {
-
+			background-color: #313244;
 		}
 
 		#interpolate {
@@ -75,14 +75,14 @@
 
 		#matrices {
 			display: grid;
-			grid-template-columns: repeat(6, 1fr);
+			grid-template-columns: 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px;
 			grid-gap: var(--padding);
 			padding-left: var(--padding);
 			padding-right: var(--padding);
 		}
 
-		#matrices > div {
+		.matrix {
-			background-color: rgba(255, 255, 255, 0.1);
+			background-color: #45475a;
 			border-radius: 20px;
 			display: flex;
 			justify-content: center;
@@ -92,7 +92,7 @@
 			overflow: hidden;
 		}
 
-		#matrices > div::before {
+		.matrix::before {
 			content: '';
 			position: absolute;
 			border-radius: 20px;
@@ -100,7 +100,26 @@
 			height: 100%;
 			right: 0;
 			top: 0;
-			background-color: rgba(255, 255, 255, 0.1);
+			background-color: #585b70;
+			transition: width linear 0.05s;
+		}
+		#matrices > span {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.matrix svg {
+			max-width: 100%;
+			height: auto;
+		}
+
+		.projection {
+			color: #f38ba8;
+		}
+
+		.lookAt {
+			color: #a6e3a1;
 		}
 	</style>
 </head>
@@ -121,9 +140,9 @@
 	</div>
 	<div id="controls">
 		<div id="matrices">
-			<div>
+			<span></span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & 0 \\
 				0 & 1 & 0 & 0 \\
@@ -132,9 +151,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				\frac{2}{r-l} & 0 & 0 & 0 \\
 				0 & \frac{2}{t-b} & 0 & 0 \\
@@ -143,9 +162,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & - \frac{r+l}{2} \\
 				0 & 1 & 0 & - \frac{t+b}{2} \\
@@ -154,9 +173,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & 0 \\
 				0 & 1 & 0 & 0 \\
@@ -165,9 +184,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix lookAt">
 				$$
-				\color{green}
 				\begin{pmatrix}
 				u_x & u_y & u_z & 0 \\
 				v_x & v_y & v_z & 0 \\
@@ -176,9 +195,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix lookAt">
 				$$
-				\color{green}
 				\begin{pmatrix}
 				1 & 0 & 0 & -e_x \\
 				0 & 1 & 0 & -e_y \\
@@ -187,6 +206,7 @@
 				\end{pmatrix}
 				$$
 			</div>
+			<span></span>
 		</div>
 		<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
 		<datalist id="steplist">

public/script.js

@@ -1,5 +1,34 @@
 "use strict";
 
+class Animation {
+	constructor() {
+		this.time = 0.0;
+	}
+
+	interpolation(i) {
+		if (i > this.time) {
+			return 0.0;
+		}
+		if (i+1 > this.time) {
+			return this.time - Math.floor(this.time);
+		}
+		return 1.0;
+	}
+
+	isZAxisInverted() {
+		return (this.time <= 5.0);
+	}
+
+	isCameraDrawn() {
+		return (this.time <= 2.0);
+	}
+
+	isOriginCubeDrawn() {
+		return (this.time != 0.0 && this.time < 5.0);
+	}
+
+}
+
 let cv, gl;
 
 let program;
@@ -25,14 +54,11 @@ let cameraVertexBuffer;
 
 let lastFrame = Date.now();
 
-let t = 0.0;
+let animation = new Animation();
-let interpolate = [0, 0, 0, 0, 0, 0];
 
 let displayMatricesVirtually = true;
 let virtualRealInterpolation = 1;
 
-let invertZAxis = true;
-
 let cameraPitch = 0.565;
 let cameraYaw = 0.375;
 let cameraDistance = 4;
@@ -65,29 +91,9 @@ async function init() {
 
 	// input handling
 	document.getElementById("interpolate").addEventListener("input", (e) => {
-		t = 6.0 - e.target.value;
+		animation.time = 6.0 - e.target.value;
-		if (t <= 2.0) {
-			invertZAxis = false;
-		}
-		else if (t <= 5.0) {
-			invertZAxis = false;
-		}
-		else {
-			invertZAxis = true;
-		}
 		for (let i = 0; i < 6; ++i) {
-			let v;
+			document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
-			if (i > t) {
-				v = 0.0;
-			}
-			else if (i+1 > t) {
-				v = t - Math.floor(t);
-			}
-			else {
-				v = 1.0;
-			}
-			interpolate[i] = v;
-			document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%");
 		}
 	});
 	document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
@@ -455,16 +461,11 @@ function updateStats(deltaTime) {
 	frameCount = 0;
 }
 
-let hue = 0;
-
 async function draw() {
 	let now = Date.now();
 	let deltaTime = (now - lastFrame) / 1000;
 	let frameStart = performance.now();
 
-	hue += deltaTime / 5;
-	if (hue > 1) hue = 0;
-
 	if (displayMatricesVirtually) {
 		virtualRealInterpolation = Math.min(virtualRealInterpolation + deltaTime * 2, 1);
 	} else {
@@ -512,7 +513,7 @@ async function draw() {
 	let virtualProjectionMatrix = [];
 	mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
 
-	if (!invertZAxis) {
+	if (animation.isZAxisInverted()) {
 		let zAxisFlipMatrix = [];
 		mat4Identity(zAxisFlipMatrix);
 		zAxisFlipMatrix[10] = -1;
@@ -535,11 +536,11 @@ async function draw() {
 	// interpolated view matrix
 	let virtualViewMatrix1 = [];
 	mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
-	mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]);
+	mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, animation.interpolation(0));
 
 	let virtualViewMatrix2 = [];
 	mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
-	mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]);
+	mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, animation.interpolation(1));
 
 	mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1);
 
@@ -548,23 +549,23 @@ async function draw() {
 
 	let virtualProjectionMatrix1 = [];
 	mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
-	mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]);
+	mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, animation.interpolation(2));
 	mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix1, virtualProjectionMatrix);
 
 	let virtualProjectionMatrix2 = [];
 	mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
-	mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, interpolate[3]);
+	mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, animation.interpolation(3));
 	mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix2, virtualProjectionMatrix);	
 
 	let virtualProjectionMatrix3 = [];
 	mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
-	mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, interpolate[4]);
+	mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, animation.interpolation(4));
 	mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix3, virtualProjectionMatrix);
 
 	if (!displayMatricesVirtually) {
 		let virtualProjectionMatrix4 = [];
 		mat4BuildPerspective4(virtualProjectionMatrix4, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
-		mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, interpolate[5]);
+		mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, animation.interpolation(5));
 		mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix);
 
 	}
@@ -623,19 +624,20 @@ async function draw() {
 	gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6);
 
 	// draw virtual camera
-	let virtualCameraModelView = [];
+	if (displayMatricesVirtually && animation.isCameraDrawn()) {
-	mat4Identity(virtualCameraModelView);
+		let virtualCameraModelView = [];
-	mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]);
+		mat4Identity(virtualCameraModelView);
-	mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]);
+		mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]);
+		mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]);
 
-	mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView);
+		mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView);
-	mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView);
+		mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView);
 		
-	gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView));
+		gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView));
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
+		setAttribPointers();
 	
-	gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
-	setAttribPointers();
-	if (displayMatricesVirtually && t <= 2.0) {
 		gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
 	}
 
@@ -656,7 +658,7 @@ async function draw() {
 	// draw origin
 	let originMatrix = [];
 	mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
-	mat4Interpolate(originMatrix, identity, originMatrix, interpolate[5]);
+	mat4Interpolate(originMatrix, identity, originMatrix, animation.interpolation(5));
 
 	gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix));
 	gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity));
@@ -667,7 +669,7 @@ async function draw() {
 
 	// draw origin cube
 
-	if (t != 0.0 && t < 5.0) {
+	if (animation.isOriginCubeDrawn()) {
 		gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
 		setAttribPointers();
 		gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);
@@ -703,30 +705,5 @@ function hexToRgb(hex) {
 	return [r, g, b];
 }
 
-function hslToRgb(h, s, l) {
-	let r, g, b;
-
-	if (s == 0) {
-		r = g = b = l;
-	} else {
-		let hue2rgb = function hue2rgb(p, q, t) {
-			if (t < 0) t += 1;
-			if (t > 1) t -= 1;
-			if (t < 1 / 6) return p + (q - p) * 6 * t;
-			if (t < 1 / 2) return q;
-			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-			return p;
-		}
-
-		let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-		let p = 2 * l - q;
-
-		r = hue2rgb(p, q, h + 1 / 3);
-		g = hue2rgb(p, q, h);
-		b = hue2rgb(p, q, h - 1 / 3);
-	}
-
-	return [r, g, b];
-}
 
 window.addEventListener("DOMContentLoaded", init);