Particle Physics in the Browser: How Gravity, Attraction and Systems Work

Particle simulations running entirely in the browser have become a powerful way to explore physics concepts, create interactive art and build engaging experiences. This original guide explains the core mechanics behind gravity, attraction forces and particle systems — with formulas, visual intuition and direct links to live playgrounds on UtiliHub.

What is a particle system?

A particle system is a collection of many small entities (particles) that move according to simple rules. Each particle typically has position, velocity and sometimes mass or lifetime. By applying forces to thousands of them simultaneously, complex emergent behaviors appear: orbits, rivers of light, explosions, fluid-like flows or star fields.

In the browser we use the Canvas API or WebGL. The simulation loop runs every animation frame (requestAnimationFrame), updating positions with basic Newtonian mechanics approximated for real-time performance.

Gravity and attraction forces

The classic gravitational force between two bodies is given by Newton’s law:

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

In interactive browser simulations we often simplify this. For a particle attracted toward a fixed attractor (a point the user places by clicking), the force direction is the vector from particle to attractor, and the magnitude is often:

acceleration = strength · (attractorPos - particlePos) / distance

Or a softened version to avoid infinite force at zero distance:

force = strength / (distance² + softening)

Velocity is then updated with v += a · dt and position with p += v · dt. Multiple attractors simply sum their forces. This is exactly the model used in the Gravity Particles Playground.

How the simulation loop works

Every frame the browser calls the animation callback. Inside it we do three things in order: clear or fade the canvas, update every particle, then draw every particle.

Update step for one particle: compute the total acceleration by summing forces from all attractors (or other sources), multiply by the time step dt (usually a fixed fraction of a second), add that to the current velocity, then add the new velocity multiplied by dt to the position. Optional damping multiplies velocity by a factor slightly less than 1 so particles slowly lose energy.

Drawing is usually a simple arc or image for each particle. Trails can be made by not fully clearing the canvas each frame, or by storing a short history of positions per particle and stroking them.

Common variations and tweaks

Softening prevents particles from exploding when they get too close to an attractor. A small constant added inside the distance squared term keeps the force finite.

Multiple force types can be combined: attraction, repulsion (negative strength), drag proportional to speed, and noise or random kicks for organic motion. Lifetime and size can fade over time so particles appear and disappear smoothly.

In continuous-flow systems such as River of Light the position is not integrated from forces; instead each particle has a parameter t that advances along a predefined path. Color and opacity are functions of that parameter, creating the glowing river effect.

Particle systems as continuous flows

Not every particle system is about discrete attractors. In the River of Light Journey, particles are emitted along a path defined by waypoints. Each particle follows a spline or interpolated curve between points, with persistent afterglow trails and soft bloom effects. Density, speed, color and loop mode control the visual density of the flowing river.

The key idea is continuous emission + lifetime: new particles are born at the start of the path, travel toward the end, and fade. Overlapping many of them creates the solid glowing stream effect.

Performance considerations in the browser

• Use typed arrays or object pools to avoid garbage collection pauses.
• Batch drawing operations (single fill/stroke calls when possible).
• Limit particle count on mobile; the Gravity Particles Playground exposes a control for this.
• Prefer requestAnimationFrame and delta-time integration for consistent speed across devices.
• For more advanced effects, WebGL or WebGPU can handle tens of thousands of particles.

Frequently asked questions

Why do particles sometimes fly off screen? Without damping or a bounding force they keep the velocity they gained near an attractor. Adding a small drag term or wrapping positions keeps the system stable.

Can I use this for fluid simulation? Simple particle systems approximate fluid by adding neighbor repulsion and viscosity. True fluid solvers (SPH or grid-based) are heavier but follow the same force-and-integrate pattern.

Does the physics run on the server? No. Everything happens in the browser with Canvas or WebGL. Sharing a URL only shares the parameters, not a server-side simulation.

Practical tips for building your own simulation

Start with a fixed time step (for example 1/60 second) even if the real frame rate varies; this keeps motion consistent. Cap the maximum force or acceleration so a single attractor cannot fling particles across the whole screen in one frame.

Separate the update logic from the draw logic. That makes it easy to add pause, slow-motion or step-by-step debugging later. Store particles in a plain array or typed buffer and reuse objects instead of allocating new ones every frame.

When you want trails, prefer a semi-transparent clear (fade) over keeping long position histories; it is cheaper and looks smooth. For interactive tools, expose only two or three controls at first (strength, count, damping) so users can explore without overwhelm.

Related experiences on UtiliHub

The same particle principles appear in several other interactive surfaces:

• Gravity Particles — place attractors and watch orbits form in real time.
• River of Light — continuous glowing flow along waypoints.
• Particle Signature — particles that assemble into text or shapes.
• Constellation Studio — star-field style layouts you can share.

All of them run fully in the browser. Experiment, share the resulting URLs, and download PNG snapshots when available.

Conclusion

Particle systems in the browser turn simple force-and-integrate loops into rich, shareable experiences. By understanding Newton’s law approximations, softening, damping and continuous emission, you can recreate gravity orbits, glowing rivers and many other effects without leaving the page.

Start with the live playgrounds linked above, then experiment with your own variations. Everything runs client-side — no data leaves your browser for the simulation itself.

Further exploration

Understanding the basic force and integration loop lets you invent new behaviors quickly: particle signatures that form text, constellation maps, firework trails and kaleidoscopic patterns all share the same foundation.

All simulations on UtiliHub run entirely client-side — no data is sent to servers for the physics itself.