diff --git a/index.html b/index.html
index 6e6e2c434bfda7db5ee2a3535ce36f869b6ba547..288e15df7dcd7fa6a3837ca97acc7da2cc9c4f8a 100644
--- a/index.html
+++ b/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,25 +27,31 @@
</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">
<button onclick="fn_translate(1, 0)">Translate -> Rotate</button>
<button onclick="fn_translate(1, 1)">Rotate -> Translate</button>
<br/><hr>
- <p>[Right Cube] <button onclick="toggleAnimation(2)">Toggle Animation</button> </p>
+ <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>
diff --git a/script.js b/script.js
index 02b1b4cd12c1e38c38eda85b93b2d685982b8266..46d23c210dc962fb0d58bb420f39e05155969fef 100644
--- a/script.js
+++ b/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 *****************/