20. Ángulos, grados y radianes

20.1 Introducción

Rotar una figura, orientar un personaje, apuntar un cañón, dibujar un arco o distribuir objetos alrededor de un centro exige representar ángulos. El ángulo describe una orientación o el cambio entre una dirección inicial y otra final.

Grados y radianes miden el mismo fenómeno. Elegir la unidad correcta y convertirla cuando corresponde evita errores frecuentes en animaciones y funciones trigonométricas.

20.2 ¿Qué es un ángulo?

Geométricamente, dos semirrectas con un origen común forman un ángulo. El origen es el vértice; una semirrecta es el lado inicial y la otra, el lado final.

En el plano cartesiano se toma habitualmente el eje x positivo como dirección cero. Desde allí, el sentido antihorario es positivo y el horario es negativo.

20.3 Medición en grados

Una vuelta completa se divide en 360 grados. Esta división permite reconocer fácilmente fracciones comunes de un giro.

Los ángulos no tienen que ser enteros: 22.5°, 0.1° o −47.8° son valores perfectamente válidos.

20.4 Medición en radianes

Un radián es el ángulo central que abarca un arco cuya longitud es igual al radio. Como una circunferencia mide 2πr, una vuelta contiene 2π radianes.

Los radianes simplifican las fórmulas de arcos, velocidad angular, derivadas y movimiento circular. Por eso JavaScript, Canvas y la mayoría de las bibliotecas matemáticas los utilizan.

20.5 Equivalencias en el círculo

20.6 Convertir grados y radianes

Partiendo de 180°=π rad obtenemos dos factores de conversión:

Ejemplo 1: 135°·π/180=3π/4 rad. Ejemplo 2: 5π/6·180/π=150°.

La unidad π se cancela algebraicamente en la segunda operación. Para cálculos numéricos usamos Math.PI.

20.7 Ángulos positivos y negativos

El signo representa el sentido del giro. Un valor positivo avanza antihorariamente y uno negativo lo hace en sentido horario, según la convención matemática.

Un ángulo negativo no es una longitud negativa: simplemente indica el sentido desde el cual se alcanza la orientación final.

20.8 Ángulos coterminales y normalización

Los ángulos que difieren en vueltas completas terminan en la misma dirección. Por ejemplo, 45°, 405° y −315° son coterminales.

Normalizar ayuda a mostrar valores comprensibles y comparar orientaciones, aunque en una animación también puede interesar conservar el número total de vueltas.

20.9 Círculo unitario y vectores

En el círculo de radio uno, la orientación θ llega al punto (cos θ, sen θ). Este punto funciona también como vector unitario:

Multiplicándolo por una longitud L obtenemos un desplazamiento con ese tamaño: (L cos θ, L sen θ). Así conectamos ángulos y movimiento.

20.10 Coordenadas de pantalla

El plano matemático hace crecer y hacia arriba, mientras que Canvas suele hacerlo hacia abajo. Para conservar una orientación matemática al dibujar usamos:

Si se utiliza la suma en y, los ángulos positivos se verán girar en sentido horario. Ambas convenciones son utilizables si todo el proyecto mantiene la misma regla.

20.11 Simulación interactiva: grados y radianes

Modifica el ángulo o selecciona una referencia. El laboratorio muestra su valor normalizado, equivalencia en radianes, vector unitario y cuadrante. El modo pantalla permite observar la inversión vertical.

20.12 Implementación en JavaScript

const aRadianes = grados => grados * Math.PI / 180;
const aGrados = radianes => radianes * 180 / Math.PI;

function normalizarGrados(angulo) {
  return ((angulo % 360) + 360) % 360;
}

function direccion(grados) {
  const rad = aRadianes(grados);
  return { x: Math.cos(rad), y: Math.sin(rad) };
}

console.log(aRadianes(180));          // 3.141592653589793
console.log(aGrados(Math.PI / 2));    // 90
console.log(normalizarGrados(-45));   // 315

const vector = direccion(45);
console.log(`(${vector.x.toFixed(3)}, ${vector.y.toFixed(3)})`);
// (0.707, 0.707)

Para recuperar el ángulo de un vector se utiliza Math.atan2(y,x). Esta función determina correctamente el cuadrante y acepta una componente x igual a cero.

const origen = { x: 2, y: 1 };
const objetivo = { x: 7, y: 5 };

const dx = objetivo.x - origen.x;
const dy = objetivo.y - origen.y;
const anguloRad = Math.atan2(dy, dx);
const anguloGrados = anguloRad * 180 / Math.PI;

console.log(anguloRad.toFixed(3) + " rad"); // 0.675 rad
console.log(anguloGrados.toFixed(2) + "°"); // 38.66°

En este ejemplo, el vector desde el origen hasta el objetivo es (5, 4) y su orientación es aproximadamente 38.66°.

20.13 Aplicaciones y errores comunes

Los ángulos controlan orientación de sprites, disparos, arcos, medidores, órbitas, radares, cámaras y velocidad angular.

Ejemplo animado: orientar y disparar

La nave calcula el ángulo hacia el objetivo con Math.atan2(dy, dx). Luego usa cos(θ) y sen(θ) para orientar el sprite y definir la velocidad del disparo.

Errores comunes

• Enviar grados directamente a Math.sin o Math.cos.
• Creer que π es una vuelta completa en lugar de media vuelta.
• Usar Math.atan(y/x) y perder información del cuadrante.
• Olvidar la inversión del eje y en pantalla.
• Mezclar grados por segundo y radianes por segundo.
• Comparar 359° y 1° como si estuvieran separados por 358°.
• No normalizar valores acumulados cuando se muestran al usuario.

20.14 Qué debes recordar y conclusión

• 360°=2π rad y 180°=π rad.
• Los radianes relacionan directamente ángulo y arco.
• JavaScript trabaja con radianes en sus funciones trigonométricas.
• Los ángulos coterminales difieren en vueltas completas.
• (cos θ, sen θ) produce una dirección unitaria.
• Math.atan2 obtiene la orientación de un vector.
• La convención del eje y debe mantenerse en toda la escena.

Comprender las dos unidades permite comunicar ángulos de forma intuitiva y utilizarlos correctamente en cálculos. Esta base será esencial para aplicar seno, coseno y tangente al movimiento y al dibujo 2D.

En el próximo tema estudiaremos trigonometría aplicada a gráficos 2D.