[WGL/HW11] Added basic function drawing and part selection

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
@@ -66,11 +66,26 @@
 

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

 	'}';