Física de Partículas en el Navegador: Cómo Funcionan la Gravedad, la Atracción y los Sistemas

Las simulaciones de partículas que se ejecutan completamente en el navegador se han convertido en una forma potente de explorar conceptos de física, crear arte interactivo y construir experiencias atractivas. Esta guía original explica los mecanismos centrales detrás de la gravedad, las fuerzas de atracción y los sistemas de partículas — con fórmulas, intuición visual y enlaces directos a playgrounds en vivo en UtiliHub.

¿Qué es un sistema de partículas?

Un sistema de partículas es una colección de muchas entidades pequeñas (partículas) que se mueven según reglas simples. Cada partícula suele tener posición, velocidad y a veces masa o tiempo de vida. Al aplicar fuerzas a miles de ellas simultáneamente, aparecen comportamientos emergentes complejos: órbitas, ríos de luz, explosiones, flujos similares a fluidos o campos de estrellas.

En el navegador usamos la API de Canvas o WebGL. El bucle de simulación corre en cada fotograma de animación (requestAnimationFrame), actualizando posiciones con mecánica newtoniana básica aproximada para rendimiento en tiempo real.

Gravedad y fuerzas de atracción

La fuerza gravitacional clásica entre dos cuerpos viene dada por la ley de Newton:

F = G · (m1 · m2) / r²

En simulaciones interactivas del navegador a menudo simplificamos esto. Para una partícula atraída hacia un atractor fijo (un punto que el usuario coloca al hacer clic), la dirección de la fuerza es el vector de la partícula al atractor, y la magnitud suele ser:

aceleración = fuerza · (posAtractor - posPartícula) / distancia

O una versión suavizada para evitar fuerza infinita a distancia cero:

fuerza = intensidad / (distancia² + suavizado)

La velocidad se actualiza con v += a · dt y la posición con p += v · dt. Múltiples atractores simplemente suman sus fuerzas. Este es exactamente el modelo usado en el Gravity Particles Playground.

Cómo funciona el bucle de simulación

Cada fotograma el navegador llama al callback de animación. Dentro hacemos tres cosas en orden: limpiar o desvanecer el canvas, actualizar cada partícula y luego dibujar cada partícula.

Paso de actualización para una partícula: calcular la aceleración total sumando las fuerzas de todos los atractores (u otras fuentes), multiplicar por el paso de tiempo dt (normalmente una fracción fija de segundo), sumar eso a la velocidad actual y luego sumar la nueva velocidad multiplicada por dt a la posición. Un amortiguamiento opcional multiplica la velocidad por un factor ligeramente menor que 1 para que las partículas pierdan energía lentamente.

El dibujo suele ser un arco o imagen simple por partícula. Los rastros se pueden hacer sin limpiar completamente el canvas cada fotograma, o guardando un historial corto de posiciones por partícula y trazándolos.

Variaciones y ajustes comunes

El suavizado evita que las partículas exploten cuando se acercan demasiado a un atractor. Una constante pequeña añadida dentro del término de distancia al cuadrado mantiene la fuerza finita.

Se pueden combinar múltiples tipos de fuerza: atracción, repulsión (intensidad negativa), arrastre proporcional a la velocidad y ruido o empujones aleatorios para movimiento orgánico. El tiempo de vida y el tamaño pueden desvanecerse para que las partículas aparezcan y desaparezcan suavemente.

En sistemas de flujo continuo como Río de Luz la posición no se integra a partir de fuerzas; en cambio cada partícula tiene un parámetro t que avanza a lo largo de un camino predefinido. El color y la opacidad son funciones de ese parámetro, creando el efecto de río brillante.

Sistemas de partículas como flujos continuos

No todo sistema de partículas trata de atractores discretos. En el Viaje Río de Luz, las partículas se emiten a lo largo de un camino definido por puntos de paso. Cada partícula sigue una spline o curva interpolada entre puntos, con rastros de post-resplandor persistentes y efectos de bloom suave. La densidad, velocidad, color y modo de bucle controlan la densidad visual del río fluente.

