The Web Worker Fountains R2

A set of animated water fountains are rendered by a Web Worker and composited together into an HTML5 Canvas element. The background image is the Bellagio Casino in Las Vegas

W3C Web Workers are containers for running JavaScript independently of the code on a web page. Web workers keep a web page responsive by offloading long-running JavaScript to the background. In this demo, web workers offload the task of generating frames for the fountain animations, which improves the page's overall frame rate (versus not using web workers).

Enjoy the show, or use the controls at the bottom to experiement with the fountains.

...
frames per second 
BUFFER SIZE: ... frames
GENERATOR RATE: ... points/millisecond

Tinker Menu

This menu allows manual adjustment of the fountain controls (changes apply to all running fountains)





Web Worker Fountains are generating animation frames composed of particles (each water droplet) and sending them to the web page via postMessage() where they are composited onto a canvas. The main page buffers all the collected frames and draws them at each "requestAnimationFrame" interval.

Web workers can optimize fountain frame creation by working on pre-rendering frames while the main page is drawing the scene to the canvas and painting and rendering. Fountain frames with fewer water droplets can be rendered much faster than frames with lots of water droplets. By pre-rendering many frames, the cost-per-fountain frame is averaged over time, leading to smoother frame rates.

The overall frame rate of this demo depends on the performance of several subsystems:

When not using web workers to power the fountains, pre-rendering is disabled, and the main page takes on the additional work previously handled by the web workers.