Update script.js, index.html

index.html

@@ -14,7 +14,8 @@
 	<canvas id="canvas2" style="border: none;" width="600" height="500"></canvas>
 	
 	<br/> <br/>
-	<p>[Both Cube] <button onclick="toggleAnimation(0)">Toggle Animation</button> </p>
+	<p>[Both Cubes] <button onclick="toggleAnimation(0)">Toggle Animation</button> 
+		<button onclick="defaultState(0)">Initial State</button> </p>
 	<p>
 		Speed: 
 		<button onclick="speed_plus()"> + </button>
@@ -26,12 +27,15 @@
 	</p>
 	<br/><hr>
 	<p>[Left Cube] <button onclick="toggleAnimation(1)">Toggle Animation</button> </p>
+	<p>1) Initial State <button onclick="defaultState(1)"> Rotate + TransLate</button>
+		<button onclick="defaultRotate(1)">Rotate</button>
+		<button onclick="defaultTranslate(1)">TransLate</button> </p>
 	<p> 
-		FOV : 
+		2) FOV : 
 		<input style="width:200px" id="fov_range1" type="range" min="30" max="170" value="90" oninput="fn_update_fov(this.value, 1);">
 		<input style="width:100px" type="text" id="textFOV1" value="90">
 	</p>
-	<label>Translate(x,y,z) :</label>
+	<label>3) Translate(x,y,z) :</label>
 	<lable> X <label><input id="translatex1" type="text" size="4" value="0">
 	<label> Y <label><input id="translatey1" type="text" size="4" value="0">
 	<label> Z <label><input id="translatez1" type="text" size="4" value="0">
@@ -39,12 +43,15 @@
 	<button onclick="fn_translate(1, 1)">Rotate -> Translate</button>
 	<br/><hr>
 	<p>[Right Cube] <button onclick="toggleAnimation(2)">Toggle Animation</button></p>
+	<p>1) Initial State <button onclick="defaultState(2)"> Rotate + TransLate</button>
+		<button onclick="defaultRotate(2)">Rotate</button>
+		<button onclick="defaultTranslate(2)">TransLate</button> </p>	
 	<p>
-		FOV : 
+		2) FOV : 
 		<input style="width:200px" id="fov_range2" type="range" min="30" max="170" value="90" oninput="fn_update_fov(this.value, 2);">
 		<input style="width:100px" type="text" id="textFOV2" value="90">
 	</p>
-	<label>Translate(x,y,z)</label>
+	<label>3) Translate(x,y,z)</label>
 	<lable> X <label><input id="translatex2" type="text" size="4" value="0">
 	<label> Y <label><input id="translatey2" type="text" size="4" value="0">
 	<label> Z <label><input id="translatez2" type="text" size="4" value="0">
@@ -52,7 +59,7 @@
 	<button onclick="fn_translate(2, 1)">Rotate -> Translate</button>
 	</p>
 	<p>
-		Distance between center cube with side cubes : 
+		4) Distance between center cube with side cubes : 
 		<input style="width:200px" id="d" type="range" min="0" max="10" value="0" oninput="fn_update_dist(this.value);">
 	</p>
 

script.js

@@ -146,14 +146,6 @@ function initialiseShaders() {
     return testGLError("initialiseShaders");
 }
 
-var xRot = 0.0;
-var yRot = 0.0;
-var zRot = 0.0;
-
-var xRot2 = 0.0;
-var yRot2 = 0.0;
-var zRot2 = 0.0;
-
 var speedRot = 0.01; 
 
 var left_flag = 0;
@@ -193,15 +185,6 @@ function fn_draw_mode(a)
 
 var fov_degree1 = 90.0; 
 var fov_degree2 = 90.0; 
-
-var translatex1 = 0.0;
-var translatey1 = 0.0;
-var translatez1 = 0.0;
-
-var translatex2 = 0.0;
-var translatey2 = 0.0;
-var translatez2 = 0.0;
-
 function fn_update_fov(val, a)
 {
 	if(a == 1) {
@@ -212,8 +195,17 @@ function fn_update_fov(val, a)
         fov_degree2 = val; 
     }
 }
+
 var order1 = 0;
 var order2 = 0;
+
+var translatex1 = 0.0;
+var translatey1 = 0.0;
+var translatez1 = 0.0;
+
+var translatex2 = 0.0;
+var translatey2 = 0.0;
+var translatez2 = 0.0;
 function fn_translate(a, order) {
     if(a == 1) {
         translatex1 = document.getElementById('translatex1').value / 2.0; 
@@ -227,10 +219,73 @@ function fn_translate(a, order) {
         order2 = order;
     }
 }
+
 var dist = 0;
 function fn_update_dist(d) {
     dist = document.getElementById('d').value / 2.0; 
 }
+
+var xRot = 0.0;
+var yRot = 0.0;
+var zRot = 0.0;
+
+var xRot2 = 0.0;
+var yRot2 = 0.0;
+var zRot2 = 0.0;
+
+function defaultRotate(a) {
+
+    if(a == 0) {
+        xRot = 0.0;
+        yRot = 0.0;
+        zRot = 0.0;
+
+        xRot2 = 0.0;
+        yRot2 = 0.0;
+        zRot2 = 0.0;
+
+        left_flag = 1;
+        right_flag = 1;
+    } else if(a == 1) {
+        xRot = 0.0;
+        yRot = 0.0;
+        zRot = 0.0;
+
+        left_flag = 1;
+    } else if(a == 2) {
+        xRot2 = 0.0;
+        yRot2 = 0.0;
+        zRot2 = 0.0;
+        
+        right_flag = 1;
+    }
+}
+
+function defaultTranslate(a) {
+
+    if(a == 0) {
+        translatex1 = 0.0; 
+        translatey1 = 0.0; 
+        translatez1 = 0.0; 
+        translatex2 = 0.0; 
+        translatey2 = 0.0; 
+        translatez2 = 0.0; 
+    } else if(a == 1) {
+        translatex1 = 0.0; 
+        translatey1 = 0.0; 
+        translatez1 = 0.0; 
+    } else if(a == 2) {
+        translatex2 = 0.0; 
+        translatey2 = 0.0; 
+        translatez2 = 0.0; 
+    }
+}
+
+function defaultState(a) {
+    defaultRotate(a);
+    defaultTranslate(a);
+}
+
 function renderScene() {
  
     /*****************   Left Cube   *****************/