46. Transformaciones de funciones

46.1 Introducción

Una transformación modifica el gráfico de una función conocida. En vez de estudiar una función desde cero, podemos partir de una forma base y aplicar cambios controlados.

En programación, esta idea aparece al dibujar gráficos, animar objetos, adaptar valores de entrada, escalar datos o transformar coordenadas.

46.2 Función base

La función base es el modelo original antes de aplicar cambios. Por ejemplo, podemos partir de una función cuadrática simple.

Luego se pueden aplicar transformaciones para desplazarla, invertirla o cambiar su escala.

46.3 Ejemplo de función base en JavaScript

Primero definimos una función simple que usaremos en varios ejemplos.

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

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

46.4 Tipos principales de transformaciones

Las transformaciones más comunes son traslaciones, reflexiones y cambios de escala.

46.5 Traslación vertical

Sumar una constante al resultado de una función mueve todo el gráfico hacia arriba o hacia abajo.

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

function trasladarVertical(funcion, k) {
  return function(x) {
    return funcion(x) + k;
  };
}

const arriba = trasladarVertical(cuadratica, 3);

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

46.6 Traslación horizontal

Restar una constante dentro de la entrada desplaza el gráfico hacia la derecha. Sumarlas dentro de la entrada lo desplaza hacia la izquierda.

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

function trasladarHorizontal(funcion, h) {
  return function(x) {
    return funcion(x - h);
  };
}

const derecha = trasladarHorizontal(cuadratica, 2);

console.log(cuadratica(2));
console.log(derecha(2));
console.log(derecha(4));

46.7 Reflexión vertical

Multiplicar la salida por -1 refleja el gráfico respecto del eje horizontal.

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

function reflejarVertical(funcion) {
  return function(x) {
    return -funcion(x);
  };
}

const invertida = reflejarVertical(cuadratica);

console.log(cuadratica(3));
console.log(invertida(3));

46.8 Reflexión horizontal

Cambiar el signo de la entrada refleja el gráfico respecto del eje vertical.

function lineal(x) {
  return 2 * x + 1;
}

function reflejarHorizontal(funcion) {
  return function(x) {
    return funcion(-x);
  };
}

const reflejada = reflejarHorizontal(lineal);

console.log(lineal(3));
console.log(reflejada(3));

46.9 Escalado vertical

Multiplicar la salida por un número cambia la altura del gráfico. Si el factor es mayor que 1, se estira. Si está entre 0 y 1, se comprime.

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

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

const alta = escalarVertical(cuadratica, 2);
const baja = escalarVertical(cuadratica, 0.5);

console.log(cuadratica(3));
console.log(alta(3));
console.log(baja(3));

46.10 Escalado horizontal

Multiplicar la entrada por un factor modifica el ancho del gráfico. Este efecto puede resultar menos intuitivo porque ocurre dentro de la función.

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

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

const comprimida = escalarHorizontal(cuadratica, 2);

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

46.11 Combinación de transformaciones

Una misma función puede recibir varias transformaciones al mismo tiempo. El orden importa, especialmente cuando se combinan cambios dentro y fuera de la función.

Esta forma permite desplazar horizontalmente, escalar verticalmente y trasladar verticalmente una función base.

46.12 Transformación combinada en JavaScript

Este ejemplo aplica desplazamiento horizontal, escala vertical y desplazamiento vertical sobre una función cuadrática.

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

function transformar(funcion, opciones) {
  return function(x) {
    const entrada = x - opciones.desplazamientoX;
    const salida = funcion(entrada) * opciones.escalaY;
    return salida + opciones.desplazamientoY;
  };
}

const transformada = transformar(cuadratica, {
  desplazamientoX: 2,
  desplazamientoY: 3,
  escalaY: 2
});

console.log(transformada(2));
console.log(transformada(3));
console.log(transformada(4));

46.13 Generar puntos para graficar

Para dibujar una función en pantalla, normalmente se calcula una lista de puntos. Las transformaciones pueden aplicarse antes de renderizar.

function generarPuntos(funcion, desde, hasta, paso) {
  const puntos = [];

  for (let x = desde; x <= hasta; x += paso) {
    puntos.push({ x, y: funcion(x) });
  }

  return puntos;
}

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

console.log(generarPuntos(cuadratica, -2, 2, 1));

46.14 Comparar función original y transformada

Una tabla permite observar cómo cambian los valores al aplicar una transformación.

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

function transformada(x) {
  return 2 * cuadratica(x - 1) + 3;
}

for (let x = -1; x <= 3; x++) {
  console.log({
    x,
    original: cuadratica(x),
    transformada: transformada(x)
  });
}

46.15 Transformaciones en programación

Las transformaciones de funciones no son solo una idea gráfica. También sirven para adaptar datos y controlar comportamientos.

• Desplazar una animación para que comience en otra posición.
• Escalar valores de sensores o métricas.
• Invertir una curva de dificultad en un juego.
• Comprimir una señal para que entre en un rango visible.
• Ajustar funciones matemáticas a coordenadas de pantalla.

46.16 Transformar valores de datos

Un caso común consiste en tomar un valor de entrada y convertirlo a otro rango para mostrarlo en una interfaz.

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, 200, 400));

46.17 Coordenadas matemáticas y pantalla

Cuando se dibuja una función, muchas veces se transforma la coordenada matemática a coordenada de pantalla. Esto suele incluir escala, traslación e inversión del eje Y.

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: 100, y: 100 }, 20));
console.log(aPantalla({ x: -1, y: -2 }, { x: 100, y: 100 }, 20));

46.18 Errores comunes

• Confundir una transformación horizontal con una vertical.
• Olvidar que f(x - h) desplaza hacia la derecha cuando h es positivo.
• Aplicar transformaciones en un orden distinto al esperado.
• No separar la función base de la función transformada.
• Confundir el escalado de valores matemáticos con el escalado de píxeles en pantalla.

46.19 Qué debes recordar de este tema

• Una transformación modifica una función base sin cambiar por completo su naturaleza.
• Las traslaciones mueven el gráfico horizontal o verticalmente.
• Las reflexiones invierten el gráfico respecto de un eje.
• Los escalados estiran o comprimen el gráfico.
• En programación, estas ideas sirven para gráficos, animaciones, datos y coordenadas.

46.20 Conclusión

Las transformaciones de funciones permiten construir muchas variaciones a partir de una forma conocida. Esta técnica ayuda a razonar sobre gráficos y también a escribir programas más claros cuando se transforman posiciones, valores o señales.