put sliders and average object position

src/client/main.ts

@@ -192,16 +192,38 @@ async function main() {
 	}
 
 	const data = await getObj('/static/objs/fox.obj');
-	let distance: any = $('#input1').val();
+	const params: any = {
-	let circleSize: any = $('#input2').val();
+		distance: $('#distance').val(),
-	distance = parseFloat(distance);
+		circleSize: $('#circlesize').val(),
-	circleSize = parseFloat(circleSize);
+		fov: $('#fov').val(),
+		avg: {
+			x: 0,
+			y: 0,
+			z: 0,
+		},
+	};
+
 	const [
 		positions,
 		normals,
 		uvs,
 		indices,
 	] = convert(data);
+	let x = 0;
+	let y = 0;
+	let z = 0;
+	for (let i = 0; i < positions.length; i++) {
+		if (i % 3 == 0) {
+			x += positions[i];
+		} else if (i % 3 == 1) {
+			y += positions[i];
+		} else {
+			z += positions[i];
+		}
+	}
+	params.avg.x = x / (positions.length / 3);
+	params.avg.y = y / (positions.length / 3);
+	params.avg.z = z / (positions.length / 3);
 	let length = indices.length;
 	let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
 		vsSource,
@@ -250,8 +272,7 @@ async function main() {
 			buffers,
 			deltaTime,
 			length,
-			distance,
+			params,
-			circleSize,
 			texture);
 		requestAnimationFrame(render);
 	}
@@ -268,22 +289,37 @@ async function main() {
 			indices,
 		] = convert(data);
 		length = indices.length;
+		let x = 0;
+		let y = 0;
+		let z = 0;
+		for (let i = 0; i < positions.length; i++) {
+			if (i % 3 == 0) {
+				x += positions[i];
+			} else if (i % 3 == 1) {
+				y += positions[i];
+			} else {
+				z += positions[i];
+			}
+		}
+		params.avg.x = x / (positions.length / 3);
+		params.avg.y = y / (positions.length / 3);
+		params.avg.z = z / (positions.length / 3);
 		deleteBuffers(gl, buffers);
 		buffers = initBuffers(gl, positions, indices, normals, uvs);
 	}
 
 	$(function() {
-		$('#input1').on('keypress', function(event: any) {
+		$('#distance').on('input', function() {
-			if (event.which === 13) {
+			const distance: any = $('#distance').val();
-				event.preventDefault();
+			params.distance = parseFloat(distance);
-				$('#changedistance').click();
-			}
 		});
-		$('#input2').on('keypress', function(event: any) {
+		$('#circlesize').on('input', function() {
-			if (event.which === 13) {
+			const circleSize: any = $('#circlesize').val();
-				event.preventDefault();
+			params.circleSize = parseFloat(circleSize);
-				$('#changecirclesize').click();
+		});
-			}
+		$('#fov').on('input', function() {
+			const fov: any = $('#fov').val();
+			params.fov = parseFloat(fov);
 		});
 		$('#s_blackandwhite').on('click', function() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
@@ -301,14 +337,6 @@ async function main() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource4, vsSource);
 		});
-		$('#changedistance').on('click', function() {
-			distance = $('#input1').val();
-			distance = parseFloat(distance);
-		});
-		$('#changecirclesize').on('click', function() {
-			circleSize = $('#input2').val();
-			circleSize = parseFloat(circleSize);
-		});
 		$('#o_sphere').on('click', async function() {
 			const data = await getObj('/static/objs/sphere.obj');
 			updateObj(data);
@@ -344,8 +372,7 @@ async function main() {
  * @param {any} buffers the buffers to draw
  * @param {number} deltaTime the difference in time since last call
  * @param {number} length the index buffer length
- * @param {number} distance distance of camera
+ * @param {number} params various parameterss
- * @param {number} circleSize size of circle the object is rotating around
  * @param {any} texture the texture to load
  */
 function drawScene(gl: any,
@@ -353,8 +380,7 @@ function drawScene(gl: any,
 	buffers: any,
 	deltaTime: number,
 	length: number,
-	distance: number,
+	params: any,
-	circleSize: number,
 	texture: any) {
 	gl.clearColor(0.0, 0.0, 0.0, 1.0);
 	gl.clearDepth(1.0);
@@ -369,7 +395,7 @@ function drawScene(gl: any,
 	// ratio that matches the display size of the canvas
 	// and we only want to see objects between 0.1 units
 	// and 100 units away from the camera.
-	const fieldOfView = 45 * Math.PI / 180;
+	const fieldOfView = params.fov * Math.PI / 180;
 	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
 	const zNear = 0.1;
 	const zFar = 1000.0;
@@ -400,19 +426,25 @@ function drawScene(gl: any,
 	// the center of the scene.
 	const viewMatrix = mat4.create();
 
-
+	mat4.translate(viewMatrix,
+		viewMatrix,
+		[
+			-params.avg.x,
+			-params.avg.y,
+			-params.avg.z,
+		]);
 	mat4.translate(
 		viewMatrix,
 		viewMatrix, [
-			Math.cos(squareRotation) * circleSize,
+			Math.cos(squareRotation) * params.circleSize,
-			Math.sin(squareRotation) * circleSize,
+			Math.sin(squareRotation) * params.circleSize,
 			0,
 		]);
 
 	mat4.translate(
 		viewMatrix,
 		viewMatrix,
-		[0.0, 0.0, -distance]);
+		[0.0, 0.0, -params.distance]);
 
 	// Tell WebGL how to pull out the positions from the position
 	// buffer into the vertexPosition attribute.

views/index.ejs

@@ -21,13 +21,16 @@
 					<button id='s_texture'>Change Shader to texture</button>
 				</div>
 				<div class='ui-block'>
-					<input id='input1' value='250'></input>
+					<div style='display: inline;'>Change distance : </div>
-					<button id='changedistance'>Change camera distance</button>
+					<input type="range" min="1" max="1000" value="250" class="slider" id="distance">
-					<div style='display: inline'>Max distance is 1000</div>
 				</div>
 				<div class='ui-block'>
-					<input id='input2' value='30'></input>
+					<div style='display: inline;'>Change circle size : </div>
-					<button id='changecirclesize'>Change circle size</button>
+					<input type="range" min="1" max="50" value="10" class="slider" id="circlesize">
+				</div>
+				<div class='ui-block'>
+					<div style='display: inline;'>Change fov : </div>
+					<input type="range" min="15" max="150" value="45" class="slider" id="fov">
 				</div>
 				<div class='ui-block'>
 					<button id='o_sphere'>Set object to sphere</button>