bzdgn · January 16, 2017 20:20 · bzdgn · Jan 16, 2017
diff --git a/3drotationdemo.html b/3drotationdemo.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>3d Rotation On Z-Axis Example</title>
 		<style>
 			body {
 				margin:		0px;
 				padding:	0px;
 			}
 		</style>
 	</head>
 	<body onload="doTimer()">
 		<canvas id='mainCanvas' width="800" height="600" style="border:1px solid #000000;" />
 		<script>
 			<!-- Written by Levent Divilioglu on 16/01/2017 -->
 			<!-- 3d knowledge and math based on this tutorial; -->
 			<!-- http://petercollingridge.appspot.com/3D-tutorial -->
 			
 			// canvas setup
 			var canvas	= document.getElementById('mainCanvas');
 			var ctx		= canvas.getContext('2d');
 			
 			// nodes of cube
 			var node0 = [ -100, -100, -100  ];
 			var node1 = [ -100, -100,  100  ];
 			var node2 = [ -100,  100, -100  ];
 			var node3 = [ -100,  100,  100  ];
 			var node4 = [  100, -100, -100  ];
 			var node5 = [  100, -100,  100  ];
 			var node6 = [  100,  100, -100  ];
 			var node7 = [  100,  100,  100  ];
 			
 			// nodes array
 			var nodes = [ node0, node1, node2, node3, node4, node5, node6, node7 ];
 			
 			// edges of cube (wireframe, lines)
 			var edge0  = [0, 1];
 			var edge1  = [1, 3];
 			var edge2  = [3, 2];
 			var edge3  = [2, 0];
 			var edge4  = [4, 5];
 			var edge5  = [5, 7];
 			var edge6  = [7, 6];
 			var edge7  = [6, 4];
 			var edge8  = [0, 4];
 			var edge9  = [1, 5];
 			var edge10 = [2, 6];
 			var edge11 = [3, 7];
 			
 			// edges array
 			var edges = [
 				edge0  , edge1  , edge2  , edge3  ,
 				edge4  , edge5  , edge6  , edge7  ,
 				edge8  , edge9  , edge10 , edge11
 			];
 			
 			// setup
 			var backgroundColor		= color(255, 255, 255);
 			var nodeColor			= color(40 , 168, 107);
 			var edgeColor			= color(34 ,  68, 204);
 			var nodeSize = 8;
 			
 			// rotation degree
 			var rotDegree = 0.1;
 			var transformQuotient = Math.PI/180;
 			
 			// functions
 			
 			// rgb color string helper function
 			function color(x, y, z) {
 				var c = 'rgba(' + x + ',' + y + ',' + z + ',1' + ')';
 				
 				return c;
 			}
 			
 			// draw function
 			function clearScreen() {
 				ctx.clearRect(0, 0, canvas.width, canvas.height);
 			}
 			
 			function fillScreen(color) {
 				ctx.beginPath();
 				ctx.rect(0, 0, canvas.width, canvas.height);
 				ctx.fillStyle = color;
 				ctx.fill();
 			}
 			
 			function refreshScreen() {
 				clearScreen();
 				fillScreen(backgroundColor);
 			}
 			
 			function point(x, y, color) {
 				ctx.beginPath();
 				ctx.rect(x, y, 1, 1);
 				ctx.fillStyle = color;
 				ctx.fill();
 			}
 			
 			function circle(x, y, r, color) {
 				ctx.beginPath();
 				ctx.fillStyle = color;
 				ctx.arc(x, y, r,0,2*Math.PI);
 				ctx.fill();
 			};
 			
 			function line(x1, y1, x2, y2, color) {
 				ctx.beginPath();
 				ctx.moveTo(x1, y1);
 				ctx.lineTo(x2, y2);
 				ctx.strokeStyle = color;
 				ctx.stroke();
 			}
 			
 			function drawNodes(nodes) {
 				for(var n = 0; n < nodes.length; n++) {
 					var node = nodes[n];
 					
 					var x = node[0];
 					var y = node[1];
 					// var z = node[2];		// we dont care z axis, we will use z parameter for rotation calculations
 					circle(x, y, nodeSize, nodeColor);
 				}
 			}
 			
 			function drawEdges(edges) {
 				for(var e = 0; e < edges.length; e++) {
 					var edge = edges[e];
 					
 					var e1 = edge[0];
 					var e2 = edge[1];
 					
 					var n1 = nodes[e1];
 					var n2 = nodes[e2];
 					
 					var x1 = n1[0];
 					var y1 = n1[1];
 					
 					var x2 = n2[0];
 					var y2 = n2[1];
 					
 					line(x1, y1, x2, y2, edgeColor);
 				}
 			}
 			
 			// rotates node by theta around z-axis
 			function rotateNode3DonZ(node, theta) {
 				var x = node[0];
 				var y = node[1];
 				
 				theta *= transformQuotient;
 				
 				var cosTheta = Math.cos(theta);
 				var sinTheta = Math.sin(theta);
 				
 				var x = node[0];
 				var y = node[1];
 				
 				node[0] = x * cosTheta - y * sinTheta;
 				node[1] = x * sinTheta + y * cosTheta;
 			}
 			
 			// rotates nodes by theta around z-axis
 			function rotateNodes3DonZ(nodes, theta) {
 				for(var n = 0; n < nodes.length; n++) {
 					rotateNode3DonZ(nodes[n], theta);
 				}
 			}
 			
 			function handleAnimation() {
 				refreshScreen();
 				ctx.save();
 				ctx.translate(200, 200);
 				
 				drawNodes(nodes);
 				drawEdges(edges);
 				rotateNodes3DonZ(nodes, rotDegree);
 				
 				ctx.restore();
 			}
 			
 			function log() {
 				console.log("hit");
 			}
 			
 			function doTimer() {
 				//window.requestAnimationFrame(handleAnimation);
 				timerID = setInterval( "handleAnimation()", 20 );
 			}
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>3d Rotation On Z-Axis Example</title>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body onload="doTimer()">
	<canvas id='mainCanvas' width="800" height="600" style="border:1px solid #000000;" />
	<script>
	<!-- Written by Levent Divilioglu on 16/01/2017 -->
	<!-- 3d knowledge and math based on this tutorial; -->
	<!-- http://petercollingridge.appspot.com/3D-tutorial -->

	// canvas setup
	var canvas = document.getElementById('mainCanvas');
	var ctx = canvas.getContext('2d');

	// nodes of cube
	var node0 = [ -100, -100, -100 ];
	var node1 = [ -100, -100, 100 ];
	var node2 = [ -100, 100, -100 ];
	var node3 = [ -100, 100, 100 ];
	var node4 = [ 100, -100, -100 ];
	var node5 = [ 100, -100, 100 ];
	var node6 = [ 100, 100, -100 ];
	var node7 = [ 100, 100, 100 ];

	// nodes array
	var nodes = [ node0, node1, node2, node3, node4, node5, node6, node7 ];

	// edges of cube (wireframe, lines)
	var edge0 = [0, 1];
	var edge1 = [1, 3];
	var edge2 = [3, 2];
	var edge3 = [2, 0];
	var edge4 = [4, 5];
	var edge5 = [5, 7];
	var edge6 = [7, 6];
	var edge7 = [6, 4];
	var edge8 = [0, 4];
	var edge9 = [1, 5];
	var edge10 = [2, 6];
	var edge11 = [3, 7];

	// edges array
	var edges = [
	edge0 , edge1 , edge2 , edge3 ,
	edge4 , edge5 , edge6 , edge7 ,
	edge8 , edge9 , edge10 , edge11
	];

	// setup
	var backgroundColor = color(255, 255, 255);
	var nodeColor = color(40 , 168, 107);
	var edgeColor = color(34 , 68, 204);
	var nodeSize = 8;

	// rotation degree
	var rotDegree = 0.1;
	var transformQuotient = Math.PI/180;

	// functions

	// rgb color string helper function
	function color(x, y, z) {
	var c = 'rgba(' + x + ',' + y + ',' + z + ',1' + ')';

	return c;
	}

	// draw function
	function clearScreen() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	function fillScreen(color) {
	ctx.beginPath();
	ctx.rect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = color;
	ctx.fill();
	}

	function refreshScreen() {
	clearScreen();
	fillScreen(backgroundColor);
	}

	function point(x, y, color) {
	ctx.beginPath();
	ctx.rect(x, y, 1, 1);
	ctx.fillStyle = color;
	ctx.fill();
	}

	function circle(x, y, r, color) {
	ctx.beginPath();
	ctx.fillStyle = color;
	ctx.arc(x, y, r,0,2*Math.PI);
	ctx.fill();
	};

	function line(x1, y1, x2, y2, color) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = color;
	ctx.stroke();
	}

	function drawNodes(nodes) {
	for(var n = 0; n < nodes.length; n++) {
	var node = nodes[n];

	var x = node[0];
	var y = node[1];
	// var z = node[2]; // we dont care z axis, we will use z parameter for rotation calculations
	circle(x, y, nodeSize, nodeColor);
	}
	}

	function drawEdges(edges) {
	for(var e = 0; e < edges.length; e++) {
	var edge = edges[e];

	var e1 = edge[0];
	var e2 = edge[1];

	var n1 = nodes[e1];
	var n2 = nodes[e2];

	var x1 = n1[0];
	var y1 = n1[1];

	var x2 = n2[0];
	var y2 = n2[1];

	line(x1, y1, x2, y2, edgeColor);
	}
	}

	// rotates node by theta around z-axis
	function rotateNode3DonZ(node, theta) {
	var x = node[0];
	var y = node[1];

	theta *= transformQuotient;

	var cosTheta = Math.cos(theta);
	var sinTheta = Math.sin(theta);

	var x = node[0];
	var y = node[1];

	node[0] = x * cosTheta - y * sinTheta;
	node[1] = x * sinTheta + y * cosTheta;
	}

	// rotates nodes by theta around z-axis
	function rotateNodes3DonZ(nodes, theta) {
	for(var n = 0; n < nodes.length; n++) {
	rotateNode3DonZ(nodes[n], theta);
	}
	}

	function handleAnimation() {
	refreshScreen();
	ctx.save();
	ctx.translate(200, 200);

	drawNodes(nodes);
	drawEdges(edges);
	rotateNodes3DonZ(nodes, rotDegree);

	ctx.restore();
	}

	function log() {
	console.log("hit");
	}

	function doTimer() {
	//window.requestAnimationFrame(handleAnimation);
	timerID = setInterval( "handleAnimation()", 20 );
	}
	</script>
	</body>
	</html>