[WGL/H03] Improved shape generation and tidied up code

1 files changed, 43 insertions, 20 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html
index 9fe1d56..2d528c3 100644
--- a/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html
+++ b/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html
@@ -14,6 +14,7 @@
 		void main ()

 		{

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

+			gl_PointSize = 10.0; // DEBUGGING

 		}

 	</script>

 	

@@ -78,8 +79,15 @@
 

 			// Вместо единичен куб, да се нарисува стена под формата на сърце

 			// от 20 реда застъпващи се тухли, използвайки трансформиран куб

-			var brickScale = [1, 0.5, 1.5];

 

+			var brickLength = 1.5;

+			var brickHeight = 0.5;

+			var rows = 1;

+			var radius = 6;

+			var gap = 0.4;

+			var bottomHeight = 19;

+

+			var brickScale = [1, brickHeight, brickLength];

 			function drawBrick() {

 				useMatrix();

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

@@ -87,37 +95,52 @@
 				gl.drawArrays(gl.LINES,8,8);

 			}

 

-			const ROWS = 1;

-			const BRICKS = 20;

-

-			const RADIUS = 6;

-			const FREQ = 0.6;

-			const GAP = 1.4;

-			const WIDTH = 3;

-			var degreeStep = Math.PI / (Math.PI * RADIUS / (1.5 + GAP));

-			var bottomLen = 1.2 * RADIUS * 3 - GAP - 1.5 / 2;

+			var degreeStep = (brickLength + gap) / radius;

 			function drawHalfCircle(xOffset) {

 				for (var i = 0; i < Math.PI + 0.1; i += degreeStep) {

 					identity();

-					translate([Math.cos(i) * RADIUS + xOffset, 0, Math.sin(i) * RADIUS]);

+					translate([Math.cos(i) * radius + xOffset, 0, Math.sin(i) * radius]);

 					yRotate((Math.PI - i) * 180 / Math.PI);

 					scale(brickScale); drawBrick();

 				}

 			}

-			function drawBodyLine(xOffset, degreeOffset, rotationCoefficient) {

-				for (var z = 1; z < bottomLen; z += 1.5 + GAP) {

+

+			const SLOPE_EPSILON = 0.01;

+			function drawBodyLine(xOffset, direction, rotationCoefficient) {

+				function calcX(z) {

+					return Math.sin(Math.PI / 2 * direction + Math.PI * z / bottomHeight) * radius - xOffset;

+				}

+

+				var zStep = 0;

+				for (var z = -brickLength - gap; z >= -bottomHeight - 0.1; z -= zStep) {

+					var xDistance = calcX(z);

+

 					identity();

-					translate([Math.sin(Math.PI * degreeOffset + Math.PI * z / bottomLen) * RADIUS - xOffset, 0, z - bottomLen - GAP - 1.5 / 2]);

-					yRotate(Math.sin(Math.PI * z / bottomLen) * rotationCoefficient);

+					translate([xDistance, 0, z]); yRotate(Math.sin(Math.PI * z / bottomHeight) * rotationCoefficient);

 					scale(brickScale); drawBrick();

+

+					var m = Math.abs(SLOPE_EPSILON / (xDistance - calcX(z + SLOPE_EPSILON)));

+					zStep = (brickLength + gap) * m / Math.sqrt(m * m + 1);

 				}

 			}

-			for (var row = 0; row < ROWS; row++) {

-				drawHalfCircle(RADIUS);

-				drawHalfCircle(-RADIUS);

-				drawBodyLine(RADIUS, 0.5, -40);

-				drawBodyLine(-RADIUS, 1.5, 40);

+

+			for (var row = 0; row < rows; row++) {

+				drawHalfCircle(radius);         // Горна лява четвърт

+				drawHalfCircle(-radius);        // Горна дясна четвърт

+				drawBodyLine( radius, -1,  45); // Долна дясна четвърт

+				drawBodyLine(-radius,  1, -45); // Долна лява четвърт

 			}

+

+			// Debugging

+			/*

+			data = [ 0, 0, 0,  -6, 0, 0,    6, 0, 0, -12, 0, 0, 12, 0, 0,   0, 0, - gap - 1.5,  0, 0, -bottomHeight, 12, 0, 1.5 + gap,

+				-7.7, 0, -7.9, -7.7, 0, -5.9,   -9.4, 0, -5.9 ]; 

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

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

+			identity();

+			useMatrix();

+			gl.drawArrays(gl.POINTS, 0, data.length / 3);

+			*/

 		}

 	</script>	

 </head>