Untitled

<!DOCTYPE html>

<html>
<head>
    <title>Canvas Surface Rotation</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid black;
        }

    </style>
    <script>
        var constants = {
            canvasWidth: 600, // In pixels.
            canvasHeight: 600, // In pixels.
            leftArrow: 37,
            upArrow: 38,
            rightArrow: 39,
            downArrow: 40,
            xMin: -15, // These four max/min values define a square on the xy-plane that the surface will be plotted over.
            xMax: 15,
            yMin: -15,
            yMax: 15,
            xDelta: 0.03, // Make smaller for more surface points.
            yDelta: 0.03, // Make smaller for more surface points.
            colorMap: ["#060", "#090", "#0C0", "#0F0", "#9F0", "#9C0", "#990", "#960", "#930", "#900", "#C00"], // 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
            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: 5, // An empirically derived constant that makes the surface a good size for the given canvas size.
            eps: 0.0001
        };

        var X = 0;
        var Y = 1;
        var Z = 2;


        var controlKeyPressed = false;
        var surface = new Surface();


        function point(x, y, z) {
            return [x, y, z];
        }


        function Surface() {
            this.points = [];
        }


        Surface.prototype.equation = function (x, y) {
            var d = Math.sqrt(x * x + y * y);

            return 4 * (Math.sin(d) / d);
        }


        Surface.prototype.generate = function () {
            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) {
                    for (var z = constants.yMin; z <= constants.yMax; z += constants.yDelta) {
                        var a = Math.pow((x * x + y * y + z * z), 2);
                        var b = constants.a * z * Math.pow((x * x + y * y), 2);
                        if (Math.abs(a - b) < constants.eps) {
                            this.points[i] = point(x, y, z);
                            ++i;
                        }
                    }
                }
            }
        }

        Surface.prototype.color = function () {
            var z;

            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)];
            }
        }


        function appendCanvasElement() {
            var canvasElement = document.createElement('canvas');

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

            canvasElement.getContext('2d').translate(constants.canvasWidth / 2, constants.canvasHeight / 2);

            document.body.appendChild(canvasElement);
        }


        Surface.prototype.sortByZIndex = function (A, B) {
            return A[Z] - B[Z];
        }


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

            this.points = surface.points.sort(surface.sortByZIndex); // 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.

            for (var i = 0; i < this.points.length; i++) {
                ctx.fillStyle = this.points[i].color;
                ctx.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;
                }
            }
        }

        // -----------------------------------------------------------------------------------------------------

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

            ctx.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".
            */ {
            var Rx = [[0, 0, 0],
                       [0, 0, 0],
                       [0, 0, 0]]; // Create an initialized 3 x 3 rotation matrix.

            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".
            */ {
            var Ry = [[0, 0, 0],
                       [0, 0, 0],
                       [0, 0, 0]]; // Create an initialized 3 x 3 rotation matrix.

            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".
            */ {
            var Rz = [[0, 0, 0],
                       [0, 0, 0],
                       [0, 0, 0]]; // Create an initialized 3 x 3 rotation matrix.

            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;
            }
        }

        // -----------------------------------------------------------------------------------------------------

        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.
            document.getElementById("myCanvas").addEventListener('mousewheel', function (event) {
                if (event.wheelDelta / 120 > 0) {
                    constants.surfaceScale++; surface.erase(); surface.draw();
                }
                else {
                    constants.surfaceScale--; surface.erase(); surface.draw();
                }
                return false;
            }, false);
        }

        // -----------------------------------------------------------------------------------------------------

        constants.a = 1;
        surface.generate(); // Creates the set of points reprsenting the surface. Must be called before color().
        surface.color(); // 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).
        window.addEventListener('load', onloadInit, false); // Perform processing that must occur after the page has fully loaded.
    </script>
</head>
<body>
    <h1>Canvas Surface Rotation</h1>
    <div id="buttons">
        <button onclick="constants.a++; surface.erase(); surface.generate(); surface.color(); surface.draw(); document.getElementById('a').innerText = constants.a">a++</button>
        <button onclick="if (a == 1) return; constants.a--; surface.erase(); surface.generate(); surface.color();  surface.draw(); document.getElementById('a').innerText = constants.a;">a--</button>
        a=<span id="a">1</span>
    </div>
</body>
</html>