Cómo un protector de pantalla que rebota calcula las colisiones

Un salvapantallas rebotante convincente es un pequeño problema de geometría.
El objeto debe mantener velocidad, tocar los límites visibles, conservar el
movimiento sobrante después de un choque, adaptarse a cambios de tamaño y
contar una esquina solo cuando alcanza paredes horizontal y vertical a la vez.
Mover «píxeles por fotograma» falla al cambiar frecuencia o carga.

Estado mínimo

Para un rectángulo guarda posición (x, y), velocidad
(vx, vy), tamaño del objeto y del viewport. Si la posición es la
esquina superior izquierda:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

La caja visible choca, no un punto central. Cambiar el tamaño modifica los
máximos de x e y.

Usa tiempo transcurrido, no una frecuencia supuesta

El navegador entrega una marca temporal a
requestAnimationFrame. Resta la anterior y convierte a segundos:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

La velocidad se expresa en píxeles por segundo, así 60 y 144 Hz recorren
aproximadamente la misma distancia en el mismo tiempo. Limitar
dt evita saltos al volver de una pausa. La página cancela su
bucle al ocultarse.

Refleja el exceso al llegar a una pared

Fijar x en el límite y negar vx descarta el tramo que cruzó la pared.
Reflejarlo conserva la distancia:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

Aplica lo mismo en vertical. Con un paso máximo razonable basta normalmente
una reflexión por eje; un motor general repite mientras siga fuera.

¿Qué cuenta como impacto en la esquina?

En cada paso registra por separado choque horizontal y vertical. Incrementa la
esquina solo si ambos son verdaderos en ese paso. No compares coma flotante
con x === 0 && y === 0; la propia reflexión ya sabe que
cruzó un límite.

La probabilidad depende de inicio, razón de velocidades y dimensiones. Una
órbita discreta puede no llegar nunca. Redimensionar o cambiar objeto altera
la trayectoria; el contador debe reiniciarse o explicar su semántica.

Detalles de una implementación cuidada

• Tras resize, limita la posición sin teletransportarla aleatoriamente.
• Cambia color solo por un evento de pared.
• Conserva proporción de imagen y aplica límites de tipo y tamaño.
• Mantén Pausa y Restablecer predecibles; Escape sale de pantalla completa.
• Respeta movimiento reducido y detén la pestaña oculta.
• Limita DPR del Canvas para no reservar una superficie excesiva.

Prueba el comportamiento en el
Salvapantallas DVD rebotante. Las
imágenes personalizadas permanecen en el dispositivo.

Referencias técnicas

• MDN: requestAnimationFrame
• MDN: Fullscreen API
• MDN: Screen Wake Lock API

Elige un vector de velocidad

Un control de velocidad representa magnitud; la dirección viene de un vector
normalizado. Para ángulo θ y velocidad s:

vx = cos(θ) * s
vy = sin(θ) * s

Una dirección exactamente horizontal o vertical no recorre toda la superficie.
Evita ángulos cercanos a múltiplos de 90 grados. Generar componentes
independientes puede producir una trayectoria casi plana; elige un ángulo
permitido y deriva ambos.

Pasos grandes y múltiples reflexiones

Un motor reutilizable puede reflejar repetidamente una coordenada hasta
devolverla al rango, con límite estricto de iteraciones:

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

El paso conservador y la pausa al ocultarse hacen excepcionales los saltos
múltiples, pero la defensa ayuda tras depuración, reset o planificación
inusual.

Los eventos de colisión controlan efectos

Con choques horizontal y vertical, el renderizador puede cambiar color, sumar
colisiones, reproducir sonido opcional o actualizar esquinas. Cada efecto
ocurre una vez por evento. Derivar color continuamente de posición ya no
comunica una colisión.

El sonido está apagado por defecto y requiere interacción. A alta velocidad
debe limitarse para evitar audio y anuncios abrumadores.

Las estelas necesitan un modelo de borrado

