Skip to content

Commit 4552820

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
Arbitrary rotation done but some technical bug with arbitrary reflection.
1 parent 524e066 commit 4552820

File tree

1 file changed

+92
-26
lines changed

1 file changed

+92
-26
lines changed

‎Computer Graphics/Matrix_multiplication.html

Lines changed: 92 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
1+
<!--
2+
-----------------------------------------------------------------------------------------------------------------------------------------------------
3+
Version | Date | Author | Description
4+
-----------------------------------------------------------------------------------------------------------------------------------------------------
5+
001 | 6 March 2022 | Bhupendra Singh, UPES Dehradun | Dobule Click to rotate about arbitrary(clicked point) point.
6+
| | | Single click and slide to reflect about the line. (not working yet.)
7+
-----------------------------------------------------------------------------------------------------------------------------------------------------
8+
-->
9+
<!DOCTYPE html>
110
<html>
211
<head>
3-
<title>WebGL - Two Triangle Transform Program</title>
12+
<title>WebGL - Matrix Multiplication</title>
13+
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.js"></script>
14+
415
</head>
16+
<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">
517
<body onload="main()">
618
<canvas id="canvas" ondblclick="mouseHandler()" width="600" height="600">
719
Your browser does not support HTML5
820
</canvas>
21+
<input type="number" min="-1" max="1" id="x1" placeholder="x1">
22+
<input type="number" min="-1" max="1" id="y1" placeholder="y1">
23+
<input type="number" min="-1" max="1" id="x2" placeholder="x2">
24+
<input type="number" min="-1" max="1" id="y2" placeholder="y2">
25+
<button type="button" onclick="reflect()" class="btn btn-primary">Reflect</button>
26+
927
<br/>
1028
<script>
1129
var mouseX, mouseY;
1230
var gl, shaderProgram;
13-
function main(){
31+
1432
gl = initializeWebGL(gl);
1533

1634
//Step 1 (Set background color): First specify the color with the help of Quadlet(R,G,B,Alpha) and the clear the buffer related to background.
@@ -63,6 +81,9 @@
6381
var GPU_T1 = gl.getUniformLocation(shaderProgram, 'GPU_T1');
6482
var GPU_T2 = gl.getUniformLocation(shaderProgram, 'GPU_T2');
6583
var GPU_T3 = gl.getUniformLocation(shaderProgram, 'GPU_T3');
84+
85+
var GPU_T4 = gl.getUniformLocation(shaderProgram, 'GPU_T4');
86+
var GPU_T5 = gl.getUniformLocation(shaderProgram, 'GPU_T5');
6687

6788
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
6889
gl.enableVertexAttribArray(positionAttribLocation);
@@ -79,50 +100,93 @@
79100

80101

81102
//Step 18 (Draw the geometry): Issue the draw command to generate the geometry as defined by the indices and the type of primitive to create.
82-
var angle = 90;
103+
var angle = 0;
83104
var radian = angle*(3.14/180);
84-
var m = -0.4, n = -0.3;
105+
var m = 0, n = 0;
85106
var T1 = new Float32Array(16);
86107
var T2 = new Float32Array(16);
87108
var T3 = new Float32Array(16);
88-
89-
//T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
90-
T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, -m,-n,0,1]; //for translation
91-
//T2 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
92-
T2 = [Math.cos(radian),Math.sin(radian),0,0, -Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1]; //for translation
109+
var T4 = new Float32Array(16);
110+
var T5 = new Float32Array(16);
111+
function main(){
93112

94-
//T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
95-
T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, m,n,0,1]; //for translation
96-
97-
gl.uniformMatrix4fv(GPU_T1, gl.FALSE, T1);
98-
gl.uniformMatrix4fv(GPU_T2, gl.FALSE, T2);
99-
gl.uniformMatrix4fv(GPU_T3, gl.FALSE, T3);
100-
113+
mouseX = 0;
114+
mouseY = 0;
101115
animate();
102-
103-
m = 0; n = 0;
116+
104117
function animate(){
105118
m = -mouseX;
106119
n = -mouseY;
107120
gl.clear(gl.COLOR_BUFFER_BIT);
108-
radian += 0.03;
109-
//T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
110-
T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, -m,-n,0,1]; //for translation
111-
//T2 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
112-
T2 = [Math.cos(radian),Math.sin(radian),0,0, -Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1]; //for translation
121+
angle += 0.03;
113122

