jhonnymichel/gamedev-trigonometry.md

## gamedev-trigonometry.md

      
    Raw
  

              gamedev-trigonometry.md
            
          
    Introduction

two distinct points (for example, a game object position and the mouse cursor position) in an area can always be two corners of a Right Triangle (Triângulo-retângulo in ptbr). A triangle has three sides: The Hypotenuse, the Adjacent and the Opposite.
The distance between two points in the X axis corresponds to the Adjacent side of a triangle, The distance between two points in the Y axis corresponds to the Opposite side of a triangle.
The Hypotenuse is the shortest distance between the two points.
This means we can use trigonometry to handle many interactions between objects when programming visual stuff.
This document covers the basics of trigonometry for game development.
Find the angle between two points

Let's say we want to make our game character look at the direction the mouse cursor is pointing. We need to know the exact angle the character needs to rotate to so it can "look" at the mouse cursor.
We can find the Opposite and the Adjacent quite easily (see in the code example below).
The only value we don't know is the Hypotenuse, the direct line that connect the two points.
We need to find the Hypotenuse angle (the Hypotenuse length is not useful for us this time).
To find the angle of one of the sides of a triangle, we use the Inverse tangent function (arctan). To find the Hypotenuse angle specifically, the footprint for the formula would be:
angle = arctan(opposite / adjacent)

The arctan function is present in many math libraries by the name of atan. there is also a improved version of the function called atan2.
const deltaY = mouse.y - character.y; // This is length of the opposite side of the triangle
const deltaX = mouse.x - character.x; // This is length of the adjacent side of the triangle
const angle = Math.atan(deltaY / deltaX);
The atan method has a concerning issue: it can't handle 0. sometimes, maybe the delta between mouse.y and character.y can be 0, for example. also, the angle Math.atan provides is the internal angle of the triangle. we generally want the external angle (Editor Note:  explain this better later). The atan2 method comes to the rescue:
const angle = Math.atan2(deltaY, deltaX);
Now we can use the angle to make the character face towards the cursor position. but before, in most cases, we need to convert the angle from radians to degrees.
Converting Radians to Degrees, and vice-versa

180deg = 3.14rad.
We can figure the formula out now, can't we?
const radToDegree = rad => rad / Math.PI * 180;
const degreeToRad = deg => deg / 180 * Math.PI;
That is it.
Find the speed values to create movement towards an angle

Now that we made our character look at the cursor direction, we now want to make him move towards the cursor position.
The simpliest, dumb way

We don't need to actually find the angle to create movement towards it. that would be the most efficient and trigonometry-based way of achieving it, but we can use basic proportion logic to find the movement values as well, since we have the position of the target we want to move towards.
Grab the X distance and the Y distance, assume one of them is 1 and calculate the proportional value of the other.
const deltaX = mouse.x - character.x;
const deltaY = mouse.y - character.y;

const factorX = 1;
const factorY = deltaY / deltaX;
The more sofisticated way using triangles

We need to find the cosine and the sine of the triangle. Cosine and Sine are the ratio of the Adjacent and the Opposite, respectively, compared to the hypotenuse. Which means the Cosine is the X movement factor and the Sine is the Y movement factor.
const angle = Math.atan2(mouse.y - character.y, mouse.x - character.x);
const factorX = Math.cos(angle);
const factorY = Math.sin(angle);
Find the distance between two points

Let's say we need to know the distance between the mouse cursor and the character, or, changing the example to make it better: we need to know the distance between the character and an enemy, to trigger some action based on it.
We basically need to find the hypotenuse length. and we do so by using the Pythagorean Theorem:
a² = b² + c²

in our case, a is the Hypotenuse, b is the Adjacent and c is the Opposite.
const deltaY = mouse.y - character.y; // This is length of the opposite side of the triangle
const deltaX = mouse.x - character.x; // This is length of the adjacent side of the triangle
const distance = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY));