26. Circunferencias y círculos
La circunferencia reúne los puntos situados a una distancia fija del centro; el círculo incluye también todo su interior. Estas figuras aparecen en indicadores, órbitas, colisiones, partículas y controles 2D.
26.1 Introducción
Los objetos redondos son frecuentes porque su geometría no depende de la orientación. Una colisión circular, por ejemplo, puede decidirse midiendo únicamente la distancia entre centros.
Para utilizar correctamente estas figuras debemos distinguir borde e interior, conocer sus medidas y convertir ángulos en puntos de la circunferencia.
26.2 Circunferencia y círculo
La circunferencia es la curva cerrada cuyos puntos están a distancia r del centro. El círculo es la región formada por esa curva y todos los puntos interiores.
círculo: distancia al centro ≤ r
En Canvas, stroke() dibuja la circunferencia y fill() pinta el círculo.
26.3 Centro, radio y diámetro
- Centro C=(cx,cy): punto de referencia.
- Radio r: distancia desde C hasta el borde.
- Diámetro d: segmento que atraviesa el centro y une dos puntos del borde.
r = d/2
El radio debe ser no negativo. Un radio cero produce una figura degenerada reducida al centro.
26.4 Ecuación cartesiana
Un punto P=(x,y) pertenece a la circunferencia si su distancia al centro es r. Al elevar al cuadrado evitamos la raíz:
Para el círculo reemplazamos la igualdad por ≤. Si el resultado es mayor que r², el punto está fuera.
26.5 Interpretación visual
26.6 Longitud de la circunferencia
La longitud del borde, también llamada perímetro, es proporcional al radio:
Si r=3, L=6π≈18.85 unidades. Esta medida sirve para calcular recorridos de ruedas, arcos y distribución uniforme sobre el borde.
26.7 Área del círculo
El área mide la superficie interior:
Duplicar el radio cuadruplica el área. Esta diferencia respecto de la longitud es importante al escalar zonas de influencia o probabilidades espaciales.
26.8 Parametrización por ángulo
Podemos obtener cualquier punto del borde usando un ángulo θ:
y = cy + r·sen θ
Al recorrer θ desde 0 hasta 2π se completa la circunferencia. En pantalla puede invertirse el signo de la componente vertical.
26.9 Tangente y normal
Una recta tangente toca la circunferencia en un solo punto T. El radio CT es perpendicular a la tangente.
dirección tangente = (−normal.y, normal.x)
Estas direcciones se utilizan para rebotes, reflexión, deslizamiento y orientación de objetos sobre una trayectoria.
26.10 Simulación interactiva
Modifica centro, radio y punto de prueba. El laboratorio determina si el punto está dentro, sobre el borde o fuera, y calcula longitud y área.
26.11 Generar puntos de una circunferencia
Sin utilizar Canvas, podemos calcular varios puntos del borde recorriendo una vuelta completa.
const centro = { x: 2, y: 1 };
const radio = 3;
const cantidad = 8;
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);
console.log(
`Punto ${i + 1}: (${x.toFixed(2)}, ${y.toFixed(2)})`
);
}Al presionar Ejecutar, se muestran ocho puntos separados uniformemente sobre la circunferencia. El recorrido llega hasta una vuelta completa de 2π radianes.
26.12 Comprobar pertenencia
function clasificarPunto(p, centro, radio, tolerancia = 1e-6) {
const dx = p.x - centro.x;
const dy = p.y - centro.y;
const diferencia = dx * dx + dy * dy - radio * radio;
if (Math.abs(diferencia) < tolerancia) return "borde";
return diferencia < 0 ? "dentro" : "fuera";
}
const centro = { x: 0, y: 0 };
const radio = 5;
console.log(`(2, 1): ${clasificarPunto({ x: 2, y: 1 }, centro, radio)}`);
console.log(`(3, 4): ${clasificarPunto({ x: 3, y: 4 }, centro, radio)}`);
console.log(`(6, 0): ${clasificarPunto({ x: 6, y: 0 }, centro, radio)}`);Al presionar Ejecutar, los puntos se clasifican como dentro, borde y fuera. Comparar cuadrados evita calcular una raíz y la tolerancia absorbe pequeños errores decimales.
26.13 Aplicaciones y errores comunes
Se usan en colisiones, botones radiales, minimapas, órbitas, zonas de alcance, pinceles, luces, partículas y ruedas.
Ejemplo animado: radar y zona de alcance
El radar combina circunferencias concéntricas, un haz giratorio y objetivos móviles. Cada objetivo cambia de color cuando la distancia entre centros es menor o igual que el radio de detección.
Errores comunes
- Confundir radio con diámetro.
- Usar 360 como ángulo final de Canvas en vez de 2π.
- Confundir circunferencia con círculo.
- Olvidar elevar el radio al cuadrado al comparar distancias.
- No usar tolerancia para decidir si un punto está en el borde.
- Aplicar escalas diferentes en x e y y esperar conservar un círculo.
26.14 Qué debes recordar y conclusión
- La circunferencia es el borde; el círculo incluye el interior.
- d=2r, L=2πr y A=πr².
- (x−cx)²+(y−cy)²=r² describe el borde.
- (cx+r cos θ,cy+r sen θ) genera puntos del borde.
- El radio es perpendicular a la tangente.
- Las distancias al cuadrado aceleran pruebas de pertenencia.
La geometría circular combina distancia, ángulos y trigonometría en una estructura sencilla y potente. Dominarla facilita numerosos efectos y pruebas espaciales.
En el próximo tema estudiaremos arcos y sectores circulares.