[WGL/HW02] Implemented randomly colored wavy stripes

2 files changed, 163 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html
new file mode 100644
index 0000000..e141f00
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>

+

+<head>

+	<meta charset="utf-8"/>

+	<title>Чергата</title>

+

+	<script src="webgl-fmi.js"></script>	

+	

+	<script id="vshader" type="x-shader/x-vertex">

+		attribute vec2 aXY;

+		attribute vec3 aRGB;

+		varying vec3 vRGB;

+		void main ()

+		{

+			gl_Position = vec4(aXY,0,1);

+			gl_PointSize = 4.0;

+			vRGB = aRGB;

+		}

+	</script>

+	

+	<script id="fshader" type="x-shader/x-fragment">

+		precision mediump float;

+		varying vec3 vRGB;

+		void main( )

+		{

+			gl_FragColor = vec4(vRGB,1);

+		}

+	</script>

+

+	<script>

+		function start( )

+		{

+			gl = getContext("picasso");

+			glprog = getProgram("vshader","fshader");

+

+			aXY = gl.getAttribLocation(glprog,"aXY");

+			aRGB = gl.getAttribLocation(glprog,"aRGB");

+			

+			gl.clearColor(1,1,1,1);

+			gl.clear(gl.COLOR_BUFFER_BIT);

+

+			// брой ленти m

+			var m = 11;

+			var data = [];

+

+			// от тук до края на функцията да се сложи код,

+			// който създава и рисува m цветни вълнообразни ленти

+			const aspectRatio = 600 / 400;

+			const resolution = 50;

+			const lineAreaWidths = 2 / 11;

+			const maxAmplitude = lineAreaWidths / 2.1;

+

+			const step = 2 / resolution;

+			var prevFrequency = 0;

+			for (var x = -1; x < 1; x += lineAreaWidths) {

+				var frequency = Math.random() * 2.4 + 0.8; // [0.8, 3.2]

+				var colR = Math.random() + 0.2;

+				var colG = Math.random() + 0.2;

+				var colB = Math.random() + 0.2;

+				for (var y = 1; y > -1.0001; y -= step) {

+					data.push((x + maxAmplitude * Math.sin(Math.PI * (y + 1) * prevFrequency)), y, colR, colG, colB);

+					data.push((x + lineAreaWidths + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency)), y, colR, colG, colB);

+				}

+				prevFrequency = frequency;

+			}

+

+			var 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, 5 * 4, 0);

+			gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * 4, 2 * 4);

+			gl.enableVertexAttribArray(aXY);

+			gl.enableVertexAttribArray(aRGB);

+

+			var acc = 0;

+			for (var i = 0; i < m; i++) {

+				gl.drawArrays(gl.TRIANGLE_STRIP, acc, 2 * resolution + 2);

+				acc += 2 * resolution + 2;

+			}

+		}

+	</script>	

+</head>

+

+<body onload="start()">

+	<h2>Чергата</h2>

+

+	<noscript>

+		Искаме JavaScript, но няма!

+	</noscript>

+	

+	<canvas id="picasso" width="600" height="400" style="border: solid;">

+		Искаме canvas, но няма!

+	</canvas>

+</body>

diff --git a/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/webgl-fmi.js b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/webgl-fmi.js
new file mode 100644
index 0000000..00c2992
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/webgl-fmi.js
@@ -0,0 +1,69 @@
+

+var gl;		// глобален WebGL контекст

+var glprog;	// глобална GLSL програма

+

+

+// връща WebGL контекст, свързан с HTML елемент с даден id

+function getContext(id)

+{

+	var canvas = document.getElementById(id);

+	if (!canvas)

+	{

+		alert("Искаме canvas с id=\""+id+"\", а няма!");

+		return null;

+	}

+	

+	var context = canvas.getContext("webgl");

+	if (!context)

+	{

+		context = canvas.getContext("experimental-webgl");

+	}

+	

+	if (!context)

+	{

+		alert("Искаме WebGL контекст, а няма!");

+	}

+	

+	return context;

+}

+

+// връща компилиран шейдър

+function getShader(id,type)

+{

+	var source = document.getElementById(id).text;

+	var shader = gl.createShader(type);

+

+	gl.shaderSource(shader,source);

+	gl.compileShader(shader);

+	if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS))

+	{

+		alert(gl.getShaderInfoLog(shader));

+		return null;

+	}

+	

+	return shader;

+}

+

+

+// връща готова програма

+function getProgram(idv,idf)

+{

+	var vShader = getShader(idv,gl.VERTEX_SHADER);

+	var fShader = getShader(idf,gl.FRAGMENT_SHADER);

+			

+	if (!vShader || !fShader) {return null;}

+	

+	var shaderProgram = gl.createProgram();

+	gl.attachShader(shaderProgram,vShader);

+	gl.attachShader(shaderProgram,fShader);

+	gl.linkProgram(shaderProgram);

+

+	if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))

+	{

+		alert(gl.getProgramInfoLog(shaderProgram));

+		return null;

+	}

+

+	gl.useProgram(shaderProgram);

+	return shaderProgram;

+}
\ No newline at end of file