2. Representación gráfica y notación vectorial

2.1 Representar es construir un modelo

Un vector físico no es la flecha dibujada sobre el papel ni el par de números almacenado en un programa. La flecha y las componentes son representaciones de una misma entidad. Cada representación destaca cierta información y sigue convenciones que debemos declarar.

Una buena representación permite reconocer el módulo, la dirección, el sentido y, cuando importa, el punto de aplicación. También identifica la magnitud física, su unidad, el sistema de referencia y la escala del dibujo.

2.2 Anatomía de una flecha vectorial

La representación gráfica de un vector utiliza un segmento orientado con cuatro elementos:

• Cola u origen: punto desde el que parte la flecha.
• Cuerpo: segmento cuya inclinación muestra la dirección.
• Punta: marca el sentido, desde la cola hacia el extremo.
• Longitud: representa el módulo de acuerdo con una escala.

Si el origen es A y el extremo es B, la flecha representa el vector desde A hasta B. El orden no puede intercambiarse: el vector desde B hasta A tiene sentido opuesto.

2.3 Formas habituales de escribir un vector

En texto plano suele escribirse v, AB o vectorV. Como se pierde el formato visual, conviene explicar la convención al comienzo.

2.4 Vector y módulo no son lo mismo

La expresión v representa el vector completo; |v| representa únicamente su módulo. Si v = (−3, 4) m/s, entonces |v| = 5 m/s. La primera expresión contiene orientación; la segunda es escalar.

En programación, un objeto como { x: -3, y: 4 } representa el vector, mientras que Math.hypot(x, y) devuelve un número que representa su módulo.

2.5 Vectores ligados, deslizantes y libres

No siempre podemos trasladar una flecha sin cambiar el significado del problema:

• Un vector ligado tiene un punto de aplicación determinado. La fuerza aplicada en una zona concreta de una puerta es un ejemplo.
• Un vector deslizante puede moverse sobre su línea de acción en ciertos modelos de cuerpos rígidos.
• Un vector libre puede trasladarse paralelamente sin cambiar la entidad representada. Un desplazamiento suele tratarse así.

Dos flechas paralelas, de igual longitud y con el mismo sentido pueden representar el mismo vector libre aunque estén dibujadas en lugares diferentes. Esto permite reubicarlas para comparar o construir diagramas.

2.6 Escala gráfica

Una flecha física de 20 m no se dibuja con 20 metros de longitud. Elegimos una escala, por ejemplo 1 cm ↔ 5 m. Entonces la flecha debe medir 4 cm. La escala convierte entre el módulo físico y la longitud visual:

En pantalla resulta natural usar píxeles por unidad: con 25 px/m, un vector de módulo 4 m se dibuja con 100 px. Los píxeles describen la imagen, no son una unidad física.

Si todas las flechas de un diagrama representan la misma clase de magnitud, deben compartir escala. Cambiarla entre vectores haría engañosa la comparación visual.

2.7 Ángulos y convenciones

Indicaremos los ángulos desde el eje +x y en sentido antihorario, salvo aclaración. Con esta convención: derecha corresponde a 0°, arriba a 90°, izquierda a 180° y abajo a −90° o 270°.

El ángulo por sí solo no basta si desconocemos el eje de referencia o el sentido de medición. En contextos geográficos también aparecen expresiones como «30° al norte del este»; conviene traducirlas cuidadosamente a la convención del sistema.

2.8 Del mundo físico a la pantalla

En el plano matemático, y aumenta hacia arriba. En Canvas, la coordenada vertical aumenta hacia abajo. Para situar un punto físico respecto de un origen visual usamos:

El signo menos de la segunda fórmula invierte el eje vertical. Mantener separadas las coordenadas físicas y las de pantalla evita contaminar los cálculos del modelo con decisiones de presentación.

function mundoAPantalla(vector, origen, pixelesPorUnidad) {
  return {
    x: origen.x + vector.x * pixelesPorUnidad,
    y: origen.y - vector.y * pixelesPorUnidad
  };
}

console.log(mundoAPantalla({ x: 4, y: 3 }, { x: 300, y: 200 }, 25));

2.9 Laboratorio de representación

Elegí el origen, las componentes y la escala. También podés arrastrar el extremo de la flecha. Observá que cambiar la escala modifica el dibujo, pero no el vector físico.

2.10 Dibujar una flecha con JavaScript

Para construir la punta calculamos el ángulo visual del segmento con Math.atan2. Luego trazamos dos lados que forman un pequeño triángulo.

