index.html

  
 <html>

<head>
<title>WebGL Tutorial - TransLate & Rotate </title>
<h1>Translation & Rotation</h1>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="gl-matrix.js"> </script>
<script type="text/javascript" src="script.js"> </script>

</head>

<body onload="main()">
    <canvas id="canvas1" style="border: none;" width="600" height="500"></canvas>
	<canvas id="canvas2" style="border: none;" width="600" height="500"></canvas>
	
	<br/> <br/>
	<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>
		<button onclick="speed_minus()"> - </button>
		| Draw Mode:
		<button onclick="fn_draw_mode(2)"> Lines </button>
		<button onclick="fn_draw_mode(4)"> Triangles </button>
		<button onclick="fn_draw_mode(0)"> Points </button>
	</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> 
		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>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>1) Initial State <button onclick="defaultState(2)"> Rotate + TransLate</button>
		<button onclick="defaultRotate(2)">Rotate</button>
		<button onclick="defaultTranslate(2)">TransLate</button> </p>	
	<p>
		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>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">
	<button onclick="fn_translate(2, 0)">Translate -> Rotate</button>
	<button onclick="fn_translate(2, 1)">Rotate -> Translate</button>
	</p>
	<p>
		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>

</body>

</html>