42. Seno, coseno y tangente

42.1 Introducción

Las tres funciones trigonométricas más usadas en programación son seno, coseno y tangente. Todas reciben un ángulo y devuelven un número.

En JavaScript se calculan con Math.sin, Math.cos y Math.tan. Estas funciones esperan el ángulo en radianes.

42.2 Recordatorio sobre radianes

Si un programa trabaja con grados, primero debe convertirlos a radianes.

function aRadianes(grados) {
  return grados * Math.PI / 180;
}

console.log(aRadianes(90));
console.log(aRadianes(180));
console.log(aRadianes(360));

42.3 Seno

El seno se asocia con la componente vertical de un punto que gira alrededor de un círculo. Su resultado siempre está entre -1 y 1.

function senoEnGrados(grados) {
  const radianes = grados * Math.PI / 180;
  return Math.sin(radianes);
}

console.log(senoEnGrados(0));
console.log(senoEnGrados(90));
console.log(senoEnGrados(270));

42.4 Coseno

El coseno se asocia con la componente horizontal de un punto que gira alrededor de un círculo. También devuelve valores entre -1 y 1.

function cosenoEnGrados(grados) {
  const radianes = grados * Math.PI / 180;
  return Math.cos(radianes);
}

console.log(cosenoEnGrados(0));
console.log(cosenoEnGrados(90));
console.log(cosenoEnGrados(180));

42.5 Tangente

La tangente relaciona el seno con el coseno. Puede interpretarse como una pendiente asociada al ángulo.

A diferencia de seno y coseno, la tangente no está limitada entre -1 y 1. Además, no está definida cuando el coseno vale 0.

function tangenteEnGrados(grados) {
  const radianes = grados * Math.PI / 180;
  return Math.tan(radianes);
}

console.log(tangenteEnGrados(0));
console.log(tangenteEnGrados(45));
console.log(tangenteEnGrados(60));

42.6 Tabla comparativa

Algunos valores aparecen con mucha frecuencia en animación, gráficos y geometría computacional.

42.7 Generar una tabla con JavaScript

Podemos calcular los valores de varios ángulos y redondearlos para mostrarlos de forma legible.

function redondear(valor) {
  return Math.round(valor * 1000) / 1000;
}

function trigonometria(grados) {
  const radianes = grados * Math.PI / 180;

  return {
    grados,
    seno: redondear(Math.sin(radianes)),
    coseno: redondear(Math.cos(radianes)),
    tangente: redondear(Math.tan(radianes))
  };
}

console.log(trigonometria(0));
console.log(trigonometria(30));
console.log(trigonometria(45));
console.log(trigonometria(60));

42.8 Crear una dirección con seno y coseno

Para mover un objeto según un ángulo, se usa el coseno para la velocidad horizontal y el seno para la velocidad vertical.

function direccion(anguloGrados, velocidad) {
  const radianes = anguloGrados * Math.PI / 180;

  return {
    vx: Math.cos(radianes) * velocidad,
    vy: Math.sin(radianes) * velocidad
  };
}

console.log(direccion(0, 5));
console.log(direccion(45, 5));
console.log(direccion(90, 5));

Con 0° el movimiento va hacia la derecha. Con 90° el movimiento va hacia abajo o hacia arriba según cómo esté definido el eje vertical en el sistema gráfico.

42.9 Oscilación con seno

El seno es muy útil para crear movimientos que suben y bajan de manera suave.

function alturaOscilante(tiempo, centro, amplitud, velocidad) {
  return centro + Math.sin(tiempo * velocidad) * amplitud;
}

console.log(alturaOscilante(0, 100, 30, 1));
console.log(alturaOscilante(1, 100, 30, 1));
console.log(alturaOscilante(2, 100, 30, 1));

42.9.1 Aplicación: banner con oscilación

El siguiente banner utiliza Math.sin(tiempo · velocidad) para hacer flotar el texto, mover partículas y generar la onda de fondo. Cada elemento usa una fase diferente para que los movimientos no estén sincronizados.

Ajustá los controles para ver cómo cambia el comportamiento:

42.10 Pendiente con tangente

La tangente puede usarse para obtener la pendiente de una recta cuando conocemos el ángulo.

function pendienteDesdeAngulo(grados) {
  const radianes = grados * Math.PI / 180;
  return Math.tan(radianes);
}

console.log(pendienteDesdeAngulo(0));
console.log(pendienteDesdeAngulo(30));
console.log(pendienteDesdeAngulo(45));

Cuando el ángulo se acerca a 90°, la pendiente crece mucho. Por eso conviene tratar ese caso con cuidado.

42.11 Evitar errores cerca de 90°

En cálculos con tangente, los ángulos cercanos a 90° pueden producir valores enormes. Una función puede detectar esa situación antes de usar el resultado.

function tangenteSegura(grados) {
  const radianes = grados * Math.PI / 180;
  const coseno = Math.cos(radianes);

  if (Math.abs(coseno) < 0.000001) {
    return "No definida";
  }

  return Math.sin(radianes) / coseno;
}

console.log(tangenteSegura(45));
console.log(tangenteSegura(90));

42.12 Precisión numérica

Algunos resultados que matemáticamente deberían ser cero pueden aparecer como números muy pequeños debido a la representación interna de los decimales.

const resultado = Math.cos(Math.PI / 2);

console.log(resultado);
console.log(Math.abs(resultado) < 0.000001);

En programación es común comparar con una tolerancia en vez de exigir igualdad exacta.

42.13 Aplicaciones comunes

• Seno: ondas, vibración, respiración visual, movimiento vertical.
• Coseno: movimiento horizontal, rotaciones, posiciones circulares.
• Tangente: pendientes, inclinaciones, proyección y cálculo de ángulos.

42.14 Errores comunes

• Pasar grados directamente a Math.sin, Math.cos o Math.tan.
• Suponer que la tangente siempre tiene valores pequeños.
• No contemplar los casos donde el coseno es cero o casi cero.
• Comparar resultados decimales con igualdad exacta.

42.15 Qué debes recordar de este tema

• JavaScript trabaja con radianes en sus funciones trigonométricas.
• El seno suele representar una componente vertical.
• El coseno suele representar una componente horizontal.
• La tangente representa una relación entre seno y coseno, y puede crecer indefinidamente.
• Estas funciones son esenciales para movimiento, rotación, ondas y geometría.

42.16 Conclusión

Seno, coseno y tangente transforman ángulos en valores que un programa puede usar. Con ellas se pueden construir movimientos, calcular direcciones, generar ondas y resolver problemas geométricos de forma compacta.