12.1 ¿Respecto de qué medimos una posición?
Decir que un objeto está «a 3 m» es incompleto: necesitamos indicar desde dónde y en qué dirección. Un sistema de referencia establece un origen, ejes orientados y una unidad para describir posiciones y cambios.
En una pista recta podemos elegir una marca como origen y definir el sentido positivo hacia la derecha. Entonces una posición de −2 m representa un punto situado dos metros en el sentido opuesto.
12.2 El sistema cartesiano
En dos dimensiones usamos normalmente dos ejes perpendiculares: x e y. Cada punto queda identificado por un par ordenado (x, y). El orden importa: (3, 2) y (2, 3) representan puntos distintos.
Eje x positivo: hacia la derecha.
Eje y positivo: hacia arriba, por convención matemática.
La elección del origen y los sentidos es una convención. Podemos elegir otra, pero debemos usarla de forma coherente en todos los cálculos.
12.3 Posición, desplazamiento y coordenadas
Una posición ubica un objeto respecto del origen. Un desplazamiento indica el cambio entre una posición inicial y otra final. Ambos pueden usar componentes x e y, pero no responden a la misma pregunta.
Δx = xfinal − xinicial
Δy = yfinal − yinicial
Si un objeto pasa de (1 m, 2 m) a (4 m, 6 m), el desplazamiento es (3 m, 4 m). No necesitamos que el origen físico cambie para calcularlo.
12.4 Referencia física y referencia de pantalla
Una pantalla utiliza píxeles y, en la mayoría de los contextos web, ubica el origen en la esquina superior izquierda. El eje x crece hacia la derecha y el eje y crece hacia abajo. Esta última convención es opuesta a la del plano matemático habitual.
| Característica | Plano físico o matemático | Pantalla web |
|---|---|---|
| Origen | Se elige para el problema; a menudo el centro. | Habitualmente esquina superior izquierda. |
| x positiva | Hacia la derecha. | Hacia la derecha. |
| y positiva | Habitualmente hacia arriba. | Hacia abajo. |
| Unidad | m, km u otra unidad física. | Píxel (px). |
12.5 Escala entre mundo y pantalla
Para dibujar una posición física elegimos una escala. Si definimos 20 px/m, un objeto ubicado 3 m a la derecha del origen se dibuja 60 px a la derecha de la posición de origen en pantalla.
pantallaY = origenPantallaY − mundoY × escalaPxPorM
La resta en la segunda ecuación invierte el eje vertical. Así podemos mantener la física con y positiva hacia arriba aunque el lienzo de pantalla incremente y hacia abajo.
12.6 Transformación inversa
Cuando el usuario hace clic en una pantalla, el evento llega en píxeles. Para conocer el punto físico correspondiente debemos aplicar la transformación inversa.
mundoY = (origenPantallaY − pantallaY) / escala
Esta conversión es necesaria al seleccionar objetos, colocar elementos de una simulación o interpretar datos de un puntero. El valor convertido mantiene las unidades físicas del mundo.
12.7 Funciones de conversión en JavaScript
function mundoAPantalla(puntoM, origenPx, escalaPxPorM) {
return {
x: origenPx.x + puntoM.x * escalaPxPorM,
y: origenPx.y - puntoM.y * escalaPxPorM
};
}
const pantallaPx = mundoAPantalla({ x: 3, y: 2 }, { x: 200, y: 150 }, 20);
console.log(pantallaPx);El resultado es { x: 260, y: 110 }. La posición física (3 m, 2 m) no cambia; solo se calcula dónde dibujarla en un lienzo cuyo origen físico se muestra en (200 px, 150 px).
12.8 Laboratorio: del mundo físico a la pantalla
Elegí una posición del mundo y una escala. El panel izquierdo usa coordenadas físicas, con y positiva hacia arriba; el derecho muestra el mismo punto en píxeles. También podés arrastrar el punto en cualquiera de los dos paneles.
Posición actualizada. Arrastrá el punto o cambiá los controles.
- Cambiá solo la escala: la coordenada física se conserva, pero el punto de pantalla se aleja o acerca del origen.
- Con mundo y positivo, el punto aparece sobre el origen en ambos paneles, aunque su y de pantalla sea menor.
- Probá y negativa: el punto aparece debajo del origen y su coordenada de pantalla aumenta.
- El origen físico está en el centro de ambos paneles; cada panel tiene su propia cuadrícula.
12.9 Desplazamiento entre dos puntos
Con dos posiciones físicas podemos calcular un desplazamiento sin depender de la escala de pantalla. Esto es importante: la representación puede cambiar por zoom o tamaño de ventana, mientras que el modelo físico debe conservar sus unidades.
const inicioM = { x: -2, y: 1 };
const finM = { x: 4, y: -3 };
const desplazamientoM = {
x: finM.x - inicioM.x,
y: finM.y - inicioM.y
};
console.log(desplazamientoM);12.10 Cámara y origen visual
En una aplicación grande, el origen de pantalla no tiene por qué coincidir siempre con el origen del mundo. Una cámara puede desplazarse para mostrar otra región sin modificar las posiciones físicas de los objetos.
Separar coordenadas de mundo, cámara y pantalla evita que el movimiento de una vista se confunda con el movimiento de un objeto. Más adelante, este principio será útil para simulaciones y videojuegos.
12.11 Ejercicio propuesto
Un objeto se encuentra en el mundo físico en (−2 m, 4 m). El origen visual es (300 px, 200 px) y la escala es 25 px/m. Calculá su coordenada de pantalla.
Ver solución y código
pantallaX = 300 + (−2) × 25 = 250 px. pantallaY = 200 − 4 × 25 = 100 px. El objeto aparece a la izquierda y arriba del origen visual.
const mundoM = { x: -2, y: 4 };
const origenPx = { x: 300, y: 200 };
const escalaPxPorM = 25;
const pantallaPx = {
x: origenPx.x + mundoM.x * escalaPxPorM,
y: origenPx.y - mundoM.y * escalaPxPorM
};
console.log(pantallaPx);12.12 Ideas para recordar
- Una posición necesita un sistema de referencia.
- Un sistema cartesiano define origen, ejes, sentidos y unidades.
- Las posiciones y los desplazamientos no son la misma magnitud.
- Las pantallas suelen tener y positiva hacia abajo.
- La escala conecta unidades físicas con píxeles sin cambiar el modelo.
- Las conversiones entre mundo y pantalla deben ser explícitas.
En el próximo tema estudiaremos posición, trayectoria, distancia y desplazamiento con mayor detalle.