Rotating Axes with Angles

This JavaScript program demonstrates how to rotate the axes on a canvas element and display the roation angles using arrow key controls.

RotateAxesWithAngles.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="RotateAxesWithAngles.js"></script>
		<style>
    	.cFocus { border: 1px red solid; }
    	.cBlur { border: none; }
    </style>
  </head>
  <body onload="Initialize()">
     <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

RotateAxesWithAngles.js

class CCanvasPlane {
	constructor() {
		var qCanvas = document.getElementById("idCanvas");
		this.mqContext = qCanvas.getContext("2d");
		this.mqAlpha = Math.PI/6;
		this.mqBeta = Math.PI/6;
	}
	
	Clear() {
		this.mqContext.clearRect(0, 0, 640, 480);
	}
	
	Left() {
		this.mqAlpha +=  Math.PI/12;
		if (this.mqAlpha >  2.0*Math.PI) {
			this.mqAlpha -= 2.0*Math.PI;
		}
	}
	Right() {
		this.mqAlpha -=  Math.PI/12;
		if (this.mqAlpha < 0.0) {
			this.mqAlpha += 2.0*Math.PI;
		}
	}
	Up() {
		if (this.mqBeta + Math.PI/12 < Math.PI/2 - .01) {
			this.mqBeta +=  Math.PI/12;
		}
	}
	Down() {
		if (this.mqBeta - Math.PI/12 > -Math.PI/2 + .01) {
			this.mqBeta -=  Math.PI/12;
		}
	}
	
	CreateCoordinateVectors() {
		var daaA = [];
			daaA[0] = [Math.cos(this.mqAlpha), Math.sin(this.mqAlpha), 0];
			daaA[1] = [-daaA[0][1]*Math.sin(this.mqBeta), daaA[0][0]*Math.sin(this.mqBeta), Math.cos(this.mqBeta)];
			daaA[2] = [daaA[0][1]*daaA[1][2] - daaA[0][2]*daaA[1][1],
				daaA[0][2]*daaA[1][0] - daaA[0][0]*daaA[1][2],
				daaA[0][0]*daaA[1][1] - daaA[0][1]*daaA[1][0]];
		return daaA;
	}
	
	// The projection onto y (up) is in the opposite direction of the canvas pixels
	// The z-axis point into the viewing plane
	ProjectPointToCoordinates(daP) {
		var daaCoord = this.CreateCoordinateVectors();
		var daProj = [];
		for (var i = 0; i < 3; ++i) {
			daProj[i] = daaCoord[i][0]*daP[0] + daaCoord[i][1]*daP[1] + daaCoord[i][2]*daP[2];
		}
		return daProj;
	}
	
	ProjectionToPixel(daP) {
		return [320 + daP[0], 240 - + daP[1]];
	}
	
	
	DrawLine(dX1, dY1, dX2, dY2, sColor) {
		this.mqContext.globalAlpha = 1.0;
		this.mqContext.strokeStyle = sColor;
		this.mqContext.beginPath();
		this.mqContext.moveTo(dX1, dY1);
		this.mqContext.lineTo(dX2, dY2);
		this.mqContext.stroke();
	}
	
	DrawAxes() {
		var saColors = ["red", "green", "blue"];
		var daProjOrigin = this.ProjectPointToCoordinates([0,0,0]);
		var daOriginPixel = this.ProjectionToPixel(daProjOrigin);
		const kdLength = 300;
		for (var i = 0; i < 3; ++i) {
			var daEndpoint = [0,0,0];
			daEndpoint[i] = kdLength;
			var daProjEnd = this.ProjectPointToCoordinates(daEndpoint);
			var daPixelEnd = this.ProjectionToPixel(daProjEnd);
			this.DrawLine(daOriginPixel[0], daOriginPixel[1], daPixelEnd[0], daPixelEnd[1], saColors[i]);
		}
	}
	
	
	DrawAngles() {
		// Draw the Beta angle between the plane and the z-axis
		this.DrawLine(75, 25, 75, 75, "blue");
		this.DrawLine(75 +50*Math.cos(-Math.PI/2 - this.mqBeta), 75+50*Math.sin(-Math.PI/2 - this.mqBeta), 75, 75, "blue");
		this.mqContext.beginPath();
		this.mqContext.arc(75, 75, 25, -Math.PI/2 - this.mqBeta, -Math.PI/2, -this.mqBeta > 0);
		this.mqContext.stroke();
		// Draw the Alpha angle around the z-axis
		this.DrawLine(615, 75, 565, 75, "red");
		this.DrawLine(565 +50*Math.cos(-this.mqAlpha), 75+50*Math.sin(-this.mqAlpha), 565, 75, "red");
		this.mqContext.beginPath();
		this.mqContext.arc(565, 75, 25, 0.0, -this.mqAlpha, true);
		this.mqContext.stroke();
	}
}

var qCP = null;

function Initialize() {
	qCP = new CCanvasPlane();
	qCP.DrawAxes();
	qCP.DrawAngles()
	window.onkeydown=KeyDownFunction;
	window.addEventListener("focus", FocusFunction);
	window.addEventListener("blur", BlurFunction);
	window.focus();
	FocusFunction();
}

function FocusFunction() {
	document.getElementById("idCanvas").className ='cFocus';
}

function BlurFunction() {
	document.getElementById("idCanvas").className ='cBlur';
}

function KeyDownFunction(e) {
	var iKeyUp = 38;
	var iKeyLeft = 37;
	var iKeyRight = 39;
	var iKeyDown = 40;
	var iKeyCode = 0;
	if (e) {
		iKeyCode = e.which;
	} else {
		iKeyCode = window.event.keyCode;
	}
	qCP.Clear();
	switch (iKeyCode) {
		case iKeyUp: {
			qCP.Up();
			// Prevent the window scrolling
      e.preventDefault();
			break;
		}
		case iKeyLeft: {
			qCP.Left();
			// Prevent the window scrolling
      e.preventDefault();
			break;
		}
		case iKeyRight: {
			qCP.Right();
			// Prevent the window scrolling
      e.preventDefault();
			break;
		}
		case iKeyDown: {
			qCP.Down();
			// Prevent the window scrolling
      e.preventDefault();
			break;
		}
		default: {
			break;
		}
	}
	qCP.DrawAxes();
	qCP.DrawAngles();
}

Canvas JavaScript

Rotating Axes with Angles

RotateAxesWithAngles.html

RotateAxesWithAngles.js

Output