function dibujarVector(ctx, origen, extremo, color = "#ffcf56") {
  const angulo = Math.atan2(extremo.y - origen.y, extremo.x - origen.x);
  const punta = 12;

  ctx.strokeStyle = color;
  ctx.fillStyle = color;
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(origen.x, origen.y);
  ctx.lineTo(extremo.x, extremo.y);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(extremo.x, extremo.y);
  ctx.lineTo(extremo.x - punta * Math.cos(angulo - Math.PI / 6),
             extremo.y - punta * Math.sin(angulo - Math.PI / 6));
  ctx.lineTo(extremo.x - punta * Math.cos(angulo + Math.PI / 6),
             extremo.y - punta * Math.sin(angulo + Math.PI / 6));
  ctx.closePath();
  ctx.fill();
}

const ventana = document.getElementById("modal-vector-code");
const canvas = document.getElementById("codeVectorCanvas");
ventana.classList.add("open");
canvas.width = 700;
canvas.height = 280;
const contexto = canvas.getContext("2d");

contexto.fillStyle = "#071827";
contexto.fillRect(0, 0, canvas.width, canvas.height);

dibujarVector(
  contexto,
  { x: 100, y: 220 },
  { x: 500, y: 70 },
  "#ffcf56"
);

Esta función recibe coordenadas de pantalla. La conversión desde unidades físicas debe realizarse antes, en una función separada.

2.11 Criterios para una representación clara

• Dibujar una punta inequívoca y suficientemente visible.
• Rotular el vector sin cubrir la flecha ni otros datos.
• Mostrar ejes, sentidos positivos y unidades.
• Declarar la escala y mantenerla constante.
• Distinguir vectores mediante color, trazo y etiquetas, no solamente mediante color.
• No exagerar ni reducir una flecha si la comparación de módulos es relevante.
• Agregar una descripción textual cuando la figura sea interactiva.

La accesibilidad también forma parte de la comunicación: el elemento Canvas del laboratorio actualiza su texto alternativo con los valores elegidos.

2.12 Errores frecuentes

• Dibujar una línea sin punta y perder el sentido.
• Confundir el punto extremo con las componentes del vector cuando el origen no es (0, 0).
• Usar longitudes visuales que no respetan una escala común.
• Omitir el eje desde el que se mide un ángulo.
• Escribir |v| cuando se quiere representar el vector completo.
• Invertir el eje y de Canvas dentro del modelo físico en vez de hacerlo al dibujar.
• Trasladar un vector ligado como si fuera libre.

2.13 Ejercicio integrador

Un robot parte de A = (−2, 1) m y termina en B = (3, 5) m. Usá +x hacia la derecha, +y hacia arriba y una escala de 30 px/m.

1. Escribí el vector con notación de origen y extremo.
2. Calculá sus componentes y su módulo.
3. Indicá qué longitud tendrá la flecha en pantalla.
4. Si el origen visual es (250, 200) px, calculá las posiciones de pantalla de A y B.
5. Explicá qué cambia y qué se conserva al trasladar la flecha paralelamente si representa un desplazamiento libre.

function mundoAPantalla(punto, origen, escala) {
  return {
    x: origen.x + punto.x * escala,
    y: origen.y - punto.y * escala
  };
}

const A = { x: -2, y: 1 };
const B = { x: 3, y: 5 };
const escala = 30;
const origenVisual = { x: 250, y: 200 };

const AB = { x: B.x - A.x, y: B.y - A.y };
const modulo = Math.hypot(AB.x, AB.y);
const aPantalla = mundoAPantalla(A, origenVisual, escala);
const bPantalla = mundoAPantalla(B, origenVisual, escala);

console.log(AB, modulo, modulo * escala);
console.log(aPantalla, bPantalla);

2.14 Ideas para recordar

• La flecha es una representación del vector, no el vector físico en sí.
• La cola, el cuerpo, la punta y la longitud comunican origen, dirección, sentido y módulo.
• v representa un vector; |v| representa su módulo.
• Un vector entre puntos se obtiene como extremo menos origen.
• Los vectores libres pueden trasladarse paralelamente; los ligados conservan su punto de aplicación.
• Una escala conecta magnitud física y longitud visual.
• Las coordenadas físicas deben convertirse a coordenadas de pantalla solamente al dibujar.

En el próximo tema estudiaremos sistemas de referencia y componentes cartesianas con mayor profundidad.