[WGL/HW11] Added horizontal scaling and removed startP and endP

1 files changed, 22 insertions, 16 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 328a688..70a553c 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
@@ -23,6 +23,7 @@
 		}

 

 		#text-info {

+			pointer-events: none;

 			position: fixed;

 			right: 2em;

 			top: 2em;

@@ -77,8 +78,14 @@
 		}

 

 		var changed = true;

-		var startP = 0;

-		var endP = 1;

+		var startI = 0;

+		var endI = points.length;

+		function calculateI(pers, pere) {

+			if (pers)

+				startI = Math.floor(pers * (graphEnd - graphStart)) * 2;

+			if (pere)

+				endI = Math.floor(pere * (graphEnd - graphStart)) * 2 - 1;

+		}

 

 		/*

 		 * Dragging

@@ -126,7 +133,7 @@
 

 				this.style.transform = "translateX(calc(-60% - " + (leftCurrent = newCurr) + "px))";

 				changed = true;

-				startP = slleftPos() / slleft.offsetWidth;

+				calculateI(slleftPos() / slleft.offsetWidth);

 			}

 			slright.onmousemove = function (e) {

 				if (!inside || clicked != 2) return;

@@ -138,7 +145,7 @@
 

 				this.style.transform = "translateX(calc(60% - " + (rightCurrent = newCurr) + "px))";

 				changed = true;

-				endP = slrightPos() / slright.offsetWidth;

+				calculateI(undefined, slrightPos() / slright.offsetWidth);

 			}

 		}

 

@@ -160,23 +167,22 @@
 		{

 			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];

+				var maxX = graphStart;

+				var minX = graphEnd;

+				for (var i = startI; i <= endI; i += 2) {

+					if (data[i] > maxX) maxX = data[i];

+					if (data[i] < minX) minX = data[i];

+					if (data[i+1] > maxY) maxY = data[i+1];

+					if (data[i+1] < minY) minY = data[i+1];

 				}

-				console.log(minY + " " + maxY);

+				console.log(minX + " " + maxX);

 

-				for (var i = startI; i <= endI * 2; i += 2) {

-					data[i] = (data[i] - graphStart) / ((graphEnd - graphStart) / 2) - 1; // x

+				for (var i = startI; i <= endI; i += 2) {

+					data[i] = (data[i] - minX) / ((maxX - minX) / 2) - 1; // x

 					data[i+1] = (data[i+1] - minY) / ((maxY - minY) / 2) - 1; // y

 				}

 

@@ -186,7 +192,7 @@
 				gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 2 * FLOATS, 0);

 				gl.enableVertexAttribArray(aXY);

 			}

-			gl.drawArrays(gl.LINE_STRIP, startI, endI - startI + 1);

+			gl.drawArrays(gl.LINE_STRIP, startI / 2, (endI - startI) / 2 + 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);