37. Escalado de objetos

37.1 Introducción

El escalado permite ampliar, reducir, estirar, comprimir o invertir objetos. Se utiliza en zoom, animaciones, interfaces adaptables, sprites, efectos espejo y jerarquías.

A diferencia de la rotación y la traslación, normalmente cambia las longitudes y el área. El resultado también depende del punto elegido como pivote.

37.2 Escalado respecto del origen

Con factores sx y sy:

Un factor 2 duplica las distancias en ese eje; 0.5 las reduce a la mitad. El origen permanece fijo porque multiplicar cero produce cero.

37.3 Interpretación visual

37.4 Escalado uniforme

Si sx=sy=s, el escalado es uniforme. Conserva ángulos, paralelismo y proporciones, por lo que la figura resultante es semejante a la original.

Cuando s>1 amplía; si 0<s<1 reduce. Con s=1 se obtiene la identidad.

37.5 Escalado no uniforme

Si sx≠sy, cada eje cambia en distinta proporción. Un círculo se convierte en elipse y un cuadrado puede convertirse en rectángulo.

El paralelismo se conserva, pero generalmente cambian ángulos, proporciones y longitudes de manera dependiente de la dirección.

37.6 Escalado alrededor de un pivote

Para mantener fijo C=(cx,cy), trasladamos el punto a coordenadas relativas, escalamos y regresamos:

Escalar alrededor del centro cambia el tamaño sin mover ese centro. Con un pivote en una esquina, esa esquina permanece fija y el objeto crece hacia los otros lados.

37.7 Factores cero y degeneración

Si sx=0, todos los puntos terminan sobre la recta vertical x=cx. Si sy=0, terminan sobre y=cy. Si ambos son cero, todo el objeto colapsa en el pivote.

Una transformación con factor cero pierde información y no tiene inversa. El área resultante es cero.

37.8 Escalas negativas y orientación

Un factor negativo sitúa los puntos al lado opuesto del pivote en ese eje. Por tanto, combina escalado y reflexión:

Si sx·sy<0, se invierte la orientación del contorno. Si ambos son negativos, la orientación se conserva y el efecto equivale a un giro de 180° más el cambio de tamaño.

37.9 Perímetro, área y determinante

El determinante de la parte lineal es det=sx·sy. Su valor absoluto indica el factor de área y su signo la orientación.

Con escala uniforme, el perímetro se multiplica por |s|. Con escala no uniforme no existe un único factor de perímetro para una figura arbitraria.

37.10 Escala inversa y composición

Si sx y sy son distintos de cero:

Dos escalas con el mismo pivote se componen multiplicando componentes: (sx₁·sx₂,sy₁·sy₂). Escala y traslación no suelen conmutar, porque escalar después de trasladar también afecta el desplazamiento.

37.11 Escalado, imágenes y trazos

Al escalar una figura se modifican su geometría y sus dimensiones. Si se desea un borde de grosor visual constante, el trazo debe mantenerse separado de la transformación geométrica.

Escalar una imagen por encima de su resolución original puede revelar píxeles o desenfoque. Para pixel art suele desactivarse el suavizado.

37.12 Simulación interactiva

Modifica los factores y el pivote. El contorno blanco es el objeto original; el amarillo es el resultado y el recuadro coral muestra el AABB escalado.

37.13 Implementación con JavaScript

function escalarAlrededor(p,c,s) {
  return {
    x:c.x+s.x*(p.x-c.x),
    y:c.y+s.y*(p.y-c.y)
  };
}

const pivote = { x: 2, y: 1 };
const escala = { x: 2, y: 0.5 };
const punto = escalarAlrededor({ x: 6, y: 3 }, pivote, escala);

const figura = [
  { x: 2, y: 1 }, { x: 6, y: 1 },
  { x: 6, y: 3 }, { x: 2, y: 3 }
];
const figuraEscalada = figura.map(p =>
  escalarAlrededor(p, pivote, escala)
);

console.log(`Punto escalado: (${punto.x.toFixed(2)}, ${punto.y.toFixed(2)})`);
figuraEscalada.forEach((p, i) =>
  console.log(`V${i}: (${p.x.toFixed(2)}, ${p.y.toFixed(2)})`)
);

Al presionar Ejecutar, se muestran un punto y los vértices de una figura escalados alrededor del pivote (2,1).

37.14 Aplicaciones, errores y conclusión

El escalado se utiliza en zoom, botones, sprites, adaptación de resoluciones, animaciones de aparición, reflejos y jerarquías.

Laboratorio orbital: portales de escala

La nave atraviesa tres campos: el primero produce un zoom uniforme, el segundo deforma sus ejes de manera independiente y el tercero aplica una reflexión. Observa cómo también se actualizan sus naves auxiliares y su región de colisión.

• Escalar alrededor del origen cuando se necesitaba otro pivote.
• Confundir dimensiones finales con factores de escala.
• Suponer que una escala no uniforme conserva ángulos.
• No detectar el cambio de orientación con un solo factor negativo.
• Intentar invertir un factor cero.
• Escalar accidentalmente el grosor del trazo.
• No actualizar límites o regiones de colisión.

Recuerda: P'=C+S(P−C); el área cambia por |sx·sy|; los factores negativos reflejan; y un factor cero hace degenerada la figura.

En el próximo tema estudiaremos reflexión y simetría.