Trigonometry is an easily overlooked topic until you want to create interactive interface solutions relying on spacial relationships. In theory, the concept of trigonometry doesn’t require much to grasp yet still requires enough specialized and simple formulas which are better served as reference material.

So like any interaction developer, I’ll need a trig toolbox, and this will be it.

Note: This is currently a work in progress

Trigonometry Inspiration

• Levitated
• lab.polygonal.de
• Generalrelativity - Blog
  
• Andre Michelle - Blog
• Algorithmist
• Custard Belly - Blog

Trigonometry Books

• Flash Math Creativity - Book
• Foundation ActionScript Animation: Making Things Move!

Trigonometry Tutorials

• TRIGONOMETRY - Great Introduction
• A Trigonometry Tutorial
• Trigonometry Tutorial

The Flash Cartesian coordinate system is slightly different than a normal Cartesian system in that the y axis is flipped. A normal coordinate x=2, y=2 would be x=2, y=-2 in Flash. This is because the visible Stage area starts in the upper left of the screen and continues to the bottom right, therefore you want to work top down.

It’s important to note movieClips in flash use degrees for _rotation, but most of the math involves radians.

360 degrees is equal to PI*2 or 6.28… radians
180 degrees is equal to PI or 3.14… radians
90 degrees is equal to PI/2 or 1.57… radians

Ok, So now on the to the nitty gritty. Before you can begin to calculate distance and angles you you’ll need the kit of parts for conversions and formulas.

Flash Class Methods

• Math.Atan2(y, x)
  Calculates the angle (in radians) from the x-axis to a point on the y-axis
• Math.cos(angle)
  Calculates the cosine of an angle in radians
• Math.sin(angle)
  Calcualtes the sine of an angle in radians
• Math.round(number)
  Rounds the number to the nearest interger Ex. math.round(5.16) returns 5
• Math.Sqrt(number)
  Calcuates the square root
• Math.PI( )
  The circumference of a circle divided by its diameter

Formulas

• function distance ( x1, y1, x2, y2 ):Number
  {
  // distance between two points
  return Math.sqrt(((x2-x1)*(x2-x1)) + ((y2-y1)*(y2-y1)));
  }
• var degreesToRadians:Number = Math.PI/180;
• var radiansToDegrees:Number = 180/Math.PI;
• function degreesToRadians ( degrees ):Number
  {
  // returns degrees -> radians
  return degrees * Math.PI / 180;
  }
• function radiansToDegress ( radians ):Number
  {
  // returns radians -> degrees
  return radians * 180 / Math.PI;
  }
• function getAngle( x1, y1, x2, y2 ):Number
  {
  // angle from point2 to point1
  // returns -179 to 180, 0 is east
  // + clockwise, - counter clockwise
  return Math.atan2((y1-y2), (x1-x2))*radiansToDegrees;
  }
• function midpoint ( pt1, pt2 )
  {
  // returns the mid point of two vectors
  var x = (pt1.x + pt2.x) /2;
  var y = (pt1.y + pt2.y) /2;
  return {x:x, y:y};
  }
• function perpoint ( pt1, pt2, xper, yper )
  {
  // FIND THE POINT BETWEEN TO POINTS
  // BASED ON THE PERCENTAGE OF DISTANCE
  var x = ((pt2.x - pt1.x)*(xper||0))+ pt1.x
  var y = ((pt2.y - pt1.y)*(yper||xper||0))+ pt1.y
  return {x:x, y:y};
  }

Examples

• // USING ROTATION TO FOLLOW A POINT
  onMouseMove = function()
  {
  // arrow points to mouse
  var pt1 = {x:arrow._parent._xmouse, y:arrow._parent._ymouse };
  var pt2 = {x:arrow._x, y:arrow._y };
  arrow._rotation = getAngle ( pt1.x, pt1.y, pt2.x, pt2.y );
  }
• // GETTING DISTANCE
  var pt1 = { x:0, y:0 };
  var pt2 = { x:0, y:10 };
  var pt3 = { x:10, y:10 };
  var dist1 = distance ( pt1.x, pt1.y, pt2.x, pt2.y );
  var dist2 = distance ( pt1.x, pt1.y, pt3.x, pt3.y );
  trace( ‘dist1: ‘ + dist1 ); // 10
  trace( ‘dist2: ‘ + dist2 ); // 14.142135623731
• // GETTING THE POINT BETWEEN TWO POINTS
  var pt1 = { x:10, y:10 };
  var pt2 = { x:20, y:20 };
  var midpt = midpoints ( pt1, pt2 );
  trace( ‘x: ‘ + midpt.x + ‘ y: ‘ + midpt.y ); // x: 15 y: 15