48. Traslaciones verticales

48.1 Introducción

Una traslación vertical desplaza el gráfico de una función sobre el eje Y. La forma de la curva se mantiene, pero todos sus valores suben o bajan la misma cantidad.

En programación se usa para ajustar niveles base, centrar gráficos, mover animaciones y convertir valores matemáticos a posiciones visibles.

48.2 Forma general

Si tenemos una función base f(x), una traslación vertical se obtiene sumando una constante al resultado.

Si k es positivo, el gráfico sube. Si k es negativo, el gráfico baja.

48.3 Diferencia con la traslación horizontal

La traslación vertical modifica la salida de la función. La horizontal modifica la entrada.

48.4 Función base

Tomemos nuevamente una función cuadrática simple como punto de partida.

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

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

48.5 Desplazar hacia arriba

Para mover una función hacia arriba, se suma una constante positiva a su resultado.

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

function arriba(x) {
  return cuadratica(x) + 3;
}

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

El mínimo de la parábola pasa de y = 0 a y = 3.

48.6 Desplazar hacia abajo

Para mover una función hacia abajo, se suma una constante negativa o se resta una cantidad al resultado.

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

function abajo(x) {
  return cuadratica(x) - 4;
}

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

El mínimo de la parábola pasa de y = 0 a y = -4.

48.7 Comparación de valores

La traslación vertical suma la misma cantidad a todos los valores de salida.

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

function desplazada(x) {
  return cuadratica(x) + 5;
}

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

48.8 Crear una función de traslación vertical

Podemos crear una función reutilizable que transforme cualquier función sumando una constante a su salida.

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

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

const subida = trasladarVertical(cuadratica, 10);
const bajada = trasladarVertical(cuadratica, -10);

console.log(subida(2));
console.log(bajada(2));

48.9 Interpretación con puntos

Si un punto de la función original es (x, y), al desplazar la función verticalmente se conserva la coordenada X y cambia la coordenada Y.

Por ejemplo, el punto (0, 0) de la función x² pasa a (0, 5) si se desplaza 5 unidades hacia arriba.

48.10 Desplazar una lista de puntos

Si ya tenemos puntos calculados para graficar, la traslación vertical puede aplicarse directamente sobre la coordenada Y.

function desplazarPuntosVertical(puntos, k) {
  return puntos.map(function(punto) {
    return {
      x: punto.x,
      y: punto.y + k
    };
  });
}

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

console.log(desplazarPuntosVertical(puntos, 3));

48.11 Valor base de una oscilación

En funciones periódicas, una traslación vertical permite definir el centro de una oscilación.

El valor centro es una traslación vertical de la onda seno.

48.12 Onda con centro vertical

Este ejemplo crea una onda que oscila alrededor de un valor central distinto de cero.

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

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

console.log(redondear(onda(0, 100, 20)));
console.log(redondear(onda(Math.PI / 2, 100, 20)));
console.log(redondear(onda(3 * Math.PI / 2, 100, 20)));

48.13 Traslación vertical y coordenadas de pantalla

En pantalla, el eje Y suele crecer hacia abajo. Esto puede hacer que sumar a la coordenada Y mueva visualmente un punto hacia abajo.

48.14 Convertir una función a pantalla

Al dibujar una función, muchas veces se usa una traslación vertical para ubicar el origen en el centro de la pantalla.

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

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

48.15 Ajustar una señal

Una traslación vertical puede convertir una señal centrada en cero en una señal siempre positiva.

function señal(tiempo) {
  return Math.sin(tiempo);
}

function señalPositiva(tiempo) {
  return señal(tiempo) + 1;
}

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

console.log(redondear(señalPositiva(0)));
console.log(redondear(señalPositiva(Math.PI / 2)));
console.log(redondear(señalPositiva(3 * Math.PI / 2)));

La señal original va de -1 a 1. La señal trasladada va de 0 a 2.

48.16 Cambiar el nivel de dificultad

En un juego o simulación, una traslación vertical puede agregar un valor base a una función de crecimiento.

function crecimiento(nivel) {
  return nivel * nivel;
}

function dificultad(nivel) {
  const base = 10;
  return crecimiento(nivel) + base;
}

console.log(dificultad(1));
console.log(dificultad(3));
console.log(dificultad(5));

48.17 Aplicaciones en programación

• Centrar una onda alrededor de un valor base.
• Mover gráficos hacia arriba o abajo sin cambiar su forma.
• Convertir señales negativas y positivas a un rango visible.
• Agregar un valor mínimo a una fórmula de crecimiento.
• Adaptar coordenadas matemáticas a coordenadas de pantalla.

48.18 Errores comunes

• Aplicar la traslación vertical dentro de la entrada de la función.
• Confundir f(x) + k con f(x + k).
• No recordar que en pantalla sumar a Y puede mover visualmente hacia abajo.
• Modificar todos los puntos manualmente cuando sería más claro transformar la función.
• Olvidar que una traslación vertical no cambia la forma de la curva.

48.19 Qué debes recordar de este tema

• Una traslación vertical mueve el gráfico sobre el eje Y.
• f(x) + k desplaza el gráfico hacia arriba cuando k es positivo.
• f(x) - k desplaza el gráfico hacia abajo cuando k es positivo.
• La coordenada X no cambia; cambia la salida de la función.
• En programación, se usa para offsets, niveles base, ondas y coordenadas de pantalla.

48.20 Conclusión

Las traslaciones verticales son una de las transformaciones más directas: solo se suma o resta una cantidad a la salida de la función. Esta idea simple permite ajustar gráficos, animaciones y señales sin alterar la forma original del comportamiento.