[WGL/HW11] Added color support

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

+	}

+`;