[WGL/HW11] Implemented multiple function support

1 files changed, 58 insertions, 30 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 329ad38..5abcbee 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
@@ -66,20 +66,57 @@
 	</style>

 

 	<script>

+		function dsin(d) {

+			return Math.sin(2 * Math.PI * d);

+		}

+		function dcos(d) {

+			return Math.cos(2 * Math.PI * d);

+		}

+

 		/*

 		 * Points

 		 */

-		

-		var points = [[random(0, 1), random(0, 1), random(0, 1)]];

+

+		GraphFunction = function (funct) {

+			this.color = [random(0, 1), random(0, 1), random(0, 1)];

+			this.points = [];

+			for (var i = graphStart; i < graphEnd; i++) {

+				this.points.push(i, funct(i));

+			}

+			this.buf = undefined;

+		}

+

+		GraphFunction.prototype.updateBuf = function(minX, maxX, minY, maxY) {

+			var data = this.points.slice();

+			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

+			}

+			var bufTemp = gl.createBuffer();

+			gl.bindBuffer(gl.ARRAY_BUFFER, bufTemp);

+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

+			this.buf = bufTemp;

+		}

+

+		GraphFunction.prototype.draw = function() {

+			gl.vertexAttrib3fv(aRGB, this.color);

+			gl.bindBuffer(gl.ARRAY_BUFFER, this.buf);

+			gl.enableVertexAttribArray(aXY);

+			gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 2 * FLOATS, 0);

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

+		}

+

 		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)) + random(-20, 20));

-		}

+		var functions = [new GraphFunction((i) => 2000 * dsin(i / 50000) + random(-20, 20)),

+		                 new GraphFunction((i) => 2300 * dsin(i / 20000) + random(-30, 0)),

+		                 new GraphFunction((i) => 1800 * dsin(i / 80000 * dsin(i / 20000)) + random(-100, 100)),

+		                 new GraphFunction((i) => 1000 * dsin(i / 20000 * dcos(i / 70000 * dsin(i / 103337)) - random(-0.03, 0.03)) + random(-10, 100)),

+		                 new GraphFunction((i) => 300 * dsin(i / 200 + random(-0.01, 0.01)) + 190 * dsin(i / 100) + 800 * dcos(i / 700) + random(-45, 45))];

 

 		var changed = true;

 		var startI = 0;

-		var endI = points.length;

+		var endI = (graphEnd - graphStart) * 2 - 1;

 		function calculateI(pers, pere) {

 			if (pers)

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

@@ -130,7 +167,7 @@
 				if (!inside || clicked != 1) return;

 				var newCurr = current + initialPosition - e.clientX;

 				if ((newCurr > leftCurrent) && (slleftPos() < 10)) return;

-				if ((newCurr < leftCurrent) && (slleftPos() >= slrightPos() - 50)) return;

+				if ((newCurr < leftCurrent) && (slleftPos() >= slrightPos() - 10)) return;

 

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

 				changed = true;

@@ -140,7 +177,7 @@
 				if (!inside || clicked != 2) return;

 				var newCurr = current + initialPosition - e.clientX;

 				if ((newCurr < rightCurrent) && (slrightPos() > slright.offsetWidth - 10)) return;

-				if ((newCurr > rightCurrent) && (slleftPos() >= slrightPos() - 50)) return;

+				if ((newCurr > rightCurrent) && (slleftPos() >= slrightPos() - 10)) return;

 

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

 				changed = true;

@@ -175,33 +212,24 @@
 		{

 			if (changed) {

 				changed = false;

-

-				gl.vertexAttrib3f(aRGB, ...points[0]);

-

-				var data = points.slice(1);

 				var maxY = 0;

 				var minY = 0;

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

-				}

-

-				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

-				}

-

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

+				functions.forEach((gf) => {

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

+						if (gf.points[i] > maxX) maxX = gf.points[i];

+						if (gf.points[i] < minX) minX = gf.points[i];

+						if (gf.points[i+1] > maxY) maxY = gf.points[i+1];

+						if (gf.points[i+1] < minY) minY = gf.points[i+1];

+					}

+				});

+				functions.forEach((gf) => {

+					gf.updateBuf(minX, maxX, minY, maxY);

+				});

 			}

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

+			functions.forEach((gf) => gf.draw());

+

 			requestAnimationFrame(drawFrame);

 		}

 	</script>