[WGL/P03] Added work from practicum

3 files changed, 250 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html
new file mode 100644
index 0000000..a7f7e6f
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html
@@ -0,0 +1,90 @@
+<!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;

+		void main ()

+		{

+			// аспекта поправяме с покомпонентно умножение

+			gl_Position = vec4(aXY*vec2(1.0/1.5,1),0,1);

+		}

+	</script>

+	

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

+		precision mediump float;

+		uniform vec3 uColor;

+		void main( )

+		{

+			gl_FragColor = vec4(uColor,1);

+		}

+	</script>

+

+	<script>

+		function start( )

+		{

+			gl = getContext("picasso");

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

+

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

+			uColor = gl.getUniformLocation(glprog,"uColor");

+			

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

+			gl.clear(gl.COLOR_BUFFER_BIT);

+

+			// точки по ролката

+			var n = 360;

+

+			// създаване на окръжности

+			var data = [ ];

+			for(var i=0; i<n; i++)

+				data.push(Math.cos(2.0*Math.PI*i/n),Math.sin(2.0*Math.PI*i/n));

+

+			const innerCircleR = 0.14;

+			for (var i = 0; i < n; i++)

+				data.push(Math.cos(2 * Math.PI * i / n) * innerCircleR, Math.sin(2 * Math.PI * i / n) * innerCircleR);

+

+			const holes = 6;

+			const innerR = 0.25;

+			const outerR = 0.85;

+			const spacingDegr = 22;

+			var degrStep = n / holes;

+			for (var hole = 0; hole < holes; hole++) {

+				var maxDegr = (hole + 1) * degrStep - spacingDegr;

+				for (var i = hole * degrStep; i < maxDegr; i++)

+					data.push(Math.cos(2 * Math.PI * i / n) * outerR, Math.sin(2 * Math.PI * i / n) * outerR);

+				for (var i = maxDegr; i > hole * degrStep; i--)

+					data.push(Math.cos(2 * Math.PI * i / n) * innerR, Math.sin(2 * Math.PI * i / n) * innerR);

+			}

+			

+			var buf = gl.createBuffer();

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

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

+

+			gl.uniform3f(uColor,0.3,0.7,0.2);

+			gl.enableVertexAttribArray(aXY);

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

+

+			gl.drawArrays(gl.LINE_LOOP,0,n);

+			gl.drawArrays(gl.LINE_LOOP, n, n);

+			for (var i = 0; i < holes; i++)

+				gl.drawArrays(gl.LINE_LOOP, 2 * n + i * (degrStep - spacingDegr) * 2, (degrStep - spacingDegr) * 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/03-Practice-24.10.2022/Problem 0302.html b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0302.html
new file mode 100644
index 0000000..9d60b02
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0302.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>

+

+<head>

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

+	<title>Циркулярен диск</title>

+

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

+	

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

+		// отвън се подава само ъгъла

+		attribute float aAngle;

+		#define PI 3.14159

+		#define TEETH 30.0

+		#define RADIUS 0.8

+		

+		void main ()

+		{

+			// тук трябва да се сметне точния радиус

+			float r = RADIUS - mod(aAngle, 2.0 * PI / TEETH) * 0.4;

+			float angle = aAngle;

+			if (r == RADIUS) angle -= 100.0;

+			if (angle < 0.0) angle = 0.0; // ugly

+			gl_Position = vec4(r*cos(angle)/1.5,r*sin(angle),0,1);

+		}

+	</script>

+	

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

+		precision mediump float;

+		uniform vec3 uColor;

+		void main( )

+		{

+			gl_FragColor = vec4(uColor,1);

+		}

+	</script>

+

+	<script>

+		function start( )

+		{

+			gl = getContext("picasso");

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

+

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

+			uColor = gl.getUniformLocation(glprog,"uColor");

+			

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

+			gl.clear(gl.COLOR_BUFFER_BIT);

+

+			// точки по зъбното колело

+			var n = 360;

+

+			// n ъгъла от 0 до 2*pi

+			var data = [ ];

+			for(var i=0; i<n; i++)

+				data.push(2*Math.PI*i/n);

+

+			var buf = gl.createBuffer();

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

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

+

+			gl.uniform3f(uColor,0.3,0.7,0.2);

+

+			gl.enableVertexAttribArray(aAngle);

+			gl.vertexAttribPointer(aAngle,1,gl.FLOAT,false,0,0);

+			

+			// рисуване на назъбения профил

+			// (ама назъбеността да се прави с шейдъра)

+			gl.drawArrays(gl.LINE_LOOP,0,n);

+		}

+	</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/03-Practice-24.10.2022/webgl-fmi.js b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/webgl-fmi.js
new file mode 100644
index 0000000..62bfda8
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/webgl-fmi.js
@@ -0,0 +1,78 @@
+

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

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

+

+// брой байтове в един WebGL FLOAT (трябва да са 4 байта)

+var FLOATS = Float32Array.BYTES_PER_ELEMENT;

+

+// връща 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;

+}

+

+

+// случайно дробно число в интервал

+function random(a,b)

+{

+	return a+(b-a)*Math.random();

+}
\ No newline at end of file