Rotating a Wireframe Cube

This JavaScript program demonstrates how to rotate a wireframe cube on a canvas element using arrow key controls.

RotateWireCube.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="RotateWireCube.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>

RotateWireCube.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;
	}
	Right() {
		this.mqAlpha -=  Math.PI/12;
	}
	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();
	}
	
	DrawCube() {
		var saColors = ["red", "green", "blue"];
		const kdLow = -100;
		const kdHigh = 100;
		var daRange = [kdLow, kdHigh];
		for (var i = 0; i < 3; ++i) {
			for (var j = 0; j < 2; ++j) {
				for (var k = 0; k < 2; ++k) {
					var daP1 = [0,0,0];
					var daP2 = [0,0,0];
					daP1[i] = kdLow;
					daP1[(i+1)%3] = daRange[j];
					daP1[(i+2)%3] = daRange[k];
					daP2[i] = kdHigh;
					daP2[(i+1)%3] = daRange[j];
					daP2[(i+2)%3] = daRange[k];
					var daProj1 = this.ProjectPointToCoordinates(daP1);
					var daProj2 = this.ProjectPointToCoordinates(daP2);
					var daPixel1 = this.ProjectionToPixel(daProj1);
					var daPixel2 = this.ProjectionToPixel(daProj2);
					this.DrawLine(daPixel1[0], daPixel1[1], daPixel2[0], daPixel2[1], saColors[i]);
				}
			}
		}
	}
}

var qCP = null;

function Initialize() {
	qCP = new CCanvasPlane();
	qCP.DrawCube();
	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.DrawCube();
}

Canvas JavaScript

Rotating a Wireframe Cube

RotateWireCube.html

RotateWireCube.js

Output