114-
//T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
115-
T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, m,n,0,1]; //for translation
123+
//T1 = getIdentity();
124+
T1 = getTranslationMatrix(-m,-n);
125+
T2 = getRotationMatrix(angle);
126+
//T3 = getIdentity();
127+
T3 = getTranslationMatrix(m,n);
128+
T4 = getIdentity();
129+
T5 = getIdentity();
116130

117131
gl.uniformMatrix4fv(GPU_T1, gl.FALSE, T1);
118132
gl.uniformMatrix4fv(GPU_T2, gl.FALSE, T2);
119133
gl.uniformMatrix4fv(GPU_T3, gl.FALSE, T3);
134+
gl.uniformMatrix4fv(GPU_T4, gl.FALSE, T4);
135+
gl.uniformMatrix4fv(GPU_T5, gl.FALSE, T5);
120136

121137
gl.drawElements(gl.TRIANGLES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
122138
requestAnimationFrame(animate);
123139
}
140+
}
141+
function reflect(){
142+
var x1 = document.getElementById("x1").value;
143+
var y1 = document.getElementById("y1").value;
144+
var x2 = document.getElementById("x2").value;
145+
var y2 = document.getElementById("y2").value;
146+
147+
m = (y2-y1)/(x2-x1);
148+
var angle = Math.atan(m);
149+
var c;
150+
if(x1 == x2)
151+
c = y2-y1
152+
else
153+
c = y1 - m*x1;
124154

155+
angle = angle * 180/Math.PI;
156+
T1 = getTranslationMatrix(0, c);
157+
T2 = getRotationMatrix(-angle);
158+
T3 = getReflectionX();
159+
T4 = getRotationMatrix(angle);
160+
T5 = [1,0,0,0, 0,1,0,-c, 0,0,1,0, 0,0,0,1];
161+
162+
gl.uniformMatrix4fv(GPU_T1, gl.FALSE, T1);
163+
gl.uniformMatrix4fv(GPU_T2, gl.FALSE, T2);
164+
gl.uniformMatrix4fv(GPU_T3, gl.FALSE, T3);
165+
gl.uniformMatrix4fv(GPU_T4, gl.FALSE, T4);
166+
gl.uniformMatrix4fv(GPU_T5, gl.FALSE, T5);
167+
gl.clear(gl.COLOR_BUFFER_BIT);
125168
gl.drawElements(gl.TRIANGLES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
169+
console.log(angle);
170+
console.log(c);
171+
}
172+
function getIdentity(){
173+
return [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
174+
}
175+
function getRotationMatrix(angle){
176+
var radian = angle * Math.PI/3.14;
177+
var R = new Float32Array(16);
178+
R = [Math.cos(radian),Math.sin(radian),0,0, -Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1];
179+
return R;
180+
}
181+
function getTranslationMatrix(m, n){
182+
var T = new Float32Array(32);
183+
T = [1,0,0,0, 0,1,0,0, 0,0,1,0, m,n,0,1];
184+
return T;
185+
}
186+
function getReflectionX(){
187+
var Ref = new Float32Array(32);
188+
Ref = [1,0,0,0, 0,-1,0,0, 0,0,1,0, 0,0,0,1];
189+
return Ref;
126190
}
127191
function initializeWebGL(gl)
128192
{
@@ -155,9 +219,11 @@
155219
' uniform mat4 GPU_T1; ' +
156220
' uniform mat4 GPU_T2; ' +
157221
' uniform mat4 GPU_T3; ' +
222+
' uniform mat4 GPU_T4; ' +
223+
' uniform mat4 GPU_T5; ' +
158224
' void main() ' +
159225
' { ' +
160-
' gl_Position = GPU_T1 * GPU_T2 * GPU_T3 * vec4(geometryCoordinatesGPU, 0.0, 1.0); ' +
226+
' gl_Position = GPU_T1 * GPU_T2 * GPU_T3 * GPU_T4 * GPU_T5 * vec4(geometryCoordinatesGPU, 0.0, 1.0); ' +
161227
' } ';
162228

163229
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.

0 commit comments

Comments
 (0)