From 9f0700d9dc08e66e6fcba3bc59c2fab4349a32cb Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Tue, 3 Jan 2023 17:17:32 +0200
Subject: [WGL/HW11] Added color support

---
 .../Homework 11 - The graph/Homework.html          | 20 ++++++++----
 .../Homework 11 - The graph/shaders.js             | 37 +++++++++++++---------
 2 files changed, 36 insertions(+), 21 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 18760da..329ad38 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	
@@ -70,11 +70,11 @@
 		 * Points
 		 */
 		
-		var points = [];
+		var points = [[random(0, 1), random(0, 1), random(0, 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)));
+			points.push(i, 2000 * Math.sin(2 * Math.PI * i / (graphEnd / 5)) + random(-20, 20));
 		}
 
 		var changed = true;
@@ -155,19 +155,30 @@
 			gl = getContext("picasso");
 			glprog = getProgram(vShader,fShader);
 			getVariables();
+			resizeglcanvas();
 
 			gl.clearColor(1,1,1,1);
 			gl.clear(gl.COLOR_BUFFER_BIT);
 
 			drawFrame();
 		}
+
+		function resizeglcanvas() {
+			gl.canvas.width = gl.canvas.offsetWidth;
+			gl.canvas.height = gl.canvas.offsetHeight;
+			gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
+			drawFrame();
+		}
+		window.onresize = resizeglcanvas;
 	
 		function drawFrame()
 		{
 			if (changed) {
 				changed = false;
 
-				var data = points.slice();
+				gl.vertexAttrib3f(aRGB, ...points[0]);
+
+				var data = points.slice(1);
 				var maxY = 0;
 				var minY = 0;
 				var maxX = graphStart;
@@ -178,7 +189,6 @@
 					if (data[i+1] > maxY) maxY = data[i+1];
 					if (data[i+1] < minY) minY = data[i+1];
 				}
-				console.log(minX + " " + maxX);
 
 				for (var i = startI; i <= endI; i += 2) {
 					data[i] = (data[i] - minX) / ((maxX - minX) / 2) - 1; // x
@@ -192,8 +202,6 @@
 				gl.enableVertexAttribArray(aXY);
 			}
 			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);
 		}
 	</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 24aab23..121d79d 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,15 +1,22 @@
-var vShader =
-	'attribute vec2 aXY;'+
-	''+
-	'void main ()'+
-	'{'+
-	'	gl_Position = vec4(aXY,0,1);'+
-	'}';
-	
-var fShader =
-	'precision mediump float;'+
-	''+
-	'void main( )'+
-	'{'+
-	'	gl_FragColor = vec4(0,0,0,1);'+
-	'}';
+var vShader = `
+	attribute vec2 aXY;
+
+	attribute vec3 aRGB;
+	varying vec3 vRGB;
+
+	void main()
+	{
+		gl_Position = vec4(aXY,0,1);
+		vRGB = aRGB;
+	}
+`;
+
+var fShader = `
+	precision mediump float;
+	varying vec3 vRGB;
+
+	void main()
+	{
+		gl_FragColor = vec4(vRGB,1);
+	}
+`;
-- 
cgit v1.3.1-23-gd82d