<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE">
	<link rel="stylesheet" href="../include/bootstrap.min.css" />

	<title>Canvas</title>
	<style type="text/css">
		body {
			margin: 10px;
		}
		canvas {
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<main class="container">
		<nav class="nav">
			<a class="nav-link active" aria-current="page" href="../index.html">&larr; Home</a>
		</nav>

		<h1>Canvas Surface Rotation</h1>
		<p>
			Original and explanation here:
			<a target="_blank" href="https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589510(v=vs.85)">source from microsoft</a>
			<a target="_blank" href="http://samples.msdn.microsoft.com/Workshop/samples/canvas/3Dcanvas/instructions.html">ref 1</a>
			<a target="_blank" href="http://samples.msdn.microsoft.com/Workshop/samples/canvas/3Dcanvas/canvas3dRotation.html">ref 2</a>
			<br>

			<a target="_blank" href="https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh535759(v=vs.85)">How To Create 3D Graphics Using Canvas</a><br>
			<a target="_blank" href="https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/jj635757(v=vs.85)">How to map points between 2D coordinate systems</a><br>
			<a target="_blank" href="https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589490(v=vs.85)">How to Use Canvas to Create a Space Game</a><br>
		</p>
		<p>
			<strong>Instructions:</strong> <br>
			The z-axis extends out from the center of the screen <br>
			--- To rotate about the x-axis, press the up/down arrow keys.<br>
			--- To rotate about the y-axis, press the left/right arrow keys.<br>
			--- To rotate about the z-axis, press the ctrl+left/ctrl+down arrow keys.<br>
			Note that pressing an arrow key down continuously will not rotate the surface.
			The surface is rotated once per key press.
		</p>
		<p>
			The image below contain 8100 evenly spaced (x, y) points from the xy-plane were used to calculate the height z of the surface above the xy-plane using the given equation ƒ(x, y).
			Stated another way, each surface point (x, y, z) in the xyz-coordinate system is given by (x, y, ƒ(x, y)).
		</p>
		<div>
			<img src="equation.png">
		</div>

		<!-- <canvas id="myCanvas" width="640" height="480"></canvas> -->
	</main>

	<!-- The canvas element is append to the DOM here. -->
	<!-- <canvas width="600" height="600" id="myCanvas"></canvas> -->
	<script>
		var constants = {
			canvasWidth: 600, // In pixels. ADJUST
			canvasHeight: 600, // In pixels. ADJUST
			leftArrow: 37,
			upArrow: 38,
			rightArrow: 39,
			downArrow: 40,
			xMin: -9, // These four max/min values define a square on the xy-plane that the surface will be plotted over.
			xMax: 9,
			yMin: -9,
			yMax: 9,
			xDelta: 0.2, // Make smaller for more surface points. ADJUST
			yDelta: 0.2, // Make smaller for more surface points. ADJUST
			// There are eleven possible "vertical" color values for the surface,
			// based on the last row of http://www.cs.siena.edu/~lederman/truck/AdvanceDesignTrucks/html_color_chart.gif
			colorMap: ["#060", "#090", "#0C0", "#0F0", "#9F0", "#9C0", "#990", "#960", "#930", "#900", "#C00"],
			pointWidth: 2, // The size of a rendered surface point (i.e., rectangle width and height) in pixels.
			dTheta: 0.05, // The angle delta, in radians, by which to rotate the surface per key press.
			surfaceScale: 24 // An empirically derived constant that makes the surface a good size for the given canvas size. ADJUST
		};

		// These are constants too but I've removed them from the above constants literal to ease typing and improve clarity.
		var X = 0;
		var Y = 1;
		var Z = 2;

		// -----------------------------------------------------------------------------------------------------
		var controlKeyPressed = false; // Shared between processKeyDown() and processKeyUp().
		var surface = new Surface(); // A set of points (in vector format) representing the surface.

		// -----------------------------------------------------------------------------------------------------
		function point(x, y, z) {
			/* Given a (x, y, z) surface point, returns the 3 x 1 vector form of the point. */
			// Return a 3 x 1 vector representing a traditional (x, y, z) surface point.
			// This vector form eases matrix multiplication.
			return [x, y, z];
		}

		// -----------------------------------------------------------------------------------------------------
		function Surface() {
			/* A surface is a list of (x, y, z) points, in 3 x 1 vector format. This is a constructor function. */
			// An array of surface points in vector format.
			// That is, each element of this array is a 3 x 1 array,
			// as in [ [x1, y1, z1], [x2, y2, z2], [x3, y3, z3], ... ]
			this.points = [];
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.equation = function (x, y) {
			/*
			Given the point (x, y),
			returns the associated z-coordinate based on the provided surface equation,
			of the form z = f(x, y).

			An acceptable range for ƒ is:
			-9 <= x <= 9
			-9 <= y <= 9
			*/
			// The distance d of the xy-point from the z-axis.
			// Return the z-coordinate for the point (x, y, z).
			var d = Math.sqrt(x * x + y * y);
			var z = 4 * (Math.sin(d) / d);
			return z;
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.generate = function ()
		{
			/* Creates a list of (x, y, z) points (in 3 x 1 vector format) representing the surface.

			The next step is to decide upon a reasonable number of 3D points to plot over this 18 x 18 xy-plane region.
			If we allow five points per unit, we have a total of 5·18 x 5·18 = 8100 surface points
			of the form (x, y, z) = (x, y, ƒ(x, y))
			5x9 points per quadrant (-9,0  0,9)
			5x9|5x9 = 45+45 = 90 => 90 * 90 = 8100
			*/
			var i = 0;
			for (var x = constants.xMin; x <= constants.xMax; x += constants.xDelta) {
				for (var y = constants.yMin; y <= constants.yMax; y += constants.yDelta) {
					// Store a surface point (in vector format) into the list of surface points.
					this.points[i] = point(x, y, this.equation(x, y));
					++i;
				}
			}
			// console.log("i:", i); // = 8100 points
			/*
			And the this.points array is analogous to the matrix P above
			(that is, a list of 3 x 1 column vectors, each of which represents a 3D surface point).
			In the array, this.points[0][0] would access the x-coordinate of the first surface point
			and this.points[2][2] would access the z-coordinate of the third point.
			*/
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.color = function ()
		{
			/* The color of a surface point is a function of its z-coordinate height.
			Once all surface points have been generated, the colors for the points are chosen based upon the z-coordinate of the point.
			That is, a point’s color is based upon the "height" of the point "above" the xy-plane.
			There are 11 such "height" colors (contained in the constants.colorMap array), which are assigned as follows:
			*/
			// The z-coordinate for a given surface point (x, y, z).
			var z;
			// A starting value.
			// Note that zMin and zMax are custom properties that could possibly be useful if this code is extended later.
			this.zMin = this.zMax = this.points[0][Z];
			for (var i = 0; i < this.points.length; i++) {
				z = this.points[i][Z];
				if (z < this.zMin) { this.zMin = z; }
				if (z > this.zMax) { this.zMax = z; }
			}

			var zDelta = Math.abs(this.zMax - this.zMin) / constants.colorMap.length;

			for (var i = 0; i < this.points.length; i++) {
				this.points[i].color = constants.colorMap[Math.floor((this.points[i][Z] - this.zMin) / zDelta)];
			}

			/* Note that the prior FOR loop is functionally equivalent to the follow (much less elegant) loop:
			for (var i = 0; i < this.points.length; i++)
			{
				if (this.points[i][Z] <= this.zMin + zDelta) {this.points[i].color = "#060";}
				else if (this.points[i][Z] <= this.zMin + 2*zDelta) {this.points[i].color = "#090";}
				else if (this.points[i][Z] <= this.zMin + 3*zDelta) {this.points[i].color = "#0C0";}
				else if (this.points[i][Z] <= this.zMin + 4*zDelta) {this.points[i].color = "#0F0";}
				else if (this.points[i][Z] <= this.zMin + 5*zDelta) {this.points[i].color = "#9F0";}
				else if (this.points[i][Z] <= this.zMin + 6*zDelta) {this.points[i].color = "#9C0";}
				else if (this.points[i][Z] <= this.zMin + 7*zDelta) {this.points[i].color = "#990";}
				else if (this.points[i][Z] <= this.zMin + 8*zDelta) {this.points[i].color = "#960";}
				else if (this.points[i][Z] <= this.zMin + 9*zDelta) {this.points[i].color = "#930";}
				else if (this.points[i][Z] <= this.zMin + 10*zDelta) {this.points[i].color = "#900";}
				else {this.points[i].color = "#C00";}
			}
			As can be seen above, the color representing the lowest z-coordinates is #060 (a darkish green).
			#060 is then "increased" towards #C00 (a medium red), which represents the highest z-coordinates.
			Stated another way, the minimum and maximum z-coordinates (this.zMin and this.zMax)
			are used to linearly distribute (in the vertical sense) the 11 "height" colors amongst the points
			based upon each point’s z-coordinate.
			*/
			//console.log(this.points[0]);
		}

		// -----------------------------------------------------------------------------------------------------
		function appendCanvasElement()
		{
			/* Creates and then appends the "myCanvas" canvas element to the DOM. */
			var canvasElement = document.createElement('canvas');

			canvasElement.width = constants.canvasWidth;
			canvasElement.height = constants.canvasHeight;
			canvasElement.id = "myCanvas";

			// Translate the surface's origin to the center of the canvas.
			canvasElement.getContext('2d').translate(constants.canvasWidth / 2, constants.canvasHeight / 2);

			// document.body.appendChild(canvasElement); // Make the canvas element a child of the body element.

			// the canvas need to be inside a div with class="container"
			var divElement = document.createElement('div');
			divElement.classList.add("container");
			divElement.appendChild(canvasElement);
			document.body.appendChild(divElement);
		}

		//------------------------------------------------------------------------------------------------------
		Surface.prototype.sortByZIndex = function (A, B) {
			// Determines if point A is behind, in front of,
			// or at the same level as point B (with respect to the z-axis).
			return A[Z] - B[Z];
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.draw = function () {
			var myCanvas = document.getElementById("myCanvas"); // Required for Firefox.
			var myContext = myCanvas.getContext("2d");

			// Sort the set of points based on relative z-axis position.
			// If the points are visibly small, you can sort of get away with removing this step.
			// Notice that before we draw the points (rectangles) to the display device,
			// we sort the points by their relative z-axis locations.
			// This ensures that the points farthest from the viewer's eyes are drawn first and those closest are drawn last.
			// When the point widths (pointWidth) are small (1 to 2 pixels), this sorting effect isn't to noticeable.
			// However, try commenting out this.points = surface.points.sort(surface.sortByZIndex);
			// and increasing pointWidth to 5 - when you rotate the surface, odd visualizations start to occur.

			this.points = surface.points.sort(surface.sortByZIndex);

			// In other words, for each 3 x 1 point in the points array,
			// we create a small colored rectangle (which is must faster than rendering a small circle)
			// and position it using the point’s x- and y-coordinates multiplied by an empirically derived constant.
			// The (empirically derived) constant constants.surfaceScale is used to scale the surface
			// such that the surface is guaranteed to visually fit on the canvas, for all possible views.
			for (var i = 0; i < this.points.length; i++) {
				myContext.fillStyle = this.points[i].color;
				myContext.fillRect(
					this.points[i][X] * constants.surfaceScale,
					this.points[i][Y] * constants.surfaceScale,
					constants.pointWidth,
					constants.pointWidth);
			}
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.multi = function (R)
		{
			/* Assumes that R is a 3 x 3 matrix and that this.points (i.e., P) is a 3 x n matrix. This method performs P = R * P. */

			var Px = 0, Py = 0, Pz = 0; // Variables to hold temporary results.
			var P = this.points; // P is a pointer to the set of surface points (i.e., the set of 3 x 1 vectors).
			var sum; // The sum for each row/column matrix product.

			for (var V = 0; V < P.length; V++) // For all 3 x 1 vectors in the point list.
			{
				Px = P[V][X], Py = P[V][Y], Pz = P[V][Z];
				for (var Rrow = 0; Rrow < 3; Rrow++) // For each row in the R matrix.
				{
					sum = (R[Rrow][X] * Px) + (R[Rrow][Y] * Py) + (R[Rrow][Z] * Pz);
					P[V][Rrow] = sum;
				}
			}

			/* This method performs the matrix multiplication RP to produce the new view P’ (as described previously).
			More precisely, this method performs P = RP, where "=" indicates the JavaScript assignment operator.
			Recall that R describes a rotation about the x-, y-, or z-axis.
			That is, the R passed into the multi method is either Rₓ, Ry, or Rz (as defined previously).
			Rₓ, Ry, and Rz are implemented via the xRotate, yRotate, and zRotate methods, respectively.

			When called, yRotate rotates the surface about the y-axis by the small angular amount constants.dTheta.
			That is, yRotate first builds Ry and then calls this.multi(Ry) to perform RyP,
			thus rotating the surface about the y-axis by sign*constants.dTheta radians.
			The sign parameter is used to rotate either clockwise or counterclockwise about the y-axis.
			*/
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.erase = function () {
			var myCanvas = document.getElementById("myCanvas"); // Required for Firefox.
			var myContext = myCanvas.getContext("2d");

			myContext.clearRect(-constants.canvasWidth / 2, -constants.canvasHeight / 2, myCanvas.width, myCanvas.height);
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.xRotate = function (sign)
		{
			/* Assumes "sign" is either 1 or -1, which is used to rotate the surface "clockwise" or "counterclockwise". */
				// Create an initialized 3 x 3 rotation matrix.
			var Rx = [[0, 0, 0],
					[0, 0, 0],
					[0, 0, 0]];

			Rx[0][0] = 1;
			Rx[0][1] = 0; // Redundant but helps with clarity.
			Rx[0][2] = 0;
			Rx[1][0] = 0;
			Rx[1][1] = Math.cos(sign * constants.dTheta);
			Rx[1][2] = -Math.sin(sign * constants.dTheta);
			Rx[2][0] = 0;
			Rx[2][1] = Math.sin(sign * constants.dTheta);
			Rx[2][2] = Math.cos(sign * constants.dTheta);

			this.multi(Rx); // If P is the set of surface points, then this method performs the matrix multiplcation: Rx * P
			this.erase(); // Note that one could use two canvases to speed things up, which also eliminates the need to erase.
			this.draw();
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.yRotate = function (sign)
		{
			/* Assumes "sign" is either 1 or -1, which is used to rotate the surface "clockwise" or "counterclockwise". */
			// Create an initialized 3 x 3 rotation matrix.
			var Ry = [[0, 0, 0],
					[0, 0, 0],
					[0, 0, 0]];

			Ry[0][0] = Math.cos(sign * constants.dTheta);
			Ry[0][1] = 0; // Redundant but helps with clarity.
			Ry[0][2] = Math.sin(sign * constants.dTheta);
			Ry[1][0] = 0;
			Ry[1][1] = 1;
			Ry[1][2] = 0;
			Ry[2][0] = -Math.sin(sign * constants.dTheta);
			Ry[2][1] = 0;
			Ry[2][2] = Math.cos(sign * constants.dTheta);

			this.multi(Ry); // If P is the set of surface points, then this method performs the matrix multiplcation: Rx * P
			this.erase(); // Note that one could use two canvases to speed things up, which also eliminates the need to erase.
			this.draw();
		}

		// -----------------------------------------------------------------------------------------------------
		Surface.prototype.zRotate = function (sign)
		{
			/* Assumes "sign" is either 1 or -1, which is used to rotate the surface "clockwise" or "counterclockwise". */
			// Create an initialized 3 x 3 rotation matrix.
			var Rz = [[0, 0, 0],
					[0, 0, 0],
					[0, 0, 0]];

			Rz[0][0] = Math.cos(sign * constants.dTheta);
			Rz[0][1] = -Math.sin(sign * constants.dTheta);
			Rz[0][2] = 0; // Redundant but helps with clarity.
			Rz[1][0] = Math.sin(sign * constants.dTheta);
			Rz[1][1] = Math.cos(sign * constants.dTheta);
			Rz[1][2] = 0;
			Rz[2][0] = 0
			Rz[2][1] = 0;
			Rz[2][2] = 1;

			this.multi(Rz); // If P is the set of surface points, then this method performs the matrix multiplcation: Rx * P
			this.erase(); // Note that one could use two canvases to speed things up, which also eliminates the need to erase.
			this.draw();
		}

		// -----------------------------------------------------------------------------------------------------
		function processKeyDown(evt)
		{
			if (evt.ctrlKey) {
				switch (evt.keyCode) {
					case constants.upArrow:
						// No operation other than preventing the default behavior of the arrow key.
						evt.preventDefault(); // This prevents the default behavior of the arrow keys, which is to scroll the browser window when scroll bars are present. The user can still scroll the window with the mouse.
						break;
					case constants.downArrow:
						// No operation other than preventing the default behavior of the arrow key.
						evt.preventDefault();
						break;
					case constants.leftArrow:
						// console.log("ctrl+leftArrow");
						surface.zRotate(-1); // The sign determines if the surface rotates "clockwise" or "counterclockwise".
						evt.preventDefault();
						break;
					case constants.rightArrow:
						// console.log("ctrl+rightArrow");
						surface.zRotate(1);
						evt.preventDefault();
						break;
				}
				return; // When the control key is pressed, only the left and right arrows have meaning, no need to process any other key strokes (i.e., bail now).
			}

			// Assert: The control key is not pressed.

			switch (evt.keyCode) {
				case constants.upArrow:
					// console.log("upArrow");
					surface.xRotate(1);
					evt.preventDefault();
					break;
				case constants.downArrow:
					// console.log("downArrow");
					surface.xRotate(-1);
					evt.preventDefault();
					break;
				case constants.leftArrow:
					// console.log("leftArrow");
					surface.yRotate(-1);
					evt.preventDefault();
					break;
				case constants.rightArrow:
					// console.log("rightArrow");
					surface.yRotate(1);
					evt.preventDefault();
					break;
			}

			/*
			surface.zRotate(-1) rotates the surface about the z-axis in the counterclockwise direction.
			evt.preventDefault() prevents the default behavior of the arrow key,
			which is to scroll the browser’s window when scrollbars are present.
			Note that a user can still scroll the window with the mouse.
			*/
		}

		// -----------------------------------------------------------------------------------------------------
		function onloadInit() {
			appendCanvasElement(); // Create and append the canvas element to the DOM.
			surface.draw(); // Draw the surface on the canvas.
			document.addEventListener('keydown', processKeyDown, false); // Used to detect if the control key has been pressed.
		}

		// -----------------------------------------------------------------------------------------------------
		// Starts where!

		// Creates the set of points reprsenting the surface. Must be called before color().
		surface.generate();

		// Based on the min and max z-coordinate values, chooses colors for each point
		// based on the point's z-ccordinate value (i.e., height).
		surface.color();

		// Perform processing that must occur after the page has fully loaded.
		window.addEventListener('load', onloadInit, false);
		// -----------------------------------------------------------------------------------------------------
		</script>
</body>

</html>