Coordinates for my Javascript game - based on an angle, when do I use Sin Cos and Tan?

Question

JavaScript coordinates Sin, Cos or Tan? I am trying to learn some basic trigonometry for game development in the web browser. I know the soh cah toa rule etc. I know we are also

Answer 1

Basic Definitions (from your trigonometry book):

cos ϴ = x/h, sin ϴ = y/h

Gratuitous ASCII art to describe x,y,and H :

         _
         /\  assume we're going this way 
        /
       /|
      / |
  h  /  |
    /   |  Y
   /    |
  /ϴ    |
 +-------
    X

A vector can be split into a sum of two vectors. (you can think of this in the diagram as going northeast for H meters is the same as going east for X meters and north for Y meters)

H in this case corresponds to your current thrust. You want to find the X and Y components of that thrust.

since cos ϴ = X / H (basic definition of cosine), we can say (via simple algebra)

X = H * cos ϴ

however, ϴ is assumed to be a radian measure. if you're using degrees, you have to multiply by Math.PI / 180 to get the correct value. hence, you have

ϴ = angle * Math.PI / 180

We're very close! Now our classic definition-of-cosine formula (when translated to our terms) looks like

cos (angle * Math.PI / 180) = X / H

H being our Thrust vector, X being only the horizontal part of our thrust vector.

"Now, wait a minute," you say. "why am I using cosine to calculate the vertical velocity then? Your axes seem flipped to me." Ah, yes. This is standard geometric orientation -- angles are measured as a counter-clockwise rotation from --------> directly to the right. Your axes are flipped because you are storing your angle as a "clock-angle", i.e. 0 degrees is at 12:00. In order to use the standard geometric equation, we have to mirror our entire universe so that the X and Y axes are flipped. Luckily, the mathematical way to do this is simply to switch all your X's and Y's around in the equations.

standard 'math' coordinate system
            _
             /\  
            /
           /|
          / |       angles increase counterclockwise
      h  /  |
        /   |  Y
       /    |
      /ϴ    |
     +----------- (zero degrees starts here)
  (0,0)  X       


your coordinate system

  (zero degrees starts here)
       ^
       |   angles increase clockwise
       |   /
       |  /
       |ϴ/
       |/
       +

Finally, why is there a negative in the cosine? Because here is the cartesian system where we do our math in

 ^ y-axis
 |
 |
 +----> x-axis

here is the cartesian system that you are drawing to (probably a canvas)

+------> x-axis
|
|
v y-axis

since the y-axis is facing the other direction, you multiply all y-values by a negative 1 to get the correct orientation