Skip to content

Instantly share code, notes, and snippets.

@bzdgn
Created January 16, 2017 20:20
Show Gist options
  • Save bzdgn/34a40c655f2b27a391acb7d78a93ee90 to your computer and use it in GitHub Desktop.
Save bzdgn/34a40c655f2b27a391acb7d78a93ee90 to your computer and use it in GitHub Desktop.
3d Rotation On Z-Axis Example With HTML5 and JavaScript
<!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>
@bzdgn
Copy link
Author

bzdgn commented Jan 16, 2017

Sample Screen Shot;

rotation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment