67. Aplicaciones en gráficos y videojuegos

El álgebra permite ubicar objetos, moverlos, detectar colisiones, escalar elementos y crear animaciones dentro de gráficos y videojuegos.

67.1 Introducción

Los gráficos y videojuegos usan valores numéricos para representar posiciones, tamaños, velocidades, direcciones y estados.

Posición: (x, y)
Velocidad: cambio de posición por unidad de tiempo
Tamaño: ancho, alto o radio

Las expresiones algebraicas convierten esos datos en comportamiento visible.

67.2 Coordenadas en pantalla

Un objeto en pantalla suele ubicarse mediante coordenadas x e y.

const jugador = {
  x: 120,
  y: 80
};

console.log(jugador.x);
console.log(jugador.y);

La coordenada x indica desplazamiento horizontal y y indica desplazamiento vertical.

67.3 Movimiento horizontal

Para mover un objeto, se actualiza su posición usando una velocidad.

function moverHorizontal(objeto, velocidad) {
  return {
    x: objeto.x + velocidad,
    y: objeto.y
  };
}

const jugador = { x: 50, y: 100 };

console.log(moverHorizontal(jugador, 8));
console.log(moverHorizontal(jugador, -5));

Una velocidad positiva mueve hacia la derecha y una negativa mueve hacia la izquierda.

67.4 Movimiento con tiempo

En animaciones, el movimiento suele depender del tiempo transcurrido.

nuevaPosición = posiciónInicial + velocidad · tiempo

Este modelo permite que el movimiento sea consistente aunque cambie la velocidad de actualización.

67.5 Posición usando velocidad y tiempo

La fórmula de movimiento se puede convertir en una función.

function posicion(inicial, velocidad, tiempo) {
  return inicial + velocidad * tiempo;
}

console.log(posicion(100, 20, 0));
console.log(posicion(100, 20, 1.5));
console.log(posicion(100, -10, 3));

El resultado indica dónde estará el objeto luego de cierto tiempo.

67.6 Movimiento en dos dimensiones

Un objeto puede moverse simultáneamente en x y en y.

function mover(objeto, velocidad, tiempo) {
  return {
    x: objeto.x + velocidad.x * tiempo,
    y: objeto.y + velocidad.y * tiempo
  };
}

const objeto = { x: 10, y: 20 };
const velocidad = { x: 30, y: -5 };

console.log(mover(objeto, velocidad, 2));

La misma idea se aplica a personajes, proyectiles, cámaras y partículas.

67.7 Distancia entre objetos

La distancia entre dos puntos permite saber qué tan cerca están dos objetos.

distancia = √((x₂ - x₁)² + (y₂ - y₁)²)

Esta fórmula se usa para medir alcance, proximidad y colisiones circulares.

67.8 Distancia en JavaScript

Separar las diferencias en x e y hace que la fórmula sea más clara.

function distancia(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  return Math.sqrt(dx ** 2 + dy ** 2);
}

const jugador = { x: 10, y: 20 };
const moneda = { x: 40, y: 60 };

console.log(distancia(jugador, moneda));

La función devuelve la distancia directa entre ambos puntos.

67.9 Colisión circular

Dos círculos colisionan si la distancia entre sus centros es menor o igual que la suma de sus radios.

function distancia(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  return Math.sqrt(dx ** 2 + dy ** 2);
}

function colisionCircular(a, b) {
  return distancia(a, b) <= a.radio + b.radio;
}

const jugador = { x: 10, y: 10, radio: 12 };
const enemigo = { x: 28, y: 10, radio: 8 };

console.log(colisionCircular(jugador, enemigo));

Este tipo de colisión es simple y eficiente para muchos juegos 2D.

67.10 Colisión rectangular

Dos rectángulos alineados a los ejes colisionan si sus áreas se superponen.

function colisionRectangular(a, b) {
  return a.x < b.x + b.ancho &&
    a.x + a.ancho > b.x &&
    a.y < b.y + b.alto &&
    a.y + a.alto > b.y;
}

const jugador = { x: 10, y: 10, ancho: 30, alto: 40 };
const caja = { x: 25, y: 20, ancho: 50, alto: 20 };

console.log(colisionRectangular(jugador, caja));

Este método se conoce como colisión entre cajas alineadas a los ejes.

67.11 Escalado de objetos

Escalar un objeto significa multiplicar sus dimensiones por un factor.

function escalarRectangulo(rectangulo, factor) {
  return {
    ancho: rectangulo.ancho * factor,
    alto: rectangulo.alto * factor
  };
}

const sprite = { ancho: 32, alto: 48 };

console.log(escalarRectangulo(sprite, 2));
console.log(escalarRectangulo(sprite, 0.5));

Un factor mayor que 1 agranda y uno entre 0 y 1 reduce.

67.12 Interpolación lineal

La interpolación lineal calcula un valor intermedio entre dos valores.

valor = inicio + (fin - inicio) · t
t va de 0 a 1.

Se usa para suavizar movimientos, transiciones y animaciones.

67.13 Interpolación en JavaScript

Una función de interpolación puede mover un punto hacia otro de forma gradual.

function interpolar(inicio, fin, t) {
  return inicio + (fin - inicio) * t;
}

function interpolarPunto(a, b, t) {
  return {
    x: interpolar(a.x, b.x, t),
    y: interpolar(a.y, b.y, t)
  };
}

const inicio = { x: 0, y: 0 };
const fin = { x: 100, y: 50 };

console.log(interpolarPunto(inicio, fin, 0));
console.log(interpolarPunto(inicio, fin, 0.5));
console.log(interpolarPunto(inicio, fin, 1));

Con t = 0.5 se obtiene el punto medio entre las dos posiciones.

67.14 Puntuaciones y niveles

El álgebra también modela puntuaciones, dificultad y crecimiento de niveles.

function experienciaParaNivel(nivel) {
  return 100 * nivel ** 2 + 250 * nivel;
}

for (let nivel = 1; nivel <= 5; nivel++) {
  console.log(nivel, experienciaParaNivel(nivel));
}

Una fórmula cuadrática hace que cada nivel requiera más experiencia que el anterior.

67.15 Conclusión

En gráficos y videojuegos, el álgebra convierte números en movimiento, interacción y comportamiento. Coordenadas, velocidades, distancias y escalas son expresiones algebraicas aplicadas.

Cuando un objeto se mueve, cambia de tamaño o interactúa con otro, hay una fórmula detrás.

En el próximo tema se estudiarán aplicaciones del álgebra en simulaciones.

Volver al índice