21. Trigonometría aplicada a gráficos 2D

21.1 Introducción

Muchos problemas gráficos parecen distintos pero comparten la misma estructura: conocemos un ángulo y una distancia, y necesitamos descubrir cuánto avanzar en x y en y. Seno y coseno realizan esa conversión.

La trigonometría aparece en proyectiles, órbitas, ruedas, ondas, cámaras, radares, partículas y distribución radial de objetos. Entender su geometría permite utilizarla sin memorizar recetas aisladas.

21.2 El triángulo rectángulo

Un radio inclinado y sus proyecciones sobre los ejes forman un triángulo rectángulo. Respecto de un ángulo θ, la proyección horizontal es el cateto adyacente y la vertical es el cateto opuesto.

Si la hipotenusa mide r, despejamos: adyacente=r·cos θ y opuesto=r·sen θ.

21.3 Del ángulo a un vector

En el círculo unitario, el punto alcanzado por θ tiene coordenadas (cos θ, sen θ). Este par es un vector de longitud uno que apunta en la dirección del ángulo.

Para θ=0, la dirección es (1,0). Para θ=π/2, es (0,1). Los valores intermedios combinan ambas componentes.

21.4 Posición alrededor de un centro

Para situar un punto a distancia r de un centro C=(cx,cy), sumamos al centro el desplazamiento trigonométrico:

Estas son las ecuaciones paramétricas de la circunferencia. Si θ recorre de 0 a 2π, el punto completa una vuelta sin necesidad de comprobar pendientes ni cuadrantes.

21.5 Interpretación visual

El radio permanece constante mientras θ cambia. Por eso la punta conserva siempre la misma distancia al centro y describe una circunferencia.

21.6 Radianes en JavaScript

Math.sin, Math.cos y Math.tan reciben radianes. Si el ángulo está en grados, primero debemos convertirlo.

function puntoCircular(centro, radio, grados) {
  const angulo = grados * Math.PI / 180;
  return {
    x: centro.x + radio * Math.cos(angulo),
    y: centro.y + radio * Math.sin(angulo)
  };
}

const punto = puntoCircular({ x: 100, y: 100 }, 50, 0);
console.log(punto);
// { x: 150, y: 100 }

La llamada utiliza el centro (100,100), un radio de 50 y un ángulo de 0°. Por eso muestra { x: 150, y: 100 }: el punto queda 50 unidades a la derecha del centro.

21.7 La orientación del eje y

En matemáticas, y positivo apunta hacia arriba. En Canvas, y crece hacia abajo. Si usamos la fórmula con suma, los ángulos positivos se ven girar en sentido horario.

No existe una única elección obligatoria. Lo importante es documentar la convención y usarla coherentemente al dibujar, mover y calcular ángulos.

21.8 Simulación interactiva: del ángulo al punto

Modifica el ángulo, el radio y el centro. Observa el triángulo de proyecciones, el vector unitario y la posición final. Activa el modo pantalla para comparar orientaciones.

21.9 Movimiento circular uniforme

Si el ángulo cambia con el tiempo y el radio permanece fijo, obtenemos movimiento circular. La velocidad angular ω indica cuántos radianes se recorren por segundo.

Multiplicar por Δt hace que la animación sea independiente de la frecuencia de cuadros. Una vuelta por segundo corresponde a ω=2π rad/s.

21.10 Oscilaciones con seno y coseno

El seno y el coseno varían suavemente entre −1 y 1. Al escalarlos y trasladarlos creamos oscilaciones:

La amplitud controla la distancia máxima, la frecuencia la rapidez de repetición y la fase el punto donde comienza el ciclo. Esto sirve para flotación, respiración visual, péndulos y luces pulsantes.

21.11 Distribución radial de objetos

Para repartir n elementos uniformemente en un círculo, asignamos a cada uno una fracción de vuelta:

const centro = { x: 300, y: 180 };
const radio = 120;
const cantidad = 8;

function dibujarElemento(x, y, numero) {
  console.log(`Elemento ${numero}: (${x.toFixed(1)}, ${y.toFixed(1)})`);
}

for (let i = 0; i < cantidad; i++) {
  const angulo = i * Math.PI * 2 / cantidad;
  const x = centro.x + radio * Math.cos(angulo);
  const y = centro.y + radio * Math.sin(angulo);
  dibujarElemento(x, y, i + 1);
}

La salida muestra ocho elementos separados por 45° y sus coordenadas. El mismo patrón construye menús radiales, marcadores, vértices de polígonos regulares y emisores de partículas.

21.12 De un vector a un ángulo

La operación inversa utiliza Math.atan2(dy,dx). Devuelve el ángulo cuya dirección coincide con el vector:

atan2 reconoce los cuatro cuadrantes y funciona cuando dx=0. Es la herramienta adecuada para orientar un sprite hacia el cursor o un proyectil hacia un objetivo.

21.13 Aplicaciones y errores comunes

La trigonometría se aplica en órbitas, rotaciones, trayectorias, cámaras, ondas, polígonos, partículas, campos de visión y controles direccionales.

Ejemplo animado: campo de visión

El guardia hace girar un cono de visión. cos(θ) y sen(θ) determinan hacia dónde mira, mientras Math.atan2 calcula el ángulo hacia el objetivo para comprobar si está dentro del cono.

Errores comunes

• Enviar grados directamente a funciones que esperan radianes.
• Intercambiar seno y coseno sin considerar cuál eje corresponde a cada uno.
• Olvidar trasladar el resultado sumando el centro.
• Confundir radio con diámetro.
• No multiplicar la velocidad angular por Δt.
• Ignorar la orientación del eje y de pantalla.
• Usar atan(dy/dx) en lugar de atan2(dy,dx).

21.14 Qué debes recordar y conclusión

• (cos θ, sen θ) es una dirección unitaria.
• Multiplicar por r crea un desplazamiento de longitud r.
• Sumar el centro convierte el desplazamiento en posición.
• JavaScript utiliza radianes.
• Variar θ genera movimiento circular.
• El seno permite crear oscilaciones suaves.
• Math.atan2 transforma un vector en ángulo.

La trigonometría ofrece un puente directo entre orientación y coordenadas. Con unas pocas fórmulas podemos construir movimientos que serían difíciles de describir componente por componente.

En el próximo tema estudiaremos con mayor detalle seno, coseno y tangente.