Question

Hello I am trying to write a simple program for fun.. But I am not able to get the angle of rotation and convert it into the number where the needle lands after it follows the crusor.I am letting the needle follow inside the dial. I am including my javascript code. Can anybody help me please?

function alienEye(x, y, size, append, img, theNum) {
    var self = this;
    var i = 0;
    var myintID;
    this.x = x;
    this.y = y;
    this.size = size;

    //Create the Eye Dom Node using canvas.
    this.create = function create(x, y, size, append) {
        //Create dom node
        var eye = document.createElement('canvas');
        eye.width = size;
        eye.height = size;
        eye.style.position = 'relative';
        eye.style.top = y + 'px';
        eye.style.left = x + 'px';
        document.getElementById(append).appendChild(eye);
        //Get canvas
        canvas = eye.getContext("2d")



        radius = size / 2;

        //draw eye
        //canvas.beginPath();
        //canvas.arc(radius, radius, radius, 0, Math.PI*2, true); 
        //canvas.closePath();
        //canvas.fillStyle = "rgb(255,255,255)";
        //canvas.fill();
        //draw pupil
        //canvas.beginPath();
        //canvas.arc(radius, radius/2, radius/4, 0, Math.PI*2, true); 
        //canvas.closePath();
        //canvas.fillStyle = "rgb(0,0,0)";
        //canvas.fill();

        //var img = new Image();

        canvas.drawImage(img, - 20, - 20, 100, 100);


        img.onload = function () {
            canvas.drawImage(img, - 20, - 20, 100, 100);
        }

        img.src = 'Stuff/needle.png';


        return eye;
    }
    //Rotate the Dom node to a given angle.
    this.rotate = function (x) {
        this.node.style.MozTransform = "rotate(" + x + "deg)";
        this.node.style.WebkitTransform = "rotate(" + x + "deg)";
        this.node.style.OTransform = "rotate(" + x + "deg)";
        this.node.style.msTransform = "rotate(" + x + "deg)";
        this.node.style.Transform = "rotate(" + x + "deg)";

    }


    this.letsBegin = function () {
        //Update every 100 miliseconds
        myintID = setInterval(function () {
            //Math!
            angleFromEye = Math.atan2((cursorLocation.y - self.my_y), cursorLocation.x - self.my_x) * (180 / Math.PI) + 90;
            //Rotate
            self.rotate(angleFromEye);
            //Refresh own position every 25th time (in case screen is resized)
            i++;
            if (i > 25) {
                self.locateSelf();
                i = 0;
            }

        }, 20);
    }

    this.letsEnd = function () {
        clearInterval(myintID);
    }


    this.locateSelf = function () {
        this.my_x = this.node.offsetLeft + (this.size / 2);
        this.my_y = this.node.offsetTop + (this.size / 2);
        //If it has offsetParent, add em up to get the objects full position.
        if (this.node.offsetParent) {
            temp = this.node;
            while (temp = temp.offsetParent) {
                this.my_x += temp.offsetLeft;
                this.my_y += temp.offsetTop;
            }
        }
    }

    //Call the node create function when the AlienEye Object is created.
    this.node = this.create(x, y, size, append);
    this.locateSelf();
    //Now the node has been added to the page, lets figure out exact where
    //it is relative to the documents top.

    //Get the basic position



    var cursorLocation = new function () {
            this.x = 0;
            this.y = 0;
            //This function is called onmousemove to update the stored position
            this.update = function (e) {
                var w = window,
                    b = document.body;
                this.x = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0);
                this.y = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0);
            }

            //Hook onmousemove up to the above update function.
            document.onmousemove = function (e) {
                cursorLocation.update(e);
            };

Answer 1

If that’s all your code, all you need to do is call the functions.

I managed to get it running by adding this to the bottom of the script (the body element was given an ID of “body”):

var img = new Image();
img.src = "Stuff/needle.png";

var eye = new alienEye(40, 40, 50, "body", img, 20);
eye.letsBegin();

Edit:

Here’s how I got the angle based off two points in my GameAPI. It’s a bit verbose… the main angle code is at the bottom:

getAngle        : function(point1X, point1Y, point2X, point2Y, hyp) {


            //This function uses the arcsine to calculate the angle between
            //the points, but only if necessary.

            //This function includes some shortcuts for common angles.


            if(point1Y == point2Y) {
                if(point1X < point2X)   return 0;
                else                    return 180;
            }

            if(point1X == point2X) {
                if(point1Y < point2Y)   return 90;
                else                    return 270;
            }


            var xDist = point1X - point2X;
            var yDist = point1Y - point2Y;


            if(xDist == yDist) {
                if(point1X < point2X)   return 45;
                else                    return 225;
            }
            if(-xDist == yDist) {
                if(point1X < point2X)   return 315;
                else                    return 135;
            }


            if(hyp==null)
                hyp = Math.sqrt( xDist*xDist  +  yDist*yDist );


            var D_TO_R = this.D_TO_R;


            if(point1X<point2X) {
                //console.log(Math.round(-Math.asin((point1Y-point2Y)/hyp) * D_TO_R)); 
                return Game.Util.fixDirection(-Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R);
            } else {
                //console.log(Math.round(Math.asin((point1Y-point2Y)/hyp) * D_TO_R + 180)); 
                return Game.Util.fixDirection(Math.asin((point1Y-point2Y)/hyp)      * this.D_TO_R+180);
            }

        }

(The D_TO_R is the constant 180/PI for radian/angle conversion. The Game.Util.fixDirection ensures that the angle is between 0 and 360 The hyp argument is an optional argument for if the hypothenuse of the right triangle is already known, as to save CPU cycles)