Table of Contents

Math.atan2(y, x)

Arguments

y

The y-coordinate of the point.

x

The x-coordinate of the point.

Returns

The angle, in radians, of the point (x, y) from the center of a circle, measured counterclockwise from the circle's positive horizontal axis (i.e., the X-axis). Ranges from to -. (Negative values indicate angles below the X-axis).

Description

The atan2( ) method, like atan( ), performs an arc tangent calculation but uses x- and y-coordinates, rather than their ratio, as arguments. That is, calculating an arc tangent with atan2( ) as:

Math.atan2(9, 3);  // Yields 1.24904577239825

is equivalent to calculating the arc tangent with atan( ), using the ratio of 9/3 (or 3), as follows:

Math.atan(3);      // Same thing

Usage

Note that the y-coordinate is passed as the first argument to atan2( ), whereas the x-coordinate is passed as the second argument. This is intentional and required. It mirrors the structure of tangent, which is the ratio of the side opposite an angle (y) divided by the side adjacent to the angle (x).

Example

The atan2( ) method can be used to make a movie clip point toward a moving target. The following example, available at the online Code Depot, adds a custom method, rotateTowardsMouse( ), to all movie clips. It then assigns rotateTowardsMouse( ) to the onEnterFrame( ) handler of the clip triangle_mc, so that with every passing frame, the clip rotates towards the mouse pointer. The same technique could be used to orient an enemy spaceship toward a player's spaceship.

// Convert radians to degrees. There are 2*pi radians per 360 degrees.
_global.radiansToDegrees = function (radians) {
  return (radians/Math.PI) * 180;
}
   
// Method: MovieClip.rotateTowardsMouse()
//   Desc: Rotates a clip's positive x-axis towards the mouse pointer.
MovieClip.prototype.rotateTowardsMouse = function () {
  // Create a point object that stores the x- and y-coordinates of
  // this clip relative to its parent's registration point.
  var point = {x:this._x, y:this._y};
  // Convert the clip's parent's local coordinates to global (Stage) coordinates.
  this._parent.localToGlobal(point);
  // Measure the distance between the registration
  // point of this clip and the mouse.
  var deltaX = _root._xmouse - point.x;
  var deltaY = _root._ymouse - point.y;
  // Calculate the angle of the line from the registration point
  // of this clip to the mouse. Note that the y-coordinate is passed first.
  var rotationRadian = Math.atan2(deltaY, deltaX);
  // Convert the radian version of the angle to degrees.
  var rotationAngle = radiansToDegrees(rotationRadian); // See earlier function
  // Update the rotation of this clip to point to the mouse.
  this._rotation = rotationAngle;
}
   
// Call rotateTowardsMouse() on every frame.
triangle_mc.onEnterFrame = rotateTowardsMouse; 

Table of Contents