1. ¿Qué matemática se utiliza en los gráficos 2D?

1.1 Introducción

Un gráfico 2D parece una colección de colores y formas, pero un programa no comprende palabras como “a la derecha”, “más grande” o “gira un poco”. Necesita valores precisos. La matemática convierte esas instrucciones visuales en números y operaciones que la computadora puede ejecutar.

No es necesario dominar matemática avanzada para comenzar. La mayor parte del trabajo cotidiano utiliza aritmética, geometría elemental, vectores, trigonometría y algunas ideas de álgebra lineal. Lo importante es comprender qué problema resuelve cada concepto.

1.2 De los números a una escena

Todo elemento visible posee propiedades numéricas. Un personaje puede estar en la posición (120, 80), medir 40 píxeles, apuntar a 30 grados y avanzar 3 píxeles por cuadro. El programa combina esos valores para decidir dónde y cómo dibujarlo.

1.3 Coordenadas: indicar dónde

Una posición 2D se describe con dos coordenadas: x indica el desplazamiento horizontal e y el vertical. Juntas forman un punto.

En muchas pantallas, el origen (0, 0) se encuentra en la esquina superior izquierda. El valor de x aumenta hacia la derecha y el de y hacia abajo. Esta orientación difiere del plano cartesiano tradicional y debe tenerse presente al programar.

1.4 Geometría: definir la forma

La geometría permite construir objetos mediante puntos, segmentos y figuras. Un botón puede ser un rectángulo; una pelota, un círculo; y una nave, una combinación de triángulos y polígonos.

1.5 Vectores: expresar dirección y movimiento

Un vector también contiene dos componentes, pero representa un desplazamiento en lugar de una posición fija. El vector (3, −2) puede interpretarse como avanzar 3 unidades a la derecha y 2 hacia arriba.

Los vectores permiten controlar velocidad, dirección, aceleración, empujes, rebotes y fuerzas. Son una de las herramientas más utilizadas en animaciones y videojuegos.

1.6 Ángulos y trigonometría: orientar y girar

Los ángulos expresan orientación. Las funciones seno y coseno convierten un ángulo en una dirección. Si un objeto apunta a un ángulo θ y avanza con rapidez v, su desplazamiento puede calcularse así:

Esta relación permite mover un personaje hacia donde mira, distribuir elementos sobre una circunferencia y rotar puntos. En JavaScript, las funciones trigonométricas trabajan con radianes.

1.7 Transformaciones: mover, rotar y cambiar el tamaño

Una transformación modifica todos los puntos que forman un objeto. La traslación cambia su posición, la rotación su orientación y el escalado su tamaño. Aplicarlas al objeto completo evita recalcular manualmente cada vértice.

• Trasladar: sumar el mismo desplazamiento a todos los puntos.
• Rotar: girar todos los puntos alrededor de un centro.
• Escalar: multiplicar sus distancias respecto del centro.
• Reflejar: invertir una coordenada respecto de un eje.

1.8 Simulación interactiva: controla una figura 2D

Modifica la posición, el ángulo, la escala y la velocidad. La figura combina todos estos conceptos: las coordenadas fijan su centro, la geometría define su forma, el ángulo la orienta y un vector determina su desplazamiento.

También puedes arrastrar la figura directamente sobre el lienzo. Al cambiar el ángulo, observa que la flecha del vector gira con ella; al pulsar Animar, la posición se actualiza sumando ese vector en cada cuadro.

1.9 Colisiones, interpolación y curvas

Una escena interactiva necesita además responder a encuentros y cambios en el tiempo. La detección de colisiones determina si dos figuras se superponen. La interpolación calcula valores intermedios para producir movimientos suaves. Las curvas de Bézier describen trayectorias y contornos mediante puntos de control.

1.10 Un ejemplo mínimo en JavaScript

Este código calcula el vector correspondiente a un ángulo y actualiza una posición. Resume la relación entre trigonometría, vectores y movimiento.

const posicion = { x: 100, y: 80 };
const anguloGrados = 30;
const velocidad = 4;

const anguloRadianes = anguloGrados * Math.PI / 180;
const movimiento = {
  x: Math.cos(anguloRadianes) * velocidad,
  y: Math.sin(anguloRadianes) * velocidad
};

posicion.x += movimiento.x;
posicion.y += movimiento.y;

console.log(posicion);

La posición inicial indica dónde está el objeto. El vector indica cuánto y hacia dónde se mueve. La suma produce su nueva posición.

1.11 Cómo pensar un problema gráfico

Antes de buscar una fórmula, conviene formular preguntas concretas:

1. ¿Qué datos describen el objeto: posición, tamaño, ángulo o velocidad?
2. ¿Qué debe cambiar y qué debe permanecer fijo?
3. ¿La operación consiste en medir, mover, girar, escalar o detectar un contacto?
4. ¿En qué sistema de coordenadas se expresan los valores?
5. ¿El cálculo se realiza una sola vez o en cada cuadro de una animación?

Estas preguntas suelen revelar el concepto matemático necesario y evitan utilizar fórmulas sin comprender su propósito.

1.12 Errores comunes

• Confundir una posición con un vector de desplazamiento.
• Olvidar que el eje y de la pantalla suele crecer hacia abajo.
• Mezclar grados y radianes en funciones trigonométricas.
• Rotar respecto del origen cuando se quería rotar respecto del centro del objeto.
• Aplicar transformaciones en un orden incorrecto.
• Comparar posiciones exactas con números decimales en lugar de utilizar una tolerancia.
• Usar una detección de colisión más compleja de lo que requieren las figuras.

1.13 Qué debes recordar de este tema

• Las coordenadas indican la posición de un elemento.
• La geometría describe puntos, distancias, líneas y figuras.
• Los vectores representan dirección y desplazamiento.
• Los ángulos y la trigonometría permiten orientar, girar y mover.
• Las transformaciones trasladan, rotan, escalan o reflejan objetos.
• Las colisiones, interpolaciones y curvas hacen posible la interacción y el movimiento suave.
• La matemática es una herramienta para traducir una intención visual a operaciones precisas.

1.14 Conclusión

La matemática de los gráficos 2D no es un conjunto aislado de fórmulas. Es un lenguaje que permite describir dónde están los objetos, qué forma tienen, hacia dónde se mueven y cómo cambian. Cada concepto del curso ampliará una parte de este lenguaje y la conectará con ejemplos visuales.

En el próximo tema estudiaremos el plano cartesiano y los sistemas de coordenadas, la base sobre la que ubicaremos todos los elementos de una escena.