29. Rectángulos y cuadrados

29.1 Introducción

Un rectángulo es un cuadrilátero con cuatro ángulos rectos. Sus lados opuestos son paralelos e iguales. Esta estructura sencilla permite representarlo con pocos datos y realizar cálculos muy rápidos.

Un cuadrado es simultáneamente rectángulo y rombo: conserva los cuatro ángulos de 90° y además tiene sus cuatro lados iguales.

29.2 Elementos y propiedades

• Vértices: cuatro puntos donde se encuentran los lados.
• Lados: dos pares de segmentos paralelos.
• Ancho w y alto h: dimensiones perpendiculares.
• Centro: punto donde se cortan las diagonales.
• Diagonales: segmentos que unen vértices opuestos; son iguales y se bisecan.

En un cuadrado, las diagonales también son perpendiculares y dividen los ángulos de los vértices en partes de 45°.

29.3 Interpretación visual

29.4 Formas de representar un rectángulo

En programación se emplean principalmente dos convenciones:

Conviene documentar si x,y representa la esquina superior izquierda o el centro para evitar desplazamientos inesperados.

29.5 Perímetro y área

Para w=6 y h=4, el perímetro es 20 y el área 24. Si duplicamos ambas dimensiones, el perímetro se duplica pero el área se cuadruplica.

29.6 Diagonal y teorema de Pitágoras

Una diagonal es la hipotenusa de un triángulo rectángulo cuyos catetos son el ancho y el alto:

En un rectángulo de 6×4, d=√52≈7.21. El centro queda a la mitad de cada diagonal, por lo que la distancia del centro a cualquier vértice es d/2.

29.7 Obtener vértices y centro

Si (x,y) es la esquina superior izquierda de un rectángulo de ancho w y alto h en coordenadas de pantalla:

En el plano matemático puede elegirse otra esquina como referencia; lo importante es mantener una convención coherente.

29.8 Comprobar si un punto está dentro

Para un rectángulo alineado con los ejes, basta comparar cada coordenada con los límites:

Usar ≤ incluye el borde. Con desigualdades estrictas, los puntos de los lados se consideran exteriores. Esta decisión debe responder a las reglas de la aplicación.

29.9 Rectángulos alineados y rotados

Un AABB permanece alineado con los ejes y se describe con mínimos y máximos. Es rápido para colisiones. Un OBB puede rotar y necesita centro, orientación y semitamaños.

Para probar un punto contra un OBB, trasladamos el punto respecto del centro, aplicamos la rotación inversa y comprobamos el rectángulo local:

29.10 Simulación interactiva

Modifica ancho, alto, rotación y el punto P. El laboratorio calcula medidas y transforma el punto a coordenadas locales para decidir si pertenece al rectángulo.

29.11 Calcular los datos de un rectángulo

Sin utilizar Canvas, podemos obtener sus vértices, área, perímetro y diagonal a partir de la esquina superior izquierda y el tamaño.

const rect = {
  x: 2, y: 1,
  ancho: 6, alto: 4
};

const vertices = [
  { x: rect.x, y: rect.y },
  { x: rect.x + rect.ancho, y: rect.y },
  { x: rect.x + rect.ancho, y: rect.y + rect.alto },
  { x: rect.x, y: rect.y + rect.alto }
];

const area = rect.ancho * rect.alto;
const perimetro = 2 * (rect.ancho + rect.alto);
const diagonal = Math.hypot(rect.ancho, rect.alto);

vertices.forEach((p, i) =>
  console.log(`Vértice ${i + 1}: (${p.x}, ${p.y})`)
);
console.log(`Área: ${area}`);
console.log(`Perímetro: ${perimetro}`);
console.log(`Diagonal: ${diagonal.toFixed(2)}`);

Al presionar Ejecutar, se muestran los cuatro vértices y las medidas del rectángulo. Este cálculo es independiente de cualquier sistema de dibujo.

29.12 Funciones para límites y pertenencia

function contienePunto(rect, p) {
  return p.x >= rect.x &&
         p.x <= rect.x + rect.ancho &&
         p.y >= rect.y &&
         p.y <= rect.y + rect.alto;
}

function esCuadrado(ancho, alto, epsilon=1e-9) {
  return Math.abs(ancho - alto) < epsilon;
}

const rectangulo = { x: 2, y: 1, ancho: 6, alto: 4 };
const puntos = [
  { x: 4, y: 3 },
  { x: 8, y: 5 },
  { x: 9, y: 2 }
];

puntos.forEach(punto => {
  const estado = contienePunto(rectangulo, punto) ? "dentro" : "fuera";
  console.log(`(${punto.x}, ${punto.y}): ${estado}`);
});

console.log(`6 × 4 es cuadrado: ${esCuadrado(6, 4)}`);
console.log(`5 × 5 es cuadrado: ${esCuadrado(5, 5)}`);

Al presionar Ejecutar, se clasifican tres puntos y se comprueban dos tamaños. Una tolerancia evita que pequeños errores de coma flotante impidan reconocer lados que deberían ser iguales.

29.13 Aplicaciones y errores comunes

Se utilizan en maquetación, botones, ventanas, selección, cámaras, sprites, atlas de texturas, recortes, límites de mapas y detección de colisiones.

Ejemplo animado: cámara, mapa y colisiones

El personaje se desplaza dentro de los límites del mapa. La ventana azul representa la cámara que lo sigue; los rectángulos rojos son obstáculos y cambian de color cuando sus límites AABB se solapan con los del personaje.

Errores comunes

• Confundir ancho y alto con las coordenadas máximas.
• Mezclar una representación basada en centro con otra basada en esquina.
• Usar ancho o alto negativos sin normalizar los límites.
• Aplicar una prueba AABB directamente a un rectángulo rotado.
• Confundir diagonal con semidiagonal.
• Comparar lados decimales con igualdad exacta.

29.14 Qué debes recordar y conclusión

• Todo rectángulo tiene cuatro ángulos rectos y lados opuestos iguales.
• Un cuadrado es un rectángulo con cuatro lados iguales.
• P=2(w+h), A=wh y d=√(w²+h²).
• Las diagonales son iguales y se cortan en sus puntos medios.
• Un AABB se prueba mediante límites; un OBB requiere coordenadas locales.
• La convención de posición debe estar claramente definida.

La estructura rectangular es simple, eficiente y ubicua. Dominar sus representaciones y transformaciones permite construir interfaces y sistemas de colisión sólidos.

En el próximo tema estudiaremos triángulos y sus propiedades.