2. El plano cartesiano y los sistemas de coordenadas
El plano cartesiano transforma una superficie en un mapa numérico. Sus ejes, su origen y su unidad de medida permiten ubicar cada punto de una escena 2D de forma precisa.
2.1 Introducción
Para dibujar un elemento, la computadora necesita saber dónde colocarlo. Expresiones como “cerca del centro” o “un poco hacia arriba” no son suficientemente precisas. Un sistema de coordenadas establece un origen, unas direcciones y una unidad para describir cualquier posición mediante números.
El plano cartesiano es el sistema bidimensional más conocido. Comprenderlo facilita el trabajo posterior con distancias, rectas, vectores, figuras y transformaciones.
2.2 ¿Qué es el plano cartesiano?
El plano cartesiano está formado por dos rectas numéricas perpendiculares. El eje x es horizontal y el eje y es vertical. Ambos se cruzan en el origen.
eje horizontal = eje x
eje vertical = eje y
2.3 Pares ordenados
La posición de un punto se escribe como un par ordenado (x, y). La primera coordenada siempre corresponde al eje x y la segunda al eje y. El orden no puede intercambiarse.
x = 4 · y = 3
Para encontrar P partimos del origen, avanzamos 4 unidades sobre el eje x y luego 3 unidades paralelas al eje y. Los puntos (4, 3) y (3, 4) ocupan posiciones distintas.
2.4 Signo y dirección
En el plano matemático convencional, los valores positivos de x se encuentran a la derecha y los negativos a la izquierda. Los valores positivos de y se encuentran arriba y los negativos abajo.
| Movimiento desde el origen | Coordenada que cambia | Signo |
|---|---|---|
| Hacia la derecha | x | Positivo |
| Hacia la izquierda | x | Negativo |
| Hacia arriba | y | Positivo |
| Hacia abajo | y | Negativo |
2.5 Los cuatro cuadrantes
Los ejes dividen el plano en cuatro cuadrantes, numerados en sentido antihorario a partir de la región superior derecha. El signo de las coordenadas permite reconocer inmediatamente dónde se encuentra un punto.
| Región | Signo de x | Signo de y | Ejemplo |
|---|---|---|---|
| Cuadrante I | + | + | (4, 3) |
| Cuadrante II | − | + | (−4, 3) |
| Cuadrante III | − | − | (−4, −3) |
| Cuadrante IV | + | − | (4, −3) |
Un punto situado sobre un eje no pertenece a ningún cuadrante. Si x = 0 está sobre el eje y; si y = 0 está sobre el eje x.
2.6 Origen, orientación y escala
Un sistema de coordenadas queda definido por tres decisiones fundamentales:
- Origen: el punto de referencia al que asignamos (0, 0).
- Orientación: la dirección positiva de cada eje.
- Escala: cuántos píxeles o unidades visuales representa una unidad matemática.
Por ejemplo, si la escala es de 40 píxeles por unidad, el punto (3, 2) se encuentra a 120 píxeles del origen en x y a 80 píxeles en y.
posiciónVisualY = origenY − y × escala
La resta en la segunda fórmula permite mostrar un plano matemático sobre una pantalla cuyo eje vertical aumenta hacia abajo.
2.7 Sistemas de coordenadas globales y locales
Una misma posición puede describirse desde distintos orígenes. Las coordenadas globales utilizan el origen general de la escena. Las coordenadas locales utilizan el origen de un objeto o grupo.
Si un panel está en la posición global (100, 60) y un botón ocupa la posición local (20, 15) dentro del panel, la posición global del botón se obtiene sumando ambas:
(100, 60) + (20, 15) = (120, 75)
Los sistemas locales son útiles porque permiten mover un conjunto completo sin modificar por separado todos sus elementos.
2.8 Simulación interactiva: explora el plano
Haz clic o arrastra el punto sobre el plano. También puedes escribir sus coordenadas, modificar la escala y desplazar el origen. Observa cómo cambian la posición visual, el cuadrante y las proyecciones sobre los ejes.
En el modo inicial puedes mover el punto amarillo. Pulsa Mover origen para activar el otro modo y arrastra el punto blanco central; así definirás un nuevo marco de referencia sin cambiar las coordenadas matemáticas de P. Pulsa Mover punto para regresar al modo anterior.
2.9 Conversión entre coordenadas y píxeles
Para representar el punto matemático (x, y) en un lienzo necesitamos conocer la posición en píxeles del origen y la escala. Estas funciones realizan ambas conversiones:
const origen = { x: 450, y: 280 };
const escala = 40;
function aPantalla(punto) {
return {
x: origen.x + punto.x * escala,
y: origen.y - punto.y * escala
};
}
function aPlano(pixel) {
return {
x: (pixel.x - origen.x) / escala,
y: (origen.y - pixel.y) / escala
};
}
console.log(aPantalla({ x: 4, y: 3 }));La segunda función invierte el cálculo. Esta conversión es necesaria para interpretar un clic del usuario como un punto dentro del sistema matemático.
2.10 Coordenadas absolutas y relativas
Una coordenada absoluta indica una posición respecto del origen elegido. Una coordenada relativa indica un cambio respecto de otra posición. Si A = (2, 1) y desde allí avanzamos (3, 4), llegamos a B = (5, 5).
(5, 5) = (2, 1) + (3, 4)
Esta distinción anticipa la diferencia entre puntos y vectores: el punto describe una ubicación y el vector describe el desplazamiento entre ubicaciones.
2.11 Aplicaciones en gráficos 2D
- Ubicar personajes, botones, partículas y elementos de una interfaz.
- Interpretar la posición del puntero o de un toque sobre la pantalla.
- Crear cámaras que transforman coordenadas del mundo en coordenadas visibles.
- Organizar objetos hijos mediante sistemas locales.
- Representar mapas, gráficas, editores y niveles de videojuegos.
- Convertir medidas matemáticas en distancias expresadas en píxeles.
2.12 Errores comunes
- Intercambiar el orden de x e y en un par ordenado.
- Olvidar dónde se encuentra el origen del sistema utilizado.
- Suponer que una unidad siempre equivale a un píxel.
- Confundir coordenadas globales con coordenadas locales.
- Asignar un cuadrante a un punto situado sobre alguno de los ejes.
- Mezclar valores expresados en sistemas con escalas u orígenes diferentes.
- No considerar la orientación del eje y al convertir coordenadas.
2.13 Qué debes recordar de este tema
- El plano cartesiano utiliza dos ejes perpendiculares.
- El origen es el punto (0, 0) donde se cruzan los ejes.
- Una posición se escribe como un par ordenado (x, y).
- Los signos de x e y determinan el cuadrante.
- Origen, orientación y escala definen un sistema de coordenadas.
- Un objeto puede expresarse en coordenadas globales o locales.
- Para dibujar, debemos convertir unidades matemáticas en píxeles.
2.14 Conclusión
El plano cartesiano ofrece una forma exacta de describir el espacio bidimensional. Una vez establecidos el origen, los ejes y la escala, cualquier posición puede representarse, compararse y transformar mediante operaciones numéricas.
En el próximo tema compararemos con más detalle las coordenadas matemáticas y las coordenadas de pantalla, especialmente la ubicación del origen y la orientación del eje vertical.