Keeping a particle artwork light

A few practical decisions behind the animation.

A full-screen animation can consume more resources than its visual simplicity suggests. Just Skedaddling is intentionally small: it uses browser primitives, keeps the particle count bounded and stops doing unnecessary work when the page is not visible.

One canvas, not hundreds of elements

The artwork is drawn into a single HTML5 Canvas. The particles are JavaScript objects rather than individual DOM nodes. This keeps the document structure small and leaves the browser's drawing system to handle the visual output.

requestAnimationFrame

The main loop uses requestAnimationFrame so drawing is synchronised with the browser's display cycle. The time between frames is measured and capped so a long pause does not produce a huge simulation jump when the animation resumes.

Hidden tabs

The page uses the Page Visibility API. When the document becomes hidden, the animation loop is paused rather than continuing to render a full-screen image that nobody can see. When the page becomes visible again, the loop resumes.

Device pixel ratio

High-density displays can make a canvas backing buffer much larger than the CSS dimensions suggest. The implementation uses the device pixel ratio but caps it at 2, balancing sharpness against unnecessary rendering work.

Mobile mode

Mobile devices use 90 particles rather than 180. Touch input is still part of the same interaction model, but the lower particle count leaves more room for the browser to handle the display, input and other work a phone may be doing.

These choices are not intended as a benchmark. They are simply the constraints used to keep this particular experiment lightweight enough to remain a background visual rather than becoming the main task of the device.

Back to notes  ·  See the artwork