From 3784bda80ccfd05ba26eca6e377a39e1aeda5f95 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Tue, 3 Jan 2023 16:15:25 +0200
Subject: [WGL/HW11] Added basic function drawing and part selection

---
 .../Homework 11 - The graph/Homework.html          | 70 ++++++++++++++++++++--
 .../Homework 11 - The graph/shaders.js             |  6 +-
 2 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/Homework.html
index 240cea0..328a688 100644
--- a/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/Homework.html	
+++ b/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/Homework.html	
@@ -65,12 +65,27 @@
 	</style>
 
 	<script>
+		/*
+		 * Points
+		 */
+		
+		var points = [];
+		var graphStart = 5000;
+		var graphEnd = 50000;
+		for (var i = graphStart; i < graphEnd; i++) {
+			points.push(i, 2000 * Math.sin(2 * Math.PI * i / (graphEnd / 5)));
+		}
+
+		var changed = true;
+		var startP = 0;
+		var endP = 1;
+
 		/*
 		 * Dragging
 		 */
 		function registerDragging() {
-			const slleft = document.getElementById("sl-left");
-			const slright = document.getElementById("sl-right");
+			slleft = document.getElementById("sl-left");
+			slright = document.getElementById("sl-right");
 
 			var inside = false;
 			slleft.onmouseenter = slright.onmouseenter = function () {
@@ -94,6 +109,13 @@
 				clicked = 0;
 			}
 
+			function slleftPos() {
+				return slleft.offsetWidth * 0.4 - leftCurrent;
+			}
+			function slrightPos() {
+				return slright.offsetWidth * 0.6 - rightCurrent;
+			}
+
 			slleft.onmousemove = function (e) {
 				if (!inside || clicked != 1) return;
 				var newCurr = current + initialPosition - e.clientX;
@@ -103,6 +125,8 @@
 					(slleft.offsetWidth * 0.4 - leftCurrent >= slright.offsetWidth * 0.6 - rightCurrent - 50)) return;
 
 				this.style.transform = "translateX(calc(-60% - " + (leftCurrent = newCurr) + "px))";
+				changed = true;
+				startP = slleftPos() / slleft.offsetWidth;
 			}
 			slright.onmousemove = function (e) {
 				if (!inside || clicked != 2) return;
@@ -113,8 +137,9 @@
 					(slleft.offsetWidth * 0.4 - leftCurrent >= slright.offsetWidth * 0.6 - rightCurrent - 50)) return;
 
 				this.style.transform = "translateX(calc(60% - " + (rightCurrent = newCurr) + "px))";
+				changed = true;
+				endP = slrightPos() / slright.offsetWidth;
 			}
-
 		}
 
 		function start( )
@@ -124,13 +149,46 @@
 			gl = getContext("picasso");
 			glprog = getProgram(vShader,fShader);
 			getVariables();
+
+			gl.clearColor(1,1,1,1);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+
 			drawFrame();
 		}
-		
+	
 		function drawFrame()
 		{
-			gl.clearColor(0.5+sin(now()),0.5+sin(now()+2*PI/3),0.5+sin(now()+4*PI/3),1);
-			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
+			if (changed) {
+				changed = false;
+				startI = Math.floor(startP * (graphEnd - graphStart));
+				if (startI % 2 === 1) startI++;
+				endI = endP * (graphEnd - graphStart) - 1;
+
+				var data = points.slice();
+				var maxY = 0;
+				var minY = 0;
+				for (var i = startI + 1; i <= endI * 2; i += 2) {
+					if (data[i] > maxY)
+						maxY = data[i];
+					if (data[i] < minY)
+						minY = data[i];
+				}
+				console.log(minY + " " + maxY);
+
+				for (var i = startI; i <= endI * 2; i += 2) {
+					data[i] = (data[i] - graphStart) / ((graphEnd - graphStart) / 2) - 1; // x
+					data[i+1] = (data[i+1] - minY) / ((maxY - minY) / 2) - 1; // y
+				}
+
+				buf = gl.createBuffer();
+				gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+				gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 2 * FLOATS, 0);
+				gl.enableVertexAttribArray(aXY);
+			}
+			gl.drawArrays(gl.LINE_STRIP, startI, endI - startI + 1);
+			//gl.clearColor(0.5+sin(now()),0.5+sin(now()+2*PI/3),0.5+sin(now()+4*PI/3),1);
+			//gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
 			requestAnimationFrame(drawFrame);
 		}
 	</script>	
diff --git a/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/shaders.js b/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/shaders.js
index 141ae9d..24aab23 100644
--- a/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/shaders.js	
+++ b/Year 2/Computer Graphics with WebGL/Homework 11 - The graph/shaders.js	
@@ -1,9 +1,9 @@
 var vShader =
-	'attribute vec3 aXYZ;'+
+	'attribute vec2 aXY;'+
 	''+
 	'void main ()'+
 	'{'+
-	'	gl_Position = vec4(aXYZ,1);'+
+	'	gl_Position = vec4(aXY,0,1);'+
 	'}';
 	
 var fShader =
@@ -11,5 +11,5 @@ var fShader =
 	''+
 	'void main( )'+
 	'{'+
-	'	gl_FragColor = vec4(1.0);'+
+	'	gl_FragColor = vec4(0,0,0,1);'+
 	'}';
-- 
cgit v1.3.1-26-gb76a