41. Coordenadas cartesianas

Las coordenadas cartesianas permiten ubicar puntos en un plano mediante pares ordenados. Son fundamentales para gráficos, videojuegos, interfaces y visualización de datos.

41.1 Introducción

El plano cartesiano es un sistema para ubicar puntos usando dos ejes perpendiculares: el eje horizontal x y el eje vertical y.

Punto: (x, y)
Ejemplo: (3, 2)

El primer valor indica desplazamiento horizontal y el segundo indica desplazamiento vertical.

41.2 Eje x y eje y

El eje x mide posiciones horizontales. El eje y mide posiciones verticales.

Eje Dirección Valores positivos
x Horizontal Hacia la derecha
y Vertical Hacia arriba en matemática tradicional

41.3 Par ordenado

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

(3, 2) no es lo mismo que (2, 3)

En (3, 2), la coordenada x es 3 y la coordenada y es 2.

41.4 Origen

El origen es el punto donde se cruzan los ejes. Sus coordenadas son:

(0, 0)

Desde el origen se miden los desplazamientos horizontales y verticales.

41.5 Cuadrantes

Los ejes dividen el plano en cuatro regiones llamadas cuadrantes.

Cuadrante Signo de x Signo de y Ejemplo
I Positivo Positivo (4, 2)
II Negativo Positivo (-4, 2)
III Negativo Negativo (-4, -2)
IV Positivo Negativo (4, -2)

41.6 Representar puntos en JavaScript

En programación, un punto puede representarse como un objeto con propiedades x e y.

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

console.log(punto.x);
console.log(punto.y);

41.7 Lista de puntos

Para representar varios puntos, podemos usar un arreglo de objetos.

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

console.log(puntos);

41.8 Coordenadas en pantallas

En muchas pantallas, el sistema de coordenadas tiene una diferencia importante: el eje y suele crecer hacia abajo.

Contexto x positivo y positivo
Matemática tradicional Derecha Arriba
Pantalla o canvas Derecha Abajo

Esta diferencia es importante al programar gráficos y videojuegos.

41.9 Movimiento en coordenadas

Mover un punto significa cambiar sus coordenadas.

let personaje = { x: 10, y: 20 };

personaje.x = personaje.x + 5;
personaje.y = personaje.y - 3;

console.log(personaje);

El punto se movió 5 unidades hacia la derecha y 3 unidades en dirección negativa del eje y.

41.10 Coordenadas relativas

A veces una posición se calcula respecto de otra posición.

posiciónNueva = posiciónActual + desplazamiento 
const posicionActual = { x: 100, y: 50 };
const desplazamiento = { x: 20, y: -10 };

const posicionNueva = {
  x: posicionActual.x + desplazamiento.x,
  y: posicionActual.y + desplazamiento.y
};

console.log(posicionNueva);

41.11 Aplicación en gráficos

Los gráficos de funciones se construyen calculando muchos puntos (x, y).

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);

41.12 Aplicación en videojuegos

En videojuegos, las coordenadas permiten ubicar personajes, objetos, proyectiles, cámaras y zonas de colisión.

const jugador = { x: 50, y: 80 };
const moneda = { x: 70, y: 80 };

const mismaAltura = jugador.y === moneda.y;

console.log(mismaAltura);

41.13 Errores comunes

  • Invertir el orden del par ordenado.
  • Confundir el eje x con el eje y.
  • Olvidar que en pantallas el eje y puede crecer hacia abajo.
  • No distinguir posición absoluta de desplazamiento relativo.
  • Usar coordenadas sin aclarar el sistema de referencia.
En un punto (x, y), el primer valor siempre corresponde a x y el segundo a y.

41.14 Qué debes recordar de este tema

  • El plano cartesiano usa dos ejes: x e y.
  • Un punto se representa como par ordenado (x, y).
  • El origen es (0, 0).
  • Los signos de x e y determinan el cuadrante.
  • En programación, los puntos pueden representarse con objetos o arreglos.
  • En pantallas, el eje y suele crecer hacia abajo.

41.15 Conclusión

Las coordenadas cartesianas permiten representar posiciones y relaciones geométricas de forma precisa. Son una base fundamental para gráficos, funciones, simulaciones e interfaces.

En el próximo tema veremos distancia entre puntos, donde usaremos coordenadas para medir separación entre dos posiciones.

Volver al índice