CREATIVE UI / Canvas 2D · Deterministic simulation · Pointer Events

Particle Playground

Study bounded particle fields with attraction, repulsion, flow, and direct pointer forces.

LIVE SURFACE / 01

Steer the field. Read the forces.

STUDIO / PARTICLE-PLAYGROUND

The canvas is ready
when you are.

Nothing runs in the background. Open the preview to start the experiment.

CONTROL SURFACE / 06

Parameters

The preview starts when opened. Pause freezes the canvas and readouts. Pointer and keyboard input are ignored while paused; Resume clears the force point and continues with a fresh frame clock. Valid parameter changes are accepted while paused but appear on Resume; changing particle count creates a new seeded arrangement. Restart clears interaction and elapsed time, restores the selected settings’ seeded arrangement, and resumes.

Particle count

Maximum active particles in the bounded Canvas 2D field.

Field behavior

The center field attracts, repels, or bends particles into a circulating flow.

Motion intensity

Scales the center field force.

Color treatment

Color maps encode path phase and motion energy.

Pointer force

Repulsion radius and force around the current pointer or keyboard focus.

Reduce motionHold particles at their seeded positions and keep the field static.

One preview frame at a time · no camera, microphone, storage, or external demo URLs.

FIELD NOTES / PARTICLE SYSTEMS

Give every dot a rule it can follow.

A deterministic starting state

A small seeded linear congruential generator places particles in a bounded radial distribution. The same count and seed produce the same initial positions, so reset is repeatable and the simulation can be tested without a browser renderer.

Three fields, one step function

Attract and repel apply a center-directed acceleration with a softened distance falloff. Flow bends the acceleration around the center and adds a low-frequency sine perturbation. A weak spring toward each particle’s home position and exponential damping keep trajectories bounded without a spatial grid or pairwise collision work.

Pointer as a local force

Pointer or touch coordinates are normalized to the current canvas bounds. Particles inside a fixed normalized radius receive a distance-weighted repulsive acceleration. Arrow keys move the same force point and Home recenters it, so interaction does not depend on a mouse.

Canvas 2D and measured scope

Each frame clears one high-DPI Canvas 2D surface and draws at most 720 independent particles. Simulation and drawing are O(n); no particle-to-particle neighbor search is performed. DPR is capped at 2 and the backing store at four million pixels, about 15.3 MiB for one RGBA buffer. Larger surfaces reduce their pixel ratio to stay inside that budget. Browser allocation varies; this is a memory bound, not a frame-rate claim.

Pause, visibility, and cleanup

The host controls pause, resume, restart, and parameter updates. The runtime caps simulation delta after stalls, pauses when the document becomes hidden, observes canvas size changes, and removes its observer, listeners, and animation frame when the frame is unloaded. Reduced motion draws the seeded static field and schedules no continuous animation.

When it is useful

Particle fields can communicate proximity, activity, direction, or changing system state in hero illustrations, empty states, and lightweight data backdrops. Keep essential information outside the canvas and avoid turning decorative motion into the only signal.

Browser and renderer trade-offs

Canvas 2D is selected because this experiment has a hard 720-particle ceiling, independent discs and short trails, and no need for particle collisions or custom shaders. WebGL could reduce draw-call pressure at larger counts but would add context loss, GPU resource disposal, and fallback work without evidence that this workload requires it. Chromium is covered by the full Playwright run; Firefox, WebKit, and physical low-power devices remain unverified.

SOURCE / LICENSE

Original implementation · MIT · no external assets

View source