Skip to content
Snippets Groups Projects
Commit 5abb0502 authored by SOYKIM's avatar SOYKIM
Browse files

Update script.js, index.html

parent 6744dec9
No related branches found
No related tags found
No related merge requests found
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
<canvas id="canvas2" style="border: none;" width="600" height="500"></canvas> <canvas id="canvas2" style="border: none;" width="600" height="500"></canvas>
<br/> <br/> <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> <p>
Speed: Speed:
<button onclick="speed_plus()"> + </button> <button onclick="speed_plus()"> + </button>
...@@ -26,12 +27,15 @@ ...@@ -26,12 +27,15 @@
</p> </p>
<br/><hr> <br/><hr>
<p>[Left Cube] <button onclick="toggleAnimation(1)">Toggle Animation</button> </p> <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> <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: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"> <input style="width:100px" type="text" id="textFOV1" value="90">
</p> </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"> <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> Y <label><input id="translatey1" type="text" size="4" value="0">
<label> Z <label><input id="translatez1" type="text" size="4" value="0"> <label> Z <label><input id="translatez1" type="text" size="4" value="0">
...@@ -39,12 +43,15 @@ ...@@ -39,12 +43,15 @@
<button onclick="fn_translate(1, 1)">Rotate -> Translate</button> <button onclick="fn_translate(1, 1)">Rotate -> Translate</button>
<br/><hr> <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> <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: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"> <input style="width:100px" type="text" id="textFOV2" value="90">
</p> </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"> <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> Y <label><input id="translatey2" type="text" size="4" value="0">
<label> Z <label><input id="translatez2" type="text" size="4" value="0"> <label> Z <label><input id="translatez2" type="text" size="4" value="0">
...@@ -52,7 +59,7 @@ ...@@ -52,7 +59,7 @@
<button onclick="fn_translate(2, 1)">Rotate -> Translate</button> <button onclick="fn_translate(2, 1)">Rotate -> Translate</button>
</p> </p>
<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);"> <input style="width:200px" id="d" type="range" min="0" max="10" value="0" oninput="fn_update_dist(this.value);">
</p> </p>
......
...@@ -146,14 +146,6 @@ function initialiseShaders() { ...@@ -146,14 +146,6 @@ function initialiseShaders() {
return testGLError("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 speedRot = 0.01;
var left_flag = 0; var left_flag = 0;
...@@ -193,15 +185,6 @@ function fn_draw_mode(a) ...@@ -193,15 +185,6 @@ function fn_draw_mode(a)
var fov_degree1 = 90.0; var fov_degree1 = 90.0;
var fov_degree2 = 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) function fn_update_fov(val, a)
{ {
if(a == 1) { if(a == 1) {
...@@ -212,8 +195,17 @@ function fn_update_fov(val, a) ...@@ -212,8 +195,17 @@ function fn_update_fov(val, a)
fov_degree2 = val; fov_degree2 = val;
} }
} }
var order1 = 0; var order1 = 0;
var order2 = 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) { function fn_translate(a, order) {
if(a == 1) { if(a == 1) {
translatex1 = document.getElementById('translatex1').value / 2.0; translatex1 = document.getElementById('translatex1').value / 2.0;
...@@ -227,10 +219,73 @@ function fn_translate(a, order) { ...@@ -227,10 +219,73 @@ function fn_translate(a, order) {
order2 = order; order2 = order;
} }
} }
var dist = 0; var dist = 0;
function fn_update_dist(d) { function fn_update_dist(d) {
dist = document.getElementById('d').value / 2.0; 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() { function renderScene() {
/***************** Left Cube *****************/ /***************** Left Cube *****************/
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment