50. Escalado y estiramiento

50.1 Introducción

Escalar una función significa cambiar el tamaño de su gráfico. Puede hacerse verticalmente, modificando los valores de salida, u horizontalmente, modificando los valores de entrada.

En programación, el escalado aparece al dibujar gráficos, normalizar datos, adaptar coordenadas, cambiar amplitudes de ondas y ajustar velocidades o intensidades.

50.2 Escalado vertical

El escalado vertical se obtiene multiplicando la salida de la función por un factor.

Si a es mayor que 1, el gráfico se estira verticalmente. Si está entre 0 y 1, se comprime verticalmente.

50.3 Escalado horizontal

El escalado horizontal se obtiene multiplicando la entrada de la función por un factor.

Este caso suele ser menos intuitivo: si b es mayor que 1, el gráfico se comprime horizontalmente. Si está entre 0 y 1, se estira horizontalmente.

50.4 Comparación rápida

50.5 Función base

Usaremos una función cuadrática para observar los efectos del escalado.

function cuadratica(x) {
  return x * x;
}

console.log(cuadratica(-2));
console.log(cuadratica(0));
console.log(cuadratica(2));

50.6 Estiramiento vertical

Multiplicar la salida por un factor mayor que 1 aumenta la distancia de los puntos respecto del eje X.

function cuadratica(x) {
  return x * x;
}

function estiradaVertical(x) {
  return 3 * cuadratica(x);
}

console.log(cuadratica(2));
console.log(estiradaVertical(2));

50.7 Compresión vertical

Multiplicar la salida por un factor entre 0 y 1 reduce la altura del gráfico.

function cuadratica(x) {
  return x * x;
}

function comprimidaVertical(x) {
  return 0.5 * cuadratica(x);
}

console.log(cuadratica(4));
console.log(comprimidaVertical(4));

50.8 Escalado vertical reutilizable

Podemos crear una función que reciba una función base y devuelva una nueva función con escala vertical.

function escalarVertical(funcion, factor) {
  return function(x) {
    return funcion(x) * factor;
  };
}

function cuadratica(x) {
  return x * x;
}

const doble = escalarVertical(cuadratica, 2);
const mitad = escalarVertical(cuadratica, 0.5);

console.log(doble(3));
console.log(mitad(3));

50.9 Escalado horizontal

En el escalado horizontal, el factor modifica la entrada antes de calcular la función.

function cuadratica(x) {
  return x * x;
}

function comprimidaHorizontal(x) {
  return cuadratica(2 * x);
}

console.log(cuadratica(2));
console.log(comprimidaHorizontal(2));

Como la entrada se duplica, la función alcanza los mismos valores usando menos distancia horizontal.

50.10 Estiramiento horizontal

Usar un factor entre 0 y 1 dentro de la entrada estira el gráfico horizontalmente.

function cuadratica(x) {
  return x * x;
}

function estiradaHorizontal(x) {
  return cuadratica(0.5 * x);
}

console.log(cuadratica(4));
console.log(estiradaHorizontal(4));

50.11 Escalado horizontal reutilizable

Esta función transforma la entrada antes de llamar a la función original.

function escalarHorizontal(funcion, factor) {
  return function(x) {
    return funcion(x * factor);
  };
}

function cuadratica(x) {
  return x * x;
}

const comprimida = escalarHorizontal(cuadratica, 2);
const estirada = escalarHorizontal(cuadratica, 0.5);

console.log(comprimida(2));
console.log(estirada(2));

50.12 Comparar valores

Una tabla generada por código permite comparar la función original con sus versiones escaladas.

function cuadratica(x) {
  return x * x;
}

function vertical(x) {
  return 2 * cuadratica(x);
}

function horizontal(x) {
  return cuadratica(2 * x);
}

for (let x = -2; x <= 2; x++) {
  console.log({
    x,
    original: cuadratica(x),
    vertical: vertical(x),
    horizontal: horizontal(x)
  });
}

50.13 Factores negativos

Si el factor de escala es negativo, además del cambio de tamaño aparece una reflexión.

50.14 Escalado de puntos

Si ya tenemos puntos calculados, podemos escalar sus coordenadas directamente.

