3. Coordenadas de pantalla y coordenadas matemáticas
El mismo punto puede tener coordenadas diferentes según el sistema utilizado. Aprender a reconocer el origen, la orientación del eje y y la escala evita movimientos invertidos y permite convertir correctamente entre el mundo matemático y la pantalla.
3.1 Introducción
El plano cartesiano tradicional y una pantalla utilizan dos coordenadas, x e y, pero no suelen organizarlas de la misma manera. En matemática es habitual colocar el origen abajo o en el centro y hacer crecer y hacia arriba. En la mayoría de las interfaces gráficas, el origen está arriba a la izquierda y el valor de y aumenta hacia abajo.
Esta diferencia no es un error: responde a la forma histórica en que las pantallas almacenan y recorren sus píxeles. El programador debe identificar el sistema activo antes de realizar cualquier cálculo.
3.2 Dos maneras de describir el mismo espacio
| Característica | Plano matemático | Pantalla |
|---|---|---|
| Origen habitual | Centro o esquina inferior izquierda | Esquina superior izquierda |
| x positiva | Hacia la derecha | Hacia la derecha |
| y positiva | Hacia arriba | Hacia abajo |
| Unidad frecuente | Unidad abstracta | Píxel |
| Valores visibles | Pueden ser positivos y negativos | Suelen ser no negativos |
3.3 El sistema de coordenadas de pantalla
Una imagen digital puede imaginarse como una cuadrícula de píxeles. El píxel cercano a la esquina superior izquierda tiene coordenadas próximas a (0, 0). Al avanzar por una fila aumenta x; al bajar a otra fila aumenta y.
esquina inferior derecha ≈ (ancho, alto)
En un lienzo de 800 × 600 píxeles, su centro se encuentra en (400, 300). Una posición con y = 500 está más abajo que otra con y = 100.
3.4 ¿Por qué el eje y crece hacia abajo?
Las primeras pantallas y sistemas de memoria recorrían la imagen desde la fila superior hacia las siguientes. Esta organización coincide con la lectura de documentos y continúa siendo la convención predeterminada en HTML, Canvas, imágenes rasterizadas y muchas bibliotecas 2D.
No todos los entornos son iguales. Algunos motores y sistemas gráficos permiten elegir una cámara cartesiana o utilizan el origen en otra posición. Por eso conviene verificar siempre la documentación y realizar una prueba sencilla antes de asumir una orientación.
3.5 Invertir el eje vertical
Si el origen matemático se coloca en la esquina inferior izquierda de una pantalla de altura H, la coordenada x no cambia. La coordenada y debe medirse desde abajo:
pantallaY = H − matemáticaY
La conversión inversa utiliza la misma resta:
matemáticaY = H − pantallaY
Si H = 400 y un punto de pantalla es (120, 90), en el sistema matemático inferior izquierdo será (120, 310).
3.6 Utilizar el centro como origen
En juegos, simulaciones y gráficas puede resultar más cómodo colocar el origen matemático en el centro. Para una superficie de ancho W y altura H:
pantallaY = H / 2 − matemáticaY
La conversión desde la pantalla se obtiene despejando:
matemáticaY = H / 2 − pantallaY
Así, los objetos a la izquierda o debajo del centro pueden expresarse con coordenadas negativas.
3.7 Incorporar una escala
Una unidad matemática no tiene por qué coincidir con un píxel. Si cada unidad representa 20 píxeles, el punto matemático (3, 2) estará a 60 píxeles a la derecha y 40 píxeles arriba del origen visual.
pantallaY = origenY − matemáticaY × escala
Separar coordenadas lógicas y píxeles permite acercar o alejar una cámara sin modificar las posiciones reales de los objetos.
3.8 Simulación interactiva: convierte el mismo punto
Los dos paneles representan la misma superficie de 400 × 300 unidades. Mueve el punto en cualquiera de ellos y observa sus coordenadas. Cambia el origen matemático para comparar el sistema inferior izquierdo con el sistema centrado.
En ambos paneles puedes hacer clic o arrastrar. El panel de pantalla utiliza y hacia abajo; el matemático utiliza y hacia arriba. El punto permanece visualmente a la misma altura, pero su valor vertical cambia.
3.9 Conversión en JavaScript
Estas funciones convierten puntos cuando el origen matemático se encuentra en el centro del lienzo:
const ancho = 800;
const alto = 600;
function matematicasAPantalla({ x, y }) {
return {
x: ancho / 2 + x,
y: alto / 2 - y
};
}
function pantallaAMatematicas({ x, y }) {
return {
x: x - ancho / 2,
y: alto / 2 - y
};
}
console.log(pantallaAMatematicas({ x: 500, y: 200 }));El resultado es (100, 100): el punto está 100 píxeles a la derecha y 100 píxeles por encima del centro.
3.10 Movimiento y velocidad vertical
La orientación también afecta el signo de una velocidad. En coordenadas matemáticas, una velocidad vertical positiva suele mover el objeto hacia arriba. En coordenadas de pantalla sin transformar, sumar un valor positivo a y lo mueve hacia abajo.
y = y + 5;
// Pantalla: subir 5 píxeles
y = y - 5;
Una opción es adaptar cada cálculo. Otra, generalmente más clara, es transformar el contexto gráfico o utilizar funciones de conversión y mantener toda la lógica en coordenadas matemáticas.
3.11 Elegir un sistema para el programa
| Situación | Sistema conveniente | Motivo |
|---|---|---|
| Interfaz web | Pantalla | Coincide con CSS, Canvas y eventos del puntero |
| Gráfica de funciones | Matemático | Respeta la convención habitual de los ejes |
| Juego de plataformas | Cualquiera, pero coherente | El motor puede imponer su propia convención |
| Mundo con cámara | Coordenadas del mundo | Se mantienen independientes de la pantalla |
| Lectura de un clic | Pantalla y luego conversión | El evento comienza expresado en píxeles |
No existe un sistema universalmente mejor. La regla importante es no mezclar valores de sistemas diferentes sin realizar una conversión explícita.
3.12 Errores comunes
- Suponer que aumentar y siempre mueve un objeto hacia arriba.
- Restar la coordenada vertical al ancho en vez de a la altura.
- Convertir la posición pero olvidar convertir también vectores y velocidades.
- Aplicar dos veces la inversión del eje y.
- Mezclar coordenadas del mundo, de la cámara y de la pantalla.
- Ignorar el desplazamiento del elemento HTML al interpretar un evento del puntero.
- Olvidar la escala o el nivel de zoom durante la conversión.
3.13 Qué debes recordar de este tema
- La pantalla suele colocar el origen en la esquina superior izquierda.
- En pantalla, x crece hacia la derecha e y hacia abajo.
- En el plano matemático, y crece normalmente hacia arriba.
- Invertir el eje vertical requiere conocer la altura y el origen.
- El centro puede utilizarse como origen mediante un desplazamiento de medio ancho y medio alto.
- La escala convierte unidades lógicas en píxeles.
- Todo cálculo debe indicar en qué sistema están expresados sus valores.
3.14 Conclusión
Las coordenadas matemáticas y las de pantalla describen el mismo espacio con convenciones diferentes. Convertir entre ellas consiste principalmente en desplazar el origen, aplicar la escala e invertir el eje vertical cuando sea necesario.
En el próximo tema estudiaremos los puntos y las posiciones en el plano, y aprenderemos a representarlos, compararlos y utilizarlos como base de los objetos gráficos.