Un frame nítido limpia Canvas y dibuja una insignia. Una estela cubre el
anterior con fondo translúcido antes de dibujar; menor alfa conserva marcas
más tiempo. Su longitud depende de velocidad y frecuencia. Con DOM, usa un
conjunto limitado de nodos, no añadas elementos para siempre.

Texto e imágenes cambian los límites

El ancho del texto depende de fuente, contenido, peso y renderizado. Mide al
cargar la fuente, añade padding y recalcula máximos. Limita longitud y, si el
objeto supera el viewport, escálalo o céntralo.

Una imagen local debe decodificarse antes de confiar en dimensiones.
ScreenOrbit acepta PNG, JPEG y WebP de hasta 5 MB y 4096 píxeles por lado,
conserva proporción, libera la URL temporal y rechaza SVG/HTML.

Redimensiona sin perder el objeto

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

Preservar posición relativa es más suave que elegir una aleatoria tras barra
móvil u orientación. Resize no es colisión: no suma ni cambia color.

Píxeles de Canvas y geometría CSS

Las dimensiones CSS definen la física. El buffer Canvas puede multiplicarse
por un DPR limitado y el contexto se escala para conservar unidades CSS. Sin
escala, física y dibujo usan unidades distintas; sin límite, un teléfono 4×
reserva dieciséis veces el área.

Ciclo de pausa, visibilidad y fullscreen

Mantén un solo identificador de bucle. Iniciar mientras corre no crea otro
callback. Pausa cancela; reanudar usa una nueva marca para no tratar el tiempo
oculto como movimiento. Fullscreen es presentación: si falla, la vista
incrustada continúa. Wake Lock es independiente y su fallo nunca bloquea la
animación.

Prueba el motor, no solo una ejecución bonita

• Choques directos en las cuatro paredes.
• Colisión simultánea con una sola esquina.
• Impactos cercanos en pasos distintos que no cuentan.
• Reflexión que conserva exceso y signo.
• Secuencias 60/120/144 Hz con igual distancia temporal.
• Reanudación sin salto tras pausa larga.
• Resize menor que posición u objeto.
• Rechazo de imagen por tipo, bytes, dimensiones y decode.
• Reset/inicio repetido con un callback y sin URL retenida.
• Movimiento reducido, teclado, rechazo fullscreen y pestaña oculta.

Accesibilidad más allá de movimiento reducido

Pausa, Restablecer y Pantalla completa necesitan foco visible y etiquetas. No
anuncies cada choque a lectores de pantalla. Los controles táctiles miden al
menos 44 × 44 píxeles CSS y la vista no roba el teclado.

Por qué una esquina puede tardar tanto

Una trayectoria determinista puede repetirse. Según la razón de ancho/alto
efectivos y componentes de velocidad, alcanza una esquina pronto, tras muchos
rebotes o nunca en tiempo práctico. Redondeo, resize, tamaño y velocidad
cambian la ruta. La rareza es parte del atractivo: el contador registra
eventos, no fabrica una esquina.

Usa esta página para una tarea concreta

Explica temporización, rebote, resize y reglas de esquina detrás de la
escena.

Prepara un punto de partida estable

Fija viewport, objeto, velocidad e inicio; registra DPR, tiempo, posición,
velocidad y eventos.

Sigue un proceso práctico de cuatro partes

1. Define. Elige el comportamiento.
2. Registra. Captura estado inicial.
3. Comprueba. Usa tiempo real y reflexión.
4. Decide. Compara contador y fórmulas.

Crea pruebas comprensibles

Incluye tamaño, marcas temporales, pasos de reproducción y estado del ciclo.

Evita afirmaciones confusas

• No uses píxeles por frame.
• No compares igualdad flotante para esquinas.
• No trates resize como choque.
• La demo no modela física real.

Pasa a la siguiente acción útil

Abre el salvapantallas, cambia un control y compara el contador con las
reglas.