Merge branch 'main' of https://github.com/openalgorithmdevelopers/WebGL into main

bhupendra · bhupendra · commit 2d176f16fada · 2022-03-08T12:08:20.000+05:30
diff --git a/Computer Graphics/Matrix_multiplication.html b/Computer Graphics/Matrix_multiplication.html
@@ -15,16 +15,34 @@
 	</head>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 	<body onload="main()">
-		<canvas id="canvas" ondblclick="mouseHandler()" width="600" height="600">
-			Your browser does not support HTML5
-		</canvas>
-		<input type="number" min="-1" max="1" id="x1" placeholder="x1">
-		<input type="number" min="-1" max="1" id="y1" placeholder="y1">
-		<input type="number" min="-1" max="1" id="x2" placeholder="x2">
-		<input type="number" min="-1" max="1" id="y2" placeholder="y2">
-		<button type="button" onclick="reflect()" class="btn btn-primary">Reflect</button>
+		<div id="main">
+			<div  class="col-sm-3 col-lg-4 sidenav" id="left_panel">
+				<p class="h1 text-primary">Left Panel.</p>
+				<div id="rotation_panel">
+					<p class="h3 text-info">Provide the arbitrary point.</p>
+					<input type="number" min="-1" max="1" id="x1" placeholder="x1">
+					<input type="number" min="-1" max="1" id="y1" placeholder="y1">
+					<br>
+					<button type="button" onclick="arbitraryRotate()" class="btn btn-primary">Rotate</button>
+				</div>
+				<div id="reflection_panel">
+					<p class="h3 text-info">Provide the arbitrary line.</p>
+					<input type="number" min="-1" max="1" id="x1" placeholder="x1">
+					<input type="number" min="-1" max="1" id="y1" placeholder="y1">
+					<br>
+					<input type="number" min="-1" max="1" id="x2" placeholder="x2">
+					<input type="number" min="-1" max="1" id="y2" placeholder="y2">
+					<br>
+					<button type="button" onclick="reflect()" class="btn btn-primary">Reflect</button>
+				</div>
+			</div>
+			<div id="canvas_content" class="col-lg-8">				
+				<canvas id="canvas" ondblclick="mouseHandler()" width="600" height="600">
+					Your browser does not support HTML5
+				</canvas>
+			</div>
 
-		<br/>
+		</div>
 		<script>
 			var mouseX, mouseY;		
 			var gl, shaderProgram;
@@ -138,6 +156,11 @@
 					requestAnimationFrame(animate);
 				}
 			}
+			function arbitraryRotate(){
+				m = document.getElementById("x1").value;
+				n = document.getElementById("y1").value;
+				alert("raech");
+			}
 			function reflect(){
 				var x1 = document.getElementById("x1").value;
 				var y1 = document.getElementById("y1").value;
