Interesting demos that use Web Workers

DEMO 1:

A variation of the prime number example (previous lecture) which shows that an animation in the parent page is not affected by the background computation of prime numbers. Try it online: http://html5demos.com/worker

Move the blue square with up and down arrows, it moves smoothly. Click the “start worker” button: this will run the code that computes prime numbers in a Web Worker. Now, try to move the square again: the animation hasn’t even slowed down…

Demo 2

Do ray tracing using a variable number of Workers, and try it online: http://nerget.com/rayjs-mt/rayjs.html (if you’ve not heard of it before, here’s an explanation that will tell you more than you will ever want to know about ray tracing!)

In this demo, you can select the number of Web Workers which will compute parts of the image (pixels). If you use too many Web Workers, the performance decreases because too much time is spent exchanging data between workers and their creator, instead of computing in parallel.

Other demos

Many impressive demos at the Mozilla Developer Network

Try them online at the MDN demo repository!

There are also many impressive demos at Chrome Experiments

Try them!