Las funciones trigonométricas permiten relacionar ángulos con posiciones, ondas y movimientos periódicos. Son fundamentales en gráficos, animaciones, simulaciones y videojuegos.
Las funciones trigonométricas nacen del estudio de los triángulos y los círculos, pero en programación aparecen constantemente: rotaciones, oscilaciones, ondas, movimiento circular, cámaras, partículas y gráficos.
Las funciones más usadas son seno, coseno y tangente.
En matemáticas se pueden medir ángulos en grados o radianes. En JavaScript, las funciones trigonométricas usan radianes.
Por eso, antes de usar grados con Math.sin, Math.cos o Math.tan, debemos convertirlos a radianes.
function gradosARadianes(grados) {
return grados * Math.PI / 180;
}
console.log(gradosARadianes(0));
console.log(gradosARadianes(90));
console.log(gradosARadianes(180));El seno de un ángulo se usa para obtener una componente vertical en el círculo unitario. Sus valores están entre -1 y 1.
function senoGrados(grados) {
return Math.sin(grados * Math.PI / 180);
}
console.log(senoGrados(0));
console.log(senoGrados(90));
console.log(senoGrados(270));El coseno de un ángulo se usa para obtener una componente horizontal en el círculo unitario. También produce valores entre -1 y 1.
function cosenoGrados(grados) {
return Math.cos(grados * Math.PI / 180);
}
console.log(cosenoGrados(0));
console.log(cosenoGrados(90));
console.log(cosenoGrados(180));La tangente relaciona seno y coseno:
La tangente puede crecer mucho cerca de ángulos donde el coseno se acerca a cero.
function tangenteGrados(grados) {
return Math.tan(grados * Math.PI / 180);
}
console.log(tangenteGrados(0));
console.log(tangenteGrados(45));
console.log(tangenteGrados(80));Presioná ▶ / ⏸ para ver cómo gira el ángulo y cómo se construyen geométricamente el seno, el coseno y la tangente en el círculo unitario.
| Ángulo | Radianes | Seno | Coseno |
|---|---|---|---|
| 0° | 0 | 0 | 1 |
| 90° | π/2 | 1 | 0 |
| 180° | π | 0 | -1 |
| 270° | 3π/2 | -1 | 0 |
| 360° | 2π | 0 | 1 |
Para ubicar un punto sobre un círculo usamos coseno para la coordenada x y seno para la coordenada y.
function puntoEnCirculo(anguloGrados, radio, centroX, centroY) {
const angulo = anguloGrados * Math.PI / 180;
return {
x: centroX + Math.cos(angulo) * radio,
y: centroY + Math.sin(angulo) * radio
};
}
console.log(puntoEnCirculo(0, 100, 200, 200));
console.log(puntoEnCirculo(90, 100, 200, 200));El seno y el coseno sirven para crear movimientos que suben y bajan suavemente.
function posicionOscilante(tiempo, centro, amplitud) {
return centro + Math.sin(tiempo) * amplitud;
}
console.log(posicionOscilante(0, 100, 20));
console.log(posicionOscilante(Math.PI / 2, 100, 20));
console.log(posicionOscilante(Math.PI, 100, 20));En videojuegos y simulaciones, podemos convertir un ángulo en un vector de dirección.
function direccionDesdeAngulo(grados) {
const radianes = grados * Math.PI / 180;
return {
x: Math.cos(radianes),
y: Math.sin(radianes)
};
}
console.log(direccionDesdeAngulo(0));
console.log(direccionDesdeAngulo(90));
console.log(direccionDesdeAngulo(45));Al trabajar con números decimales, JavaScript puede devolver valores muy pequeños en lugar de cero exacto.
const valor = Math.cos(Math.PI / 2);
console.log(valor);
console.log(Math.abs(valor) < 0.000001);Por eso, al comparar resultados trigonométricos, suele usarse una tolerancia.
Las funciones trigonométricas se repiten. En seno y coseno, el patrón se repite cada 2π radianes o 360°.
| Función | Uso frecuente | Rango típico |
|---|---|---|
| Seno | Componente vertical u oscilación | [-1, 1] |
| Coseno | Componente horizontal u oscilación desplazada | [-1, 1] |
| Tangente | Pendientes y relaciones angulares | No está acotada |
Las funciones trigonométricas son herramientas fundamentales para representar ángulos, ciclos y movimientos periódicos. En programación aparecen cada vez que trabajamos con rotación, dirección, ondas u oscilaciones.
En el próximo tema veremos con más detalle seno, coseno y tangente.