24. Coordenadas cartesianas y ubicación de puntos

24.1 Introducción

Para ubicar un punto en un plano necesitamos una referencia. El sistema de coordenadas cartesianas usa dos ejes perpendiculares: el eje horizontal x y el eje vertical y.

En programación, este sistema aparece al dibujar gráficos, mover elementos, detectar posiciones del mouse, ubicar objetos en un juego o representar datos en una pantalla.

Comprender coordenadas ayuda a conectar matemática, geometría y código visual.

24.2 Qué es el plano cartesiano

El plano cartesiano está formado por dos ejes: el eje x, horizontal, y el eje y, vertical. Ambos se cruzan en el origen.

Un punto se escribe como un par ordenado (x, y).

const punto = {
  x: 3,
  y: 5
};

console.log(punto);

24.3 Par ordenado

Un par ordenado tiene dos valores y el orden importa. El primer valor corresponde a x y el segundo a y.

const puntoA = { x: 3, y: 5 };
const puntoB = { x: 5, y: 3 };

console.log(puntoA);
console.log(puntoB);

Cambiar el orden cambia la ubicación del punto.

24.4 Significado de x e y

La coordenada x indica desplazamiento horizontal. La coordenada y indica desplazamiento vertical.

const puntos = [
  { x: 4, y: 2 },
  { x: -3, y: 5 },
  { x: 2, y: -4 }
];

console.log(puntos);

24.5 Cuadrantes

Los ejes dividen el plano en cuatro cuadrantes. El signo de x y y indica en cuál se encuentra el punto.

24.6 Determinar el cuadrante con código

Podemos usar condiciones para identificar dónde se encuentra un punto.

function obtenerCuadrante(punto) {
  if (punto.x > 0 && punto.y > 0) return "I";
  if (punto.x < 0 && punto.y > 0) return "II";
  if (punto.x < 0 && punto.y < 0) return "III";
  if (punto.x > 0 && punto.y < 0) return "IV";
  return "Está sobre un eje o en el origen";
}

console.log(obtenerCuadrante({ x: 3, y: 4 }));
console.log(obtenerCuadrante({ x: -3, y: 4 }));
console.log(obtenerCuadrante({ x: 0, y: 4 }));

24.7 Puntos sobre los ejes

Si x = 0, el punto está sobre el eje y. Si y = 0, el punto está sobre el eje x. Si ambos son cero, el punto está en el origen.

function describirPunto(punto) {
  if (punto.x === 0 && punto.y === 0) return "Origen";
  if (punto.x === 0) return "Sobre el eje y";
  if (punto.y === 0) return "Sobre el eje x";
  return "Fuera de los ejes";
}

console.log(describirPunto({ x: 0, y: 0 }));
console.log(describirPunto({ x: 0, y: 5 }));
console.log(describirPunto({ x: 7, y: 0 }));

24.8 Coordenadas de pantalla

En muchas pantallas y elementos HTML, el origen está en la esquina superior izquierda. La coordenada x crece hacia la derecha y la coordenada y crece hacia abajo.

const posicionPantalla = {
  x: 120,
  y: 80
};

console.log(posicionPantalla);

Esta diferencia es importante al pasar de fórmulas matemáticas a gráficos en pantalla.

24.9 Convertir coordenadas cartesianas a pantalla

Si queremos dibujar un punto cartesiano en una pantalla, podemos trasladar el origen al centro y cambiar el signo de y.

function cartesianoAPantalla(punto, ancho, alto) {
  return {
    x: ancho / 2 + punto.x,
    y: alto / 2 - punto.y
  };
}

console.log(cartesianoAPantalla({ x: 50, y: 30 }, 800, 600));

Sumamos al centro para ubicar el origen en el medio y restamos y porque en pantalla crece hacia abajo.

24.10 Desplazar un punto

Desplazar un punto significa sumar valores a sus coordenadas. Si sumamos a x, se mueve horizontalmente. Si sumamos a y, se mueve verticalmente.

function desplazar(punto, dx, dy) {
  return {
    x: punto.x + dx,
    y: punto.y + dy
  };
}

const punto = { x: 10, y: 20 };

console.log(desplazar(punto, 5, -3));

Este patrón se usa para mover personajes, elementos visuales, cámaras y objetos en simulaciones.

24.11 Escalar coordenadas

Escalar un punto significa multiplicar sus coordenadas por un factor. Esto aumenta o reduce su distancia respecto del origen.

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

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

24.12 Representar una lista de puntos

En gráficos y juegos no trabajamos con un solo punto, sino con listas de puntos. Un arreglo de objetos es una forma clara de representarlos.

const puntos = [
  { x: 0, y: 0 },
  { x: 10, y: 5 },
  { x: 20, y: 15 }
];

for (const punto of puntos) {
  console.log("x=" + punto.x + ", y=" + punto.y);
}

Esta estructura es común en trazado de gráficos, rutas, polígonos y trayectorias.

24.13 Aplicación: comprobar si un punto está dentro de un rectángulo

Podemos usar coordenadas para verificar si un punto está dentro de una zona rectangular.

function estaDentro(punto, rectangulo) {
  return punto.x >= rectangulo.x &&
         punto.x <= rectangulo.x + rectangulo.ancho &&
         punto.y >= rectangulo.y &&
         punto.y <= rectangulo.y + rectangulo.alto;
}

const punto = { x: 50, y: 40 };
const rectangulo = { x: 20, y: 10, ancho: 100, alto: 80 };

console.log(estaDentro(punto, rectangulo));

Este cálculo aparece en botones, colisiones simples, selección de objetos y detección de clics.

24.14 Errores comunes

• Invertir el orden de las coordenadas y escribir (y, x) en lugar de (x, y).
• Olvidar que en pantalla el eje y suele crecer hacia abajo.
• No distinguir coordenadas relativas al origen de coordenadas relativas a una pantalla o contenedor.
• Confundir desplazamiento con escala.
• Usar nombres poco claros para coordenadas, como a y b, cuando x e y serían más expresivos.
• No validar si un punto está dentro del rango visible antes de dibujarlo.

const punto = { x: 100, y: 50 };
const ancho = 80;
const alto = 60;

const visible = punto.x >= 0 &&
  punto.x <= ancho &&
  punto.y >= 0 &&
  punto.y <= alto;

console.log(visible);

24.15 Qué debes recordar de este tema

• Un punto cartesiano se representa como (x, y).
• La coordenada x indica posición horizontal y y indica posición vertical.
• El origen es el punto (0, 0).
• Los signos de x e y permiten identificar cuadrantes.
• Las coordenadas de pantalla suelen tener el origen arriba a la izquierda.
• En pantalla, el eje y normalmente crece hacia abajo.
• Las coordenadas permiten mover, escalar, dibujar y detectar posiciones.

24.16 Conclusión

Las coordenadas cartesianas ofrecen una forma precisa de ubicar puntos y describir posiciones. En programación son la base de gráficos, interfaces, mapas, videojuegos y simulaciones.

En el próximo tema estudiaremos distancia entre puntos, una aplicación directa de coordenadas y del teorema de Pitágoras.