From 4fe99a027dea39a7dd175fbc0cd7f95eef8f00c3 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Mon, 28 Aug 2023 11:41:41 +0300
Subject: [WGL/P] Implemented an fps counter

---
 .../Project/Project.html                           | 12 +++
 .../Computer Graphics with WebGL/Project/menu.js   | 87 ++++++++++++----------
 2 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 7b62624..809a0ed 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html	
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html	
@@ -133,6 +133,8 @@ h2 {
 	
 		var pauseAnimations = false;
 		var t = 0;
+		var lastTime = 0;
+		var frames = 0;
 		function drawFrame()
 		{
 			if (startT == -1) { startT = Date.now(); t = 0; }
@@ -140,6 +142,13 @@ h2 {
 			if (pauseAnimations) startT += (candidat - t)*100;
 			else                 t = candidat;
 
+			var now = Math.floor(Date.now() / 1000);
+			if (now - lastTime >= 1) {
+				fpsElem.innerText = Math.floor(frames / (now - lastTime));
+				frames = 0;
+				lastTime = now;
+			}
+
 			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
 
 			updateCamera();
@@ -149,6 +158,7 @@ h2 {
 			if (!pauseAnimations || t == 0) animations.forEach((a) => a(t));
 			stars.forEach((s) => s.draw());
 
+			frames++;
 			requestAnimationFrame(drawFrame);
 		}
 	</script>
@@ -177,11 +187,13 @@ h2 {
 			<p>
 				Debugging colors: <input type="checkbox" id="debug-mode"><br>
 				Toggle coordinates: <input type="checkbox" id="coordinates-cb"><br>
+				Toggle fps: <input type="checkbox" id="fps-cb"><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>
 	<div id="coordinates"></div>
+	<div id="fps"></div>
 	<script src="menu.js"></script>
 </body>
diff --git a/Year 2/Computer Graphics with WebGL/Project/menu.js b/Year 2/Computer Graphics with WebGL/Project/menu.js
index 0b56d2b..db3ee42 100644
--- a/Year 2/Computer Graphics with WebGL/Project/menu.js	
+++ b/Year 2/Computer Graphics with WebGL/Project/menu.js	
@@ -3,45 +3,7 @@ function initMenu() {
 	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(onlyHorizontalCB);
-onlyHorizontalCB.addEventListener('change', horChange);
-
-const onlyVerticalCB = document.getElementById('only-vertical');
-function verChange() {
-	onlyVertical = this.checked;
-}
-verChange.call(onlyVerticalCB);
-onlyVerticalCB.addEventListener('change', verChange);
-
-coordsElem = document.getElementById('coordinates');
-const coordsCB = document.getElementById('coordinates-cb');
-function coordscbChange() {
-	if (this.checked)
-		coordsElem.classList.remove('hide');
-	else
-		coordsElem.classList.add('hide');
-}
-coordscbChange.call(coordsCB);
-coordsCB.addEventListener('change', coordscbChange);
-
-/* Levels */
+/* Level items */
 
 const levelSelect = document.getElementById('level-select');
 const levelDesc = document.getElementById('level-description');
@@ -68,3 +30,50 @@ function pauseMovement() {
 }
 pauseMovement.call(animPause);
 animPause.addEventListener('change', pauseMovement);
+
+/* Settings items */
+
+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);
+
+coordsElem = document.getElementById('coordinates');
+const coordsCB = document.getElementById('coordinates-cb');
+function coordscbChange() {
+	if (this.checked) coordsElem.classList.remove('hide');
+	else              coordsElem.classList.add('hide');
+}
+coordscbChange.call(coordsCB);
+coordsCB.addEventListener('change', coordscbChange);
+
+fpsElem = document.getElementById('fps');
+const fpsCB = document.getElementById('fps-cb');
+function fpsCBChange() {
+	if (this.checked) fpsElem.classList.remove('hide');
+	else              fpsElem.classList.add('hide');
+}
+fpsCBChange.call(fpsCB);
+fpsCB.addEventListener('change', fpsCBChange);
+
+const onlyHorizontalCB = document.getElementById('only-horizontal');
+function horChange() {
+	onlyHorizontal = this.checked;
+}
+horChange.call(onlyHorizontalCB);
+onlyHorizontalCB.addEventListener('change', horChange);
+
+const onlyVerticalCB = document.getElementById('only-vertical');
+function verChange() {
+	onlyVertical = this.checked;
+}
+verChange.call(onlyVerticalCB);
+onlyVerticalCB.addEventListener('change', verChange);
-- 
cgit v1.3.1-23-gd82d