Una aplicación 2D combina geometría, tiempo y estado. Vectores, matrices, interpolación, curvas y colisiones dejan de ser temas aislados y forman un sistema interactivo coherente.
Una escena interactiva recibe entradas, actualiza su estado, resuelve restricciones y presenta un resultado. La calidad depende tanto de las fórmulas como del orden en que se ejecutan.
Separar lógica, representación y tiempo facilita depurar el sistema y reutilizarlo en interfaces, visualizaciones o juegos.
Cada cuadro usa el estado anterior para producir uno nuevo. La representación debe leer ese estado sin introducir reglas físicas ocultas.
El estado contiene posiciones, velocidades, salud, objetivos y temporizadores. Los elementos SVG representan esos datos mediante atributos como transform, x, y, opacity o d.
Modificar únicamente la apariencia sin actualizar el estado provoca desincronización con colisiones y controles.
Δt se mide en segundos y se limita para evitar saltos después de una pausa. Las velocidades se expresan en unidades por segundo, no por fotograma.
Las entradas horizontales y verticales forman un vector. Si su longitud supera 1, se normaliza para evitar que el movimiento diagonal sea más rápido:
La entrada describe intención; la velocidad describe el movimiento producido.
Para mirar desde P hacia O:
Si el eje frontal del sprite no apunta hacia la derecha, se agrega una corrección angular fija.
Una cámara convierte posiciones del mundo en posiciones de pantalla:
El seguimiento suavizado usa un factor exponencial para no depender del frame rate. Los límites del mapa evitan mostrar regiones exteriores.
Una interfaz mezcla coordenadas absolutas, proporciones y anclajes. Un elemento puede mantenerse a 20 píxeles del borde o centrarse usando la mitad del tamaño disponible.
Salud, energía y progreso se normalizan al intervalo [0,1]. Ese valor controla ancho, arco, color u opacidad:
Interpolar el valor mostrado reduce saltos sin modificar el valor real usado por la lógica.
La detección responde si existe contacto; la respuesta decide qué hacer. Una secuencia robusta es:
Un proyectil combina posición, dirección, rapidez, radio y duración. Se elimina al impactar, salir del mundo o agotar su tiempo.
Reutilizar objetos mediante un pool evita crear y destruir grandes cantidades de memoria.
Las partículas son pequeños estados independientes con vida limitada. Su opacidad y escala suelen depender de la edad normalizada:
Ruido controlado, gravedad y colores interpolados producen explosiones, humo, chispas y estelas.
Controla el objetivo de la nave. La cámara la sigue con suavizado y la interfaz permanece anclada a la pantalla aunque el mundo se desplace.
let anterior=performance.now();
const jugador={x:0,y:0,vx:120,vy:40};
function actualizar(ahora) {
const dt=Math.min((ahora-anterior)/1000,0.05);
anterior=ahora;
jugador.x+=jugador.vx*dt;
jugador.y+=jugador.vy*dt;
console.log(`Posición: (${jugador.x.toFixed(2)}, ${jugador.y.toFixed(2)})`);
}
actualizar(anterior+16.67);La llamada simula un cuadro y muestra la nueva posición sin iniciar un ciclo infinito en el ejecutor.
function mover(pos,input,rapidez,dt) {
const longitud=Math.hypot(input.x,input.y);
if (longitud>0) {
pos.x+=input.x/longitud*rapidez*dt;
pos.y+=input.y/longitud*rapidez*dt;
}
}
function seguir(actual,objetivo,respuesta,dt) {
const k=1-Math.exp(-respuesta*dt);
return actual+(objetivo-actual)*k;
}
const jugador={x:0,y:0};
mover(jugador,{x:1,y:1},120,1/60);
const camara={x:seguir(0,jugador.x,4,1/60),y:seguir(0,jugador.y,4,1/60)};
console.log({jugador,camara});La normalización evita ventaja diagonal y el seguimiento se mantiene estable frente al frame rate.
function limitar(v,min,max) {
return Math.max(min,Math.min(max,v));
}
function datosBarra(valor,maximo,ancho) {
const progreso=limitar(valor/maximo,0,1);
return {
progreso,
anchoVisible:ancho*progreso,
porcentaje:Math.round(progreso*100)
};
}
console.log(datosBarra(68,100,240));
// {progreso:0.68, anchoVisible:163.2, porcentaje:68}La lógica devuelve datos neutrales que luego pueden aplicarse a SVG, HTML u otro sistema de presentación.
La nave patrulla, detecta objetivos circulares, dispara pulsos y actualiza el HUD. La escena reúne curvas, orientación, cámara, colisiones puntuales y partículas.
Una aplicación mantenible separa datos, sistemas y presentación. Movimiento, colisiones, cámara y HUD leen y escriben partes bien definidas del estado.
Recuerda: entrada, simulación y presentación cumplen responsabilidades distintas; Δt estabiliza el movimiento; las transformaciones conectan espacios; y una arquitectura clara permite combinar todas las herramientas matemáticas.
En el próximo tema construiremos el proyecto integrador de gráficos 2D.