[WGL/P03] Solved exercises 6 and 7

2 files changed, 243 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0306.html b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0306.html
new file mode 100644
index 0000000..5d6eb49
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0306.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>

+

+<head>

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

+	<title>Пирамидите в Гиза</title>

+

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

+	

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

+		uniform mat4 uProjectionMatrix;

+		uniform mat4 uViewMatrix;

+		uniform mat4 uModelMatrix;

+		attribute vec3 aXYZ;

+		void main ()

+		{

+			gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aXYZ,1);

+			// gl_Position = vec4(aXYZ, 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 pyramid(position, width)

+		{

+			identity();

+			translate(position); scale([width / 2, width / 2, width / 2]);

+			translate([0, 0, -1]); useMatrix();

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

+

+			translate([0, 0, 2]); yRotate(180); useMatrix();

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

+

+			translate([-1, 0, 1]); yRotate(90); useMatrix();

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

+

+			translate([0, 0, 2]); yRotate(180); useMatrix();

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

+		}

+

+		function start( )

+		{

+			gl = getContext("picasso");

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

+			

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

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

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

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

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

+

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

+			gl.clear(gl.COLOR_BUFFER_BIT);

+

+			var proj = perspMatrix(30,gl.canvas.width/gl.canvas.height,1,40000);

+			gl.uniformMatrix4fv(uProjectionMatrix,false,proj);

+

+			var view = [ 0, 22,  1]; // отгоре

+			    view = [-8,  9, 15]; // отстрани

+			view = viewMatrix(view, [0,0,0], [0,1,0]);

+			gl.uniformMatrix4fv(uViewMatrix,false,view);

+

+			// околна стена на пирамида

+			var data = [

+				-1,   0, 0,

+				 1,   0, 0,

+				 0, 1.5, 1,

+			];

+			var buf = gl.createBuffer();

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

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

+

+			gl.enableVertexAttribArray(aXYZ);

+			gl.vertexAttribPointer(aXYZ,3,gl.FLOAT,false,0,0);

+

+			// черни пирамиди

+			gl.uniform3f(uColor,0,0,0);

+

+			// Долу ляво

+			pyramid([-3.84, 0, 3.54], 0.95);

+			pyramid([-4.41, 0, 4.50], 0.37);

+			pyramid([-3.94, 0, 4.50], 0.37);

+			pyramid([-3.47, 0, 4.50], 0.37);

+

+			// Център

+			pyramid([-1, 0, -0.36], 2.12);

+			pyramid([-1, 0,  1.07], 0.21);

+

+			// Горе дясно

+			pyramid([2.07, 0, -3.92], 2.3);

+			pyramid([3.99, 0, -3.54], 0.45);

+			pyramid([3.99, 0, -3.01], 0.45);

+			pyramid([3.99, 0, -2.48], 0.45);

+			pyramid([3.50, 0, -2.72], 0.23);

+		}

+	</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 0307.html b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0307.html
new file mode 100644
index 0000000..2ac8337
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0307.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>

+

+<head>

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

+	<title>Плочки по сфера</title>

+

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

+	

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

+		uniform mat4 uProjectionMatrix;

+		uniform mat4 uViewMatrix;

+		uniform mat4 uModelMatrix;

+		attribute vec3 aXYZ;

+		void main ()

+		{

+			gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aXYZ,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>

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

+		// сфера, без да се ползва мащабиране със scale()

+		function plate(radius)

+		{

+			identity();

+			xRotate(random(0, 360));

+			yRotate(random(0, 360));

+			zRotate(random(0, 360));

+			translate([0, 0, radius]);

+

+			useMatrix();

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

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

+			gl.drawArrays(gl.LINES,8,8);

+		}

+

+		function start( )

+		{

+			gl = getContext("picasso");

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

+			

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

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

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

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

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

+

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

+			gl.clear(gl.COLOR_BUFFER_BIT);

+

+			var proj = perspMatrix(30,gl.canvas.width/gl.canvas.height,1,40000);

+			gl.uniformMatrix4fv(uProjectionMatrix,false,proj);

+

+			// гледане към сферата

+			// [25, 0, 0]

+			var view = viewMatrix([20, 1, 1], [0,0,0], [0,0,1]);

+			gl.uniformMatrix4fv(uViewMatrix,false,view);

+

+			// паралелепипед 1x1x0.5

+			var data = [ 0.5,-0.5,0.125,	// предна стена

+						 0.5,0.5,0.125,

+						-0.5,0.5,0.125,

+						-0.5,-0.5,0.125,

+						 0.5,-0.5,-0.125, // задна стена

+						 0.5,0.5,-0.125,

+						-0.5,0.5,-0.125,

+						-0.5,-0.5,-0.125,

+						

+						 0.5,-0.5,0.125, // десни хоризонтални ръбове

+						 0.5,-0.5,-0.125,

+						 0.5,0.5,0.125,

+						 0.5,0.5,-0.125,

+						-0.5,0.5,0.125,	// леви хоризонтални ръбове

+						-0.5,0.5,-0.125,

+						-0.5,-0.5,0.125,

+						-0.5,-0.5,-0.125

+						];

+			var buf = gl.createBuffer();

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

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

+

+			gl.enableVertexAttribArray(aXYZ);

+			gl.vertexAttribPointer(aXYZ,3,gl.FLOAT,false,0,0);

+

+			// оранжеви плочки

+			gl.uniform3f(uColor,1,0.5,0);

+

+			// 200 случайни плочки

+			identity();

+			for( var i=0; i<200; i++ ) plate(4);

+

+			identity();

+			useMatrix();

+			data = [ 0, 0, 0, 1, 0, 0,  // red

+			         0, 0, 0, 0, 1, 0,  // green

+			         0, 0, 0, 0, 0, 1,];// blue

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

+			gl.uniform3f(uColor, 1, 0, 0);

+			gl.drawArrays(gl.LINES, 0, 2);

+			gl.uniform3f(uColor, 0, 1, 0);

+			gl.drawArrays(gl.LINES, 2, 2);

+			gl.uniform3f(uColor, 0, 0, 1);

+			gl.drawArrays(gl.LINES, 4, 2);

+		}

+	</script>	

+</head>

+

+<body onload="start()">

+	<h2>Плочки по сфера</h2>

+

+	<noscript>

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

+	</noscript>

+	

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

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

+	</canvas>

+</body>