43. Interpretación geométrica de las funciones trigonométricas

43.1 Introducción

La trigonometría no es solo una colección de fórmulas. Su interpretación geométrica permite ver qué representan realmente el seno, el coseno y la tangente.

En programación, esta mirada es muy útil para ubicar objetos, calcular direcciones, rotar elementos y generar movimientos circulares.

43.2 El círculo unitario

El círculo unitario es un círculo de radio 1 con centro en el origen. Si un punto se mueve sobre ese círculo, su posición depende de un ángulo.

Por eso se dice que el coseno representa la coordenada horizontal y el seno representa la coordenada vertical.

43.3 Punto sobre el círculo unitario

Con un ángulo podemos obtener directamente las coordenadas del punto correspondiente.

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

  return {
    x: Math.cos(radianes),
    y: Math.sin(radianes)
  };
}

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

43.4 Círculo con cualquier radio

Si el radio no es 1, basta con multiplicar las coordenadas por el radio.

function puntoEnCirculo(grados, radio, centroX, centroY) {
  const radianes = grados * Math.PI / 180;

  return {
    x: centroX + Math.cos(radianes) * radio,
    y: centroY + Math.sin(radianes) * radio
  };
}

console.log(puntoEnCirculo(0, 50, 100, 100));
console.log(puntoEnCirculo(90, 50, 100, 100));
console.log(puntoEnCirculo(180, 50, 100, 100));

43.5 Signos por cuadrante

El signo del seno y del coseno cambia según el cuadrante donde se encuentre el ángulo.

43.6 Detectar el cuadrante

Podemos normalizar un ángulo y detectar en qué cuadrante se encuentra.

function normalizarAngulo(grados) {
  return ((grados % 360) + 360) % 360;
}

function cuadrante(grados) {
  const angulo = normalizarAngulo(grados);

  if (angulo === 0 || angulo === 90 || angulo === 180 || angulo === 270) {
    return "Eje";
  }

  if (angulo < 90) return "I";
  if (angulo < 180) return "II";
  if (angulo < 270) return "III";
  return "IV";
}

console.log(cuadrante(45));
console.log(cuadrante(135));
console.log(cuadrante(-30));

43.7 Interpretación de la tangente

Geométricamente, la tangente puede verse como una pendiente. Para un ángulo dado, expresa cuánto cambia la coordenada vertical por cada unidad horizontal.

Cuando el coseno se acerca a cero, la pendiente crece mucho. Eso ocurre cerca de 90° y 270°.

43.8 Pendiente geométrica

Este ejemplo obtiene la pendiente de una recta a partir del ángulo que forma con el eje horizontal.

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

  if (Math.abs(coseno) < 0.000001) {
    return "Recta vertical";
  }

  return Math.sin(radianes) / coseno;
}

console.log(pendienteGeometrica(0));
console.log(pendienteGeometrica(45));
console.log(pendienteGeometrica(90));

43.9 Dirección de un vector

Un vector de dirección puede construirse con coseno y seno. Si el vector tiene longitud 1, se llama vector unitario.

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

  return {
    x: Math.cos(radianes),
    y: Math.sin(radianes)
  };
}

console.log(vectorDireccion(0));
console.log(vectorDireccion(45));
console.log(vectorDireccion(90));

43.10 Aplicación en movimiento

Si multiplicamos el vector de dirección por una velocidad, obtenemos el desplazamiento por paso de tiempo.

function avanzar(posicion, grados, velocidad) {
  const radianes = grados * Math.PI / 180;

  return {
    x: posicion.x + Math.cos(radianes) * velocidad,
    y: posicion.y + Math.sin(radianes) * velocidad
  };
}

const jugador = { x: 100, y: 80 };

console.log(avanzar(jugador, 0, 10));
console.log(avanzar(jugador, 90, 10));

43.11 Coordenadas de pantalla

En muchos entornos gráficos, el eje Y crece hacia abajo. Eso puede invertir la interpretación visual del seno.

43.12 Ajustar dirección para pantalla

Si se desea que 90° apunte hacia arriba en una pantalla, se puede restar la componente vertical.

function avanzarEnPantalla(posicion, grados, velocidad) {
  const radianes = grados * Math.PI / 180;

  return {
    x: posicion.x + Math.cos(radianes) * velocidad,
    y: posicion.y - Math.sin(radianes) * velocidad
  };
}

const nave = { x: 200, y: 200 };

console.log(avanzarEnPantalla(nave, 0, 20));
console.log(avanzarEnPantalla(nave, 90, 20));

43.13 Distancia proyectada

El coseno y el seno también permiten proyectar una distancia sobre los ejes horizontal y vertical.

function proyectar(distancia, grados) {
  const radianes = grados * Math.PI / 180;

  return {
    horizontal: distancia * Math.cos(radianes),
    vertical: distancia * Math.sin(radianes)
  };
}

console.log(proyectar(100, 0));
console.log(proyectar(100, 30));
console.log(proyectar(100, 60));

43.14 Aplicaciones en programación

• Ubicar elementos alrededor de un centro.
• Calcular trayectorias circulares.
• Mover personajes o partículas según un ángulo.
• Calcular pendientes e inclinaciones.
• Crear efectos de rotación y oscilación.

43.15 Errores comunes

• Confundir la coordenada horizontal con el seno y la vertical con el coseno.
• Olvidar que el eje Y de la pantalla puede crecer hacia abajo.
• No normalizar ángulos negativos o mayores que 360°.
• Usar tangente cerca de 90° sin controlar valores extremos.

43.16 Qué debes recordar de este tema

• En el círculo unitario, el coseno es la coordenada X y el seno es la coordenada Y.
• Los signos de seno y coseno dependen del cuadrante.
• La tangente representa una pendiente geométrica.
• La interpretación visual puede cambiar en sistemas de coordenadas de pantalla.
• La trigonometría convierte ángulos en posiciones y direcciones.

43.17 Conclusión

Interpretar geométricamente las funciones trigonométricas ayuda a entender por qué aparecen en tantos programas gráficos. Seno, coseno y tangente conectan ángulos con coordenadas, pendientes y movimientos concretos.