Los gráficos 2D se construyen ubicando puntos, líneas, curvas y figuras sobre un plano. Las funciones matemáticas permiten calcular esas posiciones y transformar los objetos de forma precisa.
En programación, una función puede convertir datos en coordenadas, dibujar una curva, escalar una figura, rotar un punto o decidir si un objeto está dentro de una región.
Un gráfico 2D trabaja con pares ordenados (x, y). Cada punto se identifica mediante una posición horizontal y una posición vertical.
const punto = { x: 30, y: 80 };
console.log("Coordenada x:", punto.x);
console.log("Coordenada y:", punto.y);
console.log("Punto:", `(${punto.x}, ${punto.y})`);Las operaciones gráficas suelen recibir puntos como entrada y devolver nuevos puntos como resultado.
En matemática, el eje y suele crecer hacia arriba. En muchas pantallas y lienzos 2D, y crece hacia abajo.
function convertirYMatematicaAPantalla(y, alto) {
return alto - y;
}
const altoLienzo = 300;
const yMatematica = 75;
const yPantalla = convertirYMatematicaAPantalla(yMatematica, altoLienzo);
console.log("y matemática:", yMatematica);
console.log("y en pantalla:", yPantalla);Esta conversión es común cuando se quiere dibujar una función matemática en un canvas o área gráfica.
Una función puede devolver un punto calculado a partir de un parámetro. Esto permite construir trayectorias, curvas y patrones.
function puntoEnRecta(t) {
return {
x: t,
y: 2 * t + 1
};
}
for (let t = 0; t <= 4; t++) {
console.log(puntoEnRecta(t));
}Los datos de un programa no siempre están en la misma escala que la pantalla. Una función de mapeo convierte un valor de un intervalo a otro.
function mapear(valor, minOrigen, maxOrigen, minDestino, maxDestino) {
const proporcion = (valor - minOrigen) / (maxOrigen - minOrigen);
return minDestino + proporcion * (maxDestino - minDestino);
}
const temperatura = 25;
const x = mapear(temperatura, 0, 50, 0, 400);
console.log("Temperatura:", temperatura);
console.log("Posición x:", x);Esta técnica se usa para construir gráficos de barras, líneas, indicadores y visualizaciones de datos.
Una línea entre dos puntos puede representarse con una función que interpola entre ambos extremos.
function interpolarPunto(a, b, t) {
return {
x: a.x + (b.x - a.x) * t,
y: a.y + (b.y - a.y) * t
};
}
const inicio = { x: 10, y: 20 };
const fin = { x: 90, y: 60 };
for (let i = 0; i <= 4; i++) {
const t = i / 4;
console.log("t =", t, interpolarPunto(inicio, fin, t));
}Un rectángulo se puede describir mediante su posición, ancho y alto. A partir de esos datos se calculan sus vértices.
function verticesRectangulo(x, y, ancho, alto) {
return [
{ x, y },
{ x: x + ancho, y },
{ x: x + ancho, y: y + alto },
{ x, y: y + alto }
];
}
console.log(verticesRectangulo(20, 10, 80, 40));Los puntos de un círculo se calculan con seno y coseno. El ángulo indica la dirección desde el centro.
function puntoEnCirculo(centro, radio, angulo) {
return {
x: centro.x + radio * Math.cos(angulo),
y: centro.y + radio * Math.sin(angulo)
};
}
const centro = { x: 100, y: 100 };
for (let i = 0; i < 4; i++) {
const angulo = i * Math.PI / 2;
console.log(puntoEnCirculo(centro, 30, angulo));
}Para graficar una función matemática, se calculan muchos puntos y se unen visualmente.
function f(x) {
return x * x;
}
const puntos = [];
for (let x = -3; x <= 3; x++) {
puntos.push({ x, y: f(x) });
}
console.log(puntos);Cuantos más puntos se calculen, más suave parecerá la curva.
Una curva paramétrica calcula x e y a partir de un mismo parámetro. Es útil para órbitas, espirales y trayectorias.
function espiral(t) {
const radio = 4 * t;
return {
x: radio * Math.cos(t),
y: radio * Math.sin(t)
};
}
for (let i = 0; i <= 6; i++) {
const t = i * 0.5;
console.log("t =", t.toFixed(1), espiral(t));
}Trasladar consiste en sumar un desplazamiento a las coordenadas de un punto.
function trasladar(punto, dx, dy) {
return {
x: punto.x + dx,
y: punto.y + dy
};
}
const punto = { x: 15, y: 25 };
const movido = trasladar(punto, 10, -5);
console.log("Original:", punto);
console.log("Movido:", movido);Escalar cambia el tamaño de una figura. Si se escala un punto respecto del origen, se multiplican sus coordenadas por un factor.
function escalar(punto, factor) {
return {
x: punto.x * factor,
y: punto.y * factor
};
}
const triangulo = [
{ x: 0, y: 0 },
{ x: 4, y: 0 },
{ x: 2, y: 3 }
];
const trianguloGrande = triangulo.map(p => escalar(p, 2));
console.log(trianguloGrande);La rotación usa seno y coseno. Para rotar un punto alrededor del origen se aplica una transformación trigonométrica.
function rotar(punto, angulo) {
return {
x: punto.x * Math.cos(angulo) - punto.y * Math.sin(angulo),
y: punto.x * Math.sin(angulo) + punto.y * Math.cos(angulo)
};
}
const punto = { x: 10, y: 0 };
const rotado = rotar(punto, Math.PI / 2);
console.log(rotado);Para rotar alrededor de un centro distinto del origen, primero se traslada el punto al origen, se rota y luego se vuelve a trasladar.
function rotarAlrededor(punto, centro, angulo) {
const dx = punto.x - centro.x;
const dy = punto.y - centro.y;
return {
x: centro.x + dx * Math.cos(angulo) - dy * Math.sin(angulo),
y: centro.y + dx * Math.sin(angulo) + dy * Math.cos(angulo)
};
}
const punto = { x: 8, y: 5 };
const centro = { x: 5, y: 5 };
console.log(rotarAlrededor(punto, centro, Math.PI));La distancia euclidiana permite medir separación entre objetos, detectar cercanía y construir interacciones.
function distancia(a, b) {
const dx = b.x - a.x;
const dy = b.y - a.y;
return Math.sqrt(dx * dx + dy * dy);
}
const jugador = { x: 20, y: 30 };
const moneda = { x: 25, y: 42 };
console.log("Distancia:", distancia(jugador, moneda).toFixed(2));Una forma simple de detectar si un punto está dentro de un círculo es comparar la distancia con el radio.
function puntoDentroDeCirculo(punto, centro, radio) {
const dx = punto.x - centro.x;
const dy = punto.y - centro.y;
return dx * dx + dy * dy <= radio * radio;
}
const punto = { x: 12, y: 14 };
const centro = { x: 10, y: 10 };
console.log(puntoDentroDeCirculo(punto, centro, 5));Se comparan cuadrados para evitar calcular la raíz cuadrada innecesariamente.
Para saber si un punto está dentro de un rectángulo alineado a los ejes, se revisan sus límites horizontales y verticales.
function puntoDentroDeRectangulo(punto, rect) {
return punto.x >= rect.x &&
punto.x <= rect.x + rect.ancho &&
punto.y >= rect.y &&
punto.y <= rect.y + rect.alto;
}
const rect = { x: 10, y: 20, ancho: 80, alto: 40 };
const punto = { x: 50, y: 30 };
console.log(puntoDentroDeRectangulo(punto, rect));En gráficos 2D, una animación puede interpretarse como una función del tiempo. El tiempo entra como parámetro y la posición sale como resultado.
function posicionAnimada(tiempo) {
return {
x: 50 + 30 * Math.cos(tiempo),
y: 50 + 30 * Math.sin(tiempo)
};
}
for (let i = 0; i <= 5; i++) {
const tiempo = i * 0.4;
console.log(posicionAnimada(tiempo));
}Las funciones de suavizado cambian la velocidad aparente de una animación. En vez de avanzar linealmente, permiten comenzar lento, acelerar o frenar.
function suavizado(t) {
return t * t * (3 - 2 * t);
}
for (let i = 0; i <= 5; i++) {
const t = i / 5;
console.log("t:", t.toFixed(2), "suave:", suavizado(t).toFixed(3));
}Un vector normalizado conserva su dirección, pero tiene longitud 1. Esto es útil para mover objetos a velocidad constante en una dirección.
function normalizar(vector) {
const longitud = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
if (longitud === 0) {
return { x: 0, y: 0 };
}
return {
x: vector.x / longitud,
y: vector.y / longitud
};
}
console.log(normalizar({ x: 3, y: 4 }));Las funciones en gráficos 2D se usan en:
Al trabajar con gráficos 2D conviene prestar atención a estos errores:
y matemático con el eje y de pantalla.Los gráficos 2D dependen de funciones que convierten números en posiciones, formas y movimientos. Con operaciones como mapear, interpolar, trasladar, escalar y rotar, se pueden construir dibujos, animaciones y visualizaciones de forma ordenada.
El objetivo no es memorizar fórmulas aisladas, sino reconocer qué transformación necesita el programa y expresarla como una función clara.