4. Puntos y posiciones en el plano
Un punto es la unidad más simple de la geometría 2D: no posee ancho ni alto, pero determina una posición exacta. A partir de puntos se construyen segmentos, figuras, trayectorias y objetos gráficos.
4.1 Introducción
En programación gráfica necesitamos representar ubicaciones: el centro de una pelota, la posición del puntero, el vértice de un triángulo o el destino de un personaje. Todas ellas pueden modelarse mediante puntos.
Un punto geométrico indica dónde se encuentra algo, no cuánto mide ni hacia dónde se mueve. Para describirlo en dos dimensiones utilizamos dos coordenadas.
4.2 ¿Qué es un punto?
Un punto es una ubicación exacta del plano. Matemáticamente no tiene tamaño. Al dibujarlo usamos un pequeño círculo o marca para que sea visible, pero ese círculo es solo su representación gráfica.
4.3 Representación mediante coordenadas
En un plano 2D, un punto P se expresa mediante el par ordenado (x, y). Su coordenada x indica la posición horizontal y su coordenada y la vertical.
A = (3, 2)
B = (−4, 1)
Las letras mayúsculas suelen nombrar puntos y permiten diferenciarlos. Dos puntos pueden compartir una coordenada sin ocupar la misma posición.
4.4 Ubicar un punto paso a paso
- Partimos del origen del sistema de coordenadas.
- Nos desplazamos horizontalmente según el valor y signo de x.
- Desde allí nos desplazamos verticalmente según y.
- Marcamos la posición donde terminan ambos desplazamientos.
Para A = (3, 2), avanzamos tres unidades hacia la derecha y dos hacia arriba. Para B = (−4, 1), avanzamos cuatro hacia la izquierda y una hacia arriba.
4.5 Cuándo dos puntos son iguales
Dos puntos son iguales únicamente cuando coinciden sus dos coordenadas. Compartir x o compartir y no es suficiente.
| Punto A | Punto B | Relación |
|---|---|---|
| (3, 2) | (3, 2) | Son el mismo punto |
| (3, 2) | (3, 5) | Comparten x; están alineados verticalmente |
| (3, 2) | (−1, 2) | Comparten y; están alineados horizontalmente |
| (3, 2) | (2, 3) | Son puntos diferentes |
4.6 Punto y posición de un objeto
Un objeto gráfico ocupa una región, mientras que un punto no tiene tamaño. Cuando asignamos una posición a un objeto debemos decidir qué punto de la figura representa esa posición.
- La esquina superior izquierda, habitual en elementos de interfaz.
- El centro, conveniente para rotaciones y colisiones circulares.
- El centro de la base, útil para personajes apoyados sobre el suelo.
- Un punto de anclaje personalizado, usado en sprites y animaciones.
Dos objetos con la misma posición numérica pueden aparecer desplazados si utilizan puntos de anclaje distintos.
4.7 Puntos como componentes de figuras
Los extremos de un segmento son puntos. Los vértices de un triángulo o polígono también lo son. Una figura compleja puede almacenarse como una lista ordenada de posiciones.
Al conectar los puntos en orden y cerrar el recorrido obtenemos el contorno. Modificar un vértice cambia la forma sin alterar los demás.
4.8 Simulación interactiva: crea y mueve puntos
Agrega puntos sobre el plano, selecciónalos y arrástralos. La línea une los puntos en el orden en que fueron creados para mostrar cómo una colección de posiciones puede formar una figura.
Selecciona B o C para ver cuánto cambia cada coordenada respecto de A. Esa diferencia describe un desplazamiento; más adelante la estudiaremos formalmente como un vector.
4.9 Representar puntos en JavaScript
Un objeto con propiedades x e y ofrece una representación legible y fácil de ampliar:
const puntoA = { x: 3, y: 2 };
const puntoB = { x: -1, y: 5 };
function sonIguales(a, b) {
return a.x === b.x && a.y === b.y;
}
function desplazar(punto, dx, dy) {
return {
x: punto.x + dx,
y: punto.y + dy
};
}
console.log(sonIguales(puntoA, puntoB));
console.log(desplazar(puntoA, 2, -1));El primer resultado es false. El segundo es un nuevo punto (5, 1), obtenido al mover A dos unidades a la derecha y una hacia abajo.
4.10 Posiciones enteras y decimales
Las coordenadas no tienen que ser enteras. Una animación puede situar un objeto en (12,4; 7,85), aunque al dibujarlo la pantalla termine combinando o aproximando píxeles.
Mantener decimales en los cálculos produce movimientos más suaves y precisos. Conviene redondear únicamente cuando la presentación o una operación concreta lo requiera.
posición mostrada al usuario ≈ (12; 8)
4.11 Aplicaciones de puntos y posiciones
- Guardar la ubicación de personajes, enemigos y objetos.
- Registrar clics, toques y movimientos del puntero.
- Definir vértices de segmentos, triángulos y polígonos.
- Marcar puntos de control de una curva.
- Indicar origen, destino y controles de una trayectoria.
- Representar partículas, estrellas, nodos y puntos de interés.
- Elegir centros de rotación y puntos de anclaje.
4.12 Errores comunes
- Confundir el tamaño del marcador dibujado con el tamaño del punto matemático.
- Intercambiar las coordenadas x e y.
- Comparar solo una coordenada al comprobar igualdad.
- No definir qué parte del objeto representa su posición.
- Mezclar puntos expresados en sistemas de coordenadas diferentes.
- Redondear después de cada movimiento y acumular errores.
- Modificar accidentalmente un punto compartido por varias estructuras.
4.13 Qué debes recordar de este tema
- Un punto representa una posición exacta y no posee tamaño.
- En 2D se expresa mediante el par ordenado (x, y).
- Dos puntos son iguales si coinciden ambas coordenadas.
- Compartir x produce alineación vertical y compartir y, horizontal.
- La posición de un objeto depende de su punto de anclaje.
- Los puntos pueden actuar como extremos, vértices y controles.
- Las coordenadas decimales conservan precisión durante el movimiento.
4.14 Conclusión
Los puntos proporcionan la forma más elemental de representar una posición. Al agruparlos y relacionarlos aparecen segmentos, figuras y trayectorias; al cambiar sus coordenadas, los objetos se mueven o modifican su forma.
En el próximo tema aprenderemos a calcular la distancia entre dos puntos, una operación fundamental para medir proximidad, alcance y separación.