53. Representación gráfica de funciones

53.1 Introducción

Una función puede describirse mediante una fórmula, una tabla o un gráfico. El gráfico permite ver rápidamente cómo cambia la salida cuando cambia la entrada.

Cada punto del gráfico combina una entrada x y su salida correspondiente.

53.2 Del valor de x al punto

Para graficar una función, elegimos valores de x, calculamos f(x) y formamos puntos.

53.3 Tabla de valores

Una tabla organiza los valores antes de graficarlos.

53.4 Generar puntos con JavaScript

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

const puntos = [];

for (let x = -2; x <= 2; x++) {
  puntos.push({ x, y: f(x) });
}

console.log(puntos);

53.5 Gráfico de una función lineal

Una función lineal o afín se representa con una recta. Con dos puntos alcanza para trazarla.

La pendiente determina la inclinación de la recta.

53.6 Gráfico de una función cuadrática

Una función cuadrática se representa con una parábola. Conviene calcular varios puntos para ver su forma.

53.7 Puntos de una parábola en JavaScript

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

const puntos = [];

for (let x = -3; x <= 3; x++) {
  puntos.push({ x, y: cuadratica(x) });
}

console.log(puntos);

53.8 Escalas del gráfico

Al graficar en una pantalla, los valores matemáticos deben convertirse a píxeles. Esto requiere una escala.

El signo menos en pixelY aparece porque en muchas pantallas el eje y crece hacia abajo.

53.9 Convertir coordenadas a píxeles

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

const punto = { x: 2, y: 5 };
const origen = { x: 200, y: 200 };

console.log(aPixel(punto, origen, 20));

53.10 Elegir el rango de x

Para graficar una función, debemos decidir desde qué valor hasta qué valor de x queremos calcular puntos.

Un paso más pequeño produce más puntos y una curva más suave.

53.11 Usar un paso decimal

function f(x) {
  return x ** 2;
}

const puntos = [];

for (let x = -2; x <= 2; x += 0.5) {
  puntos.push({ x, y: f(x) });
}

console.log(puntos);

Con pasos decimales obtenemos más detalle.

53.12 Aplicación en programación

Los gráficos de funciones se usan en visualización de datos, simulaciones, videojuegos, herramientas matemáticas, interfaces y análisis de modelos.

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

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

  return puntos;
}

console.log(generarPuntos(x => 2 * x + 1, -3, 3, 1));

53.13 Errores comunes

• Graficar puntos sin calcular correctamente f(x).
• Invertir las coordenadas del punto.
• Usar muy pocos puntos para funciones curvas.
• Olvidar que en pantalla el eje y puede estar invertido.
• No definir un rango de valores de x.

53.14 Qué debes recordar de este tema

• Para graficar una función, calculamos puntos (x, f(x)).
• Una tabla de valores ayuda a organizar los puntos.
• Las funciones lineales y afines producen rectas.
• Las funciones cuadráticas producen parábolas.
• En pantallas, las coordenadas matemáticas se convierten a píxeles.
• En JavaScript podemos generar puntos con bucles y funciones.

53.15 Conclusión

La representación gráfica permite visualizar el comportamiento de una función. Conectar fórmulas, tablas y puntos es fundamental para interpretar modelos matemáticos y programar gráficos.

En el próximo tema veremos interpretación de gráficos, donde aprenderemos a leer información a partir de una representación visual.