La idea clave es emisión continua + tiempo de vida: nuevas partículas nacen al inicio del camino, viajan hacia el final y se desvanecen. La superposición de muchas crea el efecto de corriente luminosa sólida.

Consideraciones de rendimiento en el navegador

• Usa arrays tipados o pools de objetos para evitar pausas por recolección de basura.
• Agrupa operaciones de dibujo (una sola llamada fill/stroke cuando sea posible).
• Limita el número de partículas en móvil; el Gravity Particles Playground expone un control para esto.
• Prefiere requestAnimationFrame e integración con delta-time para velocidad consistente entre dispositivos.
• Para efectos más avanzados, WebGL o WebGPU pueden manejar decenas de miles de partículas.

Preguntas frecuentes

¿Por qué las partículas a veces salen de la pantalla? Sin amortiguamiento o una fuerza de contención conservan la velocidad ganada cerca de un atractor. Añadir un pequeño término de arrastre o envolver las posiciones mantiene el sistema estable.

¿Puedo usar esto para simulación de fluidos? Los sistemas de partículas simples aproximan fluidos añadiendo repulsión entre vecinos y viscosidad. Los solucionadores reales de fluidos (SPH o basados en malla) son más pesados pero siguen el mismo patrón de fuerza e integración.

¿La física se ejecuta en el servidor? No. Todo ocurre en el navegador con Canvas o WebGL. Compartir una URL solo comparte los parámetros, no una simulación del lado del servidor.

Consejos prácticos para construir tu propia simulación

Empieza con un paso de tiempo fijo (por ejemplo 1/60 de segundo) aunque la tasa de fotogramas real varíe; así el movimiento se mantiene consistente. Limita la fuerza o aceleración máxima para que un solo atractor no lance partículas por toda la pantalla en un fotograma.

Separa la lógica de actualización de la de dibujo. Eso facilita añadir pausa, cámara lenta o depuración paso a paso más adelante. Guarda las partículas en un array simple o buffer tipado y reutiliza objetos en lugar de asignar nuevos cada fotograma.

Cuando quieras rastros, prefiere un clear semi-transparente (fade) a mantener historiales largos de posiciones; es más barato y se ve suave. Para herramientas interactivas, expón solo dos o tres controles al principio (intensidad, cantidad, amortiguamiento) para que los usuarios exploren sin saturación.

Experiencias relacionadas en UtiliHub

Los mismos principios de partículas aparecen en varias otras superficies interactivas:

• Partículas de gravedad — coloca atractores y mira cómo se forman órbitas en tiempo real.
• Río de Luz — flujo continuo brillante a lo largo de puntos de paso.
• Firma de partículas — partículas que se ensamblan en texto o formas.
• Constellation Studio — diseños tipo campo de estrellas que puedes compartir.

Todas se ejecutan completamente en el navegador. Experimenta, comparte las URLs resultantes y descarga instantáneas PNG cuando estén disponibles.

Conclusión

Los sistemas de partículas en el navegador convierten bucles simples de fuerza e integración en experiencias ricas y compartibles. Al entender las aproximaciones de la ley de Newton, el suavizado, el amortiguamiento y la emisión continua, puedes recrear órbitas gravitatorias, ríos brillantes y muchos otros efectos sin salir de la página.

Empieza con los playgrounds en vivo enlazados arriba y luego experimenta con tus propias variaciones. Todo se ejecuta del lado del cliente — no salen datos de tu navegador para la simulación en sí.

Exploración adicional

Entender el bucle básico de fuerza e integración te permite inventar nuevos comportamientos rápidamente: firmas de partículas que forman texto, mapas de constelaciones, rastros de fuegos artificiales y patrones caleidoscópicos comparten la misma base.

Todas las simulaciones en UtiliHub se ejecutan completamente del lado del cliente — no se envían datos a servidores para la física en sí.