0
\$\begingroup\$

I'm making a game where you have to plot a function to hit certain objectives. I already made the plotting function and the animation to display a tiny missile that travels above the function. My problem is that the sprite must rotate following the function path. For example: enter image description here enter image description here enter image description here

Here is the code. To trigger the current animation, just run the animate() function in your browser. In the moveRocket() function is where I render each frame of the animation. This is how I'm currently trying to get the rotation degrees:

var rotationDegrees = Math.atan2(y2 - y1, x2 - x1);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>sin título</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.22" />
</head>

<body>
    <script>
        //Math stuff
        var height, width;
        var scale = 10; // A factor that does zoom in the function
        var landa = 0.15; // Gap between one point and another in the plotted function
        var fpsSpeed = 50; //secs per frame

        function xNeg () {
            return (-1)*(width / 2) //-x limit
        }

        function xPos() {
            return (+1)*(width / 2) //+y limit
        }


        function plot(context, x1, y1, x2, y2) {
            // translate the coordinates to the real canvas points, this is, (-10,-10) to (40.40) 
            // if we have a 100*100 canvas
            x1 = ((width / 2) + x1 * scale);
            x2 = ((width / 2) + x2 * scale);
            y1 = ((width / 2) - y1 * scale);
            y2 = ((width / 2) - y2 * scale);
            backgroundContext.moveTo(x1, y1);
            backgroundContext.lineTo(x2, y2);
            backgroundContext.stroke();
        }

        function f(x) {
            // the sample funcion
            return x*x;
        }

        function inverse(x) {
            // the inverse of the sample function, this is to not waste time rendering parts of the function
            // that aren't actually displayed.
            return Math.sqrt(x);
        }

        //Animation stuff
        var timer;
        var fps = 0;

        function addFrames(x1,y1,x2,y2) {
            addRocketFrame(x1,y1,x2,y2);
            //addEnemyHitFrame(x1,y1,x2,y2);
            //addSmockeTraceFrame(x1,y1,x2,y2);
        }

        function animate() {
            prepareLayer(rocketContext, rocketCanvas);
            timer=setTimeout('animate()', fpsSpeed);
            //HOT SPOT **
            moveRocket();
            //HOT SPOT **
            fps++;
            restoreLayer(rocketContext);
        }

        function restoreLayer(ctx) {
            ctx.restore();
        }

        function prepareLayer(ctx, canvas) {
            // Store the current transformation matrix
            ctx.save();
            // Use the identity matrix while clearing the canvas
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // Restore the transform
            ctx.restore();
        }

        //Rocket animation stuff

        var rocketFrames = new Array();
        var rocketFrameCounter = 0;

        //Render the rocket frames
        function moveRocket() {
            if (fps < rocketFrameCounter-1) {

                var frame = rocketFrames[fps];

                x1 = ((width / 2) + frame.x1 * scale);
                y1 = ((width / 2) - frame.y1 * scale);
                x2 = ((width / 2) + frame.x2 * scale);
                y2 = ((width / 2) - frame.y2 * scale);

                var rotationDegrees = Math.atan2(y2 - y1, x2 - x1); //Trying to get the rotation degrees...
                var rocketImage = document.getElementById("rocket");

                rocketContext.drawImage(rocketImage, x1, y1);
                //rocketContext.rotate(rotationDegrees);

            }
        }

        function addRocketFrame(x1,y1,x2,y2) {
            var frame = { x1:x1,
                          y1:y1,
                          x2:x2,
                          y2:y2};
            rocketFrames[rocketFrameCounter++] = frame;
        }

        window.onload = function() {
            rocketCanvas = document.getElementById("rocketlayer");
            rocketContext = rocketCanvas.getContext("2d");

            backgroundCanvas = document.getElementById("background");
            backgroundContext = backgroundCanvas.getContext("2d");

            height = 600;
            width = 800;

            // Start plotting the function
            for ( var x1 = -inverse(xPos()); x1 < inverse(xPos()); x1 += landa) {
                var y1 = f(x1); //from
                var x2 = x1 + landa;
                var y2 = f(x2); //from
                plot(backgroundContext, x1, y1, x2, y2);
                //Add the frames that we are gonna to use to the animation
                addFrames(x1, y1, x2, y2);
            }
        };
    </script>

    <div id="container" style="position: relative;">
        <canvas id="background" style="position: absolute; top: 0; left: 0;" width="800" height="600"></canvas>
        <canvas id="rocketlayer" style="position: absolute; top: 0; left: 0;"  width="800" height="600"></canvas>
    </div>
    <img width="13" height="50" id="rocket" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAyCAYAAACHx1EEAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwHEA0XEAgoEwAAA95JREFUSMfF1k1oHVUUB/D/ufdO3uR929d8NcEmNppWYmySoiFVSyAbhS7E+gF2IQptBXEhuHHnxoUru+yugis31aVQlOKmEKmISWrMhy9p06Z575nM+5j33szce9wkko83SSgRLwzMzLk/Dvdw59yRaDBGRkaG+vv7v2hvb19fWlpa3BlXjVBLS8s7XV1d7+VyuQqAnwGYrXGxE4yOjp5IJBLnu7u7EY/HXx0fH+/bOWcXam1tPRePx3szmQzi8fjxdDr9yp5oeHjYUkqNRaNRlUwmEYvFpFLqbG9vbyQUSSmbpZQnbNuGbduIRCKQUnYODg5aoahWq2ki8i3LglIKUkoIsWsFu9dERFoIgc2LiPZHG7Dh5P8G7TUEHmMcDmLmbfdbnw8309YihFXx8AvRaD3/c8kfCzXX6wQAolAAANiuS3uiz+bne55eWDiqSiXQxATI99G5uHj09Zs3jzdE14AoarWPj+Tz/YHW0NksWGukcrnnRLH40dUtn/y/qE2pK2B+XwsBGQSwi0UIY2CEADNfeiqbvbIN3U6nX04xfwBjpJYSYAZcFzoIoC0LMEakmS/fzmTGAED8MDAQi1Wrl1NaP6sAGCFgjIF0XagggJYSFoCk1qfi5fKl7/r6EqpjZuZty/ffkgCSABabmiA9D7SRiSyLUwBFAMD3L/Rksz8KYcwFwWwJISpNzc3f3Ovo+NWtVLQql1ErFMyDlpbfIrHY15CyJJiVNOYN+aFlvaCFmKjZ9lfXL178cr5cnq5Vq887zMemgd9nq9VP7w4NXX1xfn4SwApLmaNfAOsMEABgAPjk9Ok3ccy+bmXQXM/pWnVVv3vtzp0bm5X7CVDqDOBvvvgWkKfW5s41DbGtxwToFkdqk3ipHfj+842TYwwItu2Ik6lUMkZ6IHJEi0irIbtTi3Q0OHs+Gm0L3UaWMa1CmScRIwjbgJ5gUAx9MaKTocgwt8FCGhGAFEBJAAnEpeCe8FPDmBgxLNIMrm9EJUAMGYpIiDLV4aECoARQmcFFeIHmlVBUB3LssoMyYNU12CGgyI4gWgpFHpBHnVZQBOADXABQoYd1ovBMq+VyiQPxF9bAxiVgFcxVLBQqFScUvQZ4WmMG62DjCGAVrD26OwbU9+oRzMx/sANf5wQoD89ont7cYqGNxSeaoyKvi0cGcHi9LsTsvt2oQrTMVXog8ga6TMsVovv7oqTr/m18mjOPBKNGM4lKZW1f9AzgBR5N4R4M+zzZD3gH6bAMzVNyTa97TFMHbstGiD8ZNBNIOdso3vDXzRFiGUrdykv58MCZ3FLJKSYSN3KOU2oU/wd85qomyhtgPwAAAABJRU5ErkJggg==" />
</body>

</html>

My problem is that when I try to rotate the sprite with this line:

var rotationDegrees = Math.atan2(y2 - y1, x2 - x1);

This doesn't give me the right rotation degrees, I searched and I think that this is the right algorithm. So any clue of why this isn't working?

\$\endgroup\$
  • 1
    \$\begingroup\$ You haven't described any problem. What is your question? What is not working? \$\endgroup\$ – Engineer Dec 7 '13 at 18:00
  • 1
    \$\begingroup\$ This appears to be asking "how do I move the sprite in the direction of travel," which is a duplicate question. If not, please edit your question to be more clear. \$\endgroup\$ – user1430 Dec 7 '13 at 19:51
  • \$\begingroup\$ @astinx your edit to explicitly say your question triggered a reopen vote, but your question is still a duplicate of another one with an identical topic. Also, you clearly know the correct method, but are having trouble implementing it. That makes it a question about debugging your code, which is also off-topic. If you need assistance nailing down the problem, try the Game Development Chat. \$\endgroup\$ – Seth Battin Dec 9 '13 at 1:58