function escalarPunto(punto, escalaX, escalaY) {
  return {
    x: punto.x * escalaX,
    y: punto.y * escalaY
  };
}

console.log(escalarPunto({ x: 3, y: 4 }, 2, 1));
console.log(escalarPunto({ x: 3, y: 4 }, 1, 0.5));

50.15 Escalar una lista de puntos

Para transformar una figura o una curva representada por puntos, se aplica el escalado a cada elemento.

function escalarPuntos(puntos, escalaX, escalaY) {
  return puntos.map(function(punto) {
    return {
      x: punto.x * escalaX,
      y: punto.y * escalaY
    };
  });
}

const puntos = [
  { x: -1, y: 1 },
  { x: 0, y: 0 },
  { x: 1, y: 1 }
];

console.log(escalarPuntos(puntos, 2, 3));

50.16 Escalado y amplitud

En una onda, cambiar la amplitud es un escalado vertical de la función seno.

function onda(tiempo, amplitud) {
  return Math.sin(tiempo) * amplitud;
}

function redondear(valor) {
  return Math.round(valor * 1000) / 1000;
}

console.log(redondear(onda(Math.PI / 2, 1)));
console.log(redondear(onda(Math.PI / 2, 20)));

50.17 Escalado y frecuencia

En una onda, multiplicar el tiempo dentro del seno cambia el escalado horizontal. Esto modifica la rapidez con que se repite.

function onda(tiempo, frecuencia) {
  return Math.sin(tiempo * frecuencia);
}

function redondear(valor) {
  return Math.round(valor * 1000) / 1000;
}

console.log(redondear(onda(1, 1)));
console.log(redondear(onda(1, 3)));

50.18 Mapear datos a otro rango

Escalar también significa convertir valores de un rango a otro. Este patrón es frecuente al pasar datos a gráficos o interfaces.

function mapear(valor, entradaMin, entradaMax, salidaMin, salidaMax) {
  const proporcion = (valor - entradaMin) / (entradaMax - entradaMin);
  return salidaMin + proporcion * (salidaMax - salidaMin);
}

console.log(mapear(50, 0, 100, 0, 1));
console.log(mapear(75, 0, 100, 0, 300));

50.19 Escala para dibujar en pantalla

Al convertir coordenadas matemáticas a píxeles, el factor de escala determina cuántos píxeles representa una unidad matemática.

function aPantalla(punto, origen, escala) {
  return {
    x: origen.x + punto.x * escala,
    y: origen.y - punto.y * escala
  };
}

console.log(aPantalla({ x: 2, y: 3 }, { x: 200, y: 150 }, 10));
console.log(aPantalla({ x: 2, y: 3 }, { x: 200, y: 150 }, 30));

50.20 Aplicaciones en programación

• Ajustar la altura o intensidad de una curva.
• Cambiar la amplitud de una onda o vibración.
• Modificar la frecuencia de una animación periódica.
• Convertir coordenadas matemáticas a píxeles.
• Normalizar datos para mostrarlos en una interfaz.
• Escalar figuras, trayectorias o gráficos 2D.

50.21 Errores comunes

• Confundir escalado vertical con escalado horizontal.
• Olvidar que f(2x) comprime horizontalmente en vez de estirar.
• No distinguir entre escalar una función y escalar puntos ya calculados.
• Usar factores negativos sin considerar que también generan una reflexión.
• Mezclar unidades matemáticas con píxeles sin aplicar una escala clara.

50.22 Qué debes recordar de este tema

• a · f(x) escala verticalmente una función.
• f(b · x) escala horizontalmente una función.
• Un factor vertical mayor que 1 estira; entre 0 y 1 comprime.
• Un factor horizontal mayor que 1 comprime; entre 0 y 1 estira.
• El escalado es clave para gráficos, ondas, datos y coordenadas de pantalla.

50.23 Conclusión

El escalado y el estiramiento permiten controlar el tamaño de una función sin cambiar su estructura principal. Entender si el factor actúa sobre la entrada o sobre la salida ayuda a predecir correctamente el comportamiento del gráfico y a aplicarlo en programas reales.