JSPenguins, a JavaScript clone of XPenguins

XPenguins is a popular novelty application for X11/Xorg (the Linux/UNIX windowing system) which fills the screen with animated penguins. These little fellas parachute down from the sky, walk along the tops of windows, zoom across your toolbar on skateboards etc etc.

One weekend, I thought it would be fun to write a JavaScript clone of XPenguins, and here it is: JSPenguins. Assuming you have JavaScript turned on in your browser, you should be able to see them right now.

By default, JSPenguins only respects the geometry of the browser window. A falling penguin will continue to fall until it hits the bottom of the screen. A penguin moving horizontally will continue until it reaches the side of the screen. This behaviour is easily changed though, and any HTML element can act as an obstacle for the penguins...

This text is wrapped inside a div element. If a penguin falls from the sky onto this div, it will break its fall. If it walks to the far left or right of the div, it will either fall over the edge, or turn round and walk back. Simply tell JSPenguins the HTML id attribute of any elements you wish to be treated as obstacles, and it will do the rest!

Download JSPenguins

The latest version (actually, it's the only version) of JSPenguins is v1.0 and is available here: jspenguins-1.0.tar.gz

Inside the tarball you'll find the JavaScript file, a directory containing 13 images, a README, and a LICENSE file. JSPenguins is released under the GPL (which pretty much means it is free)


JSPenguins is easy to integrate into your existing site. Upload the images and JavaScript to your server (the images should be in a subdirectory named jspenguin), then add the following entry right before your page's closing tag to load the JavaScript:

    	<script src="jspenguin/jspenguin.js"></script>

And that's it. However, there are a number of configurable options in jspenguin.js:

        var number_penguins = 20; // Number of penguins. JavaScript can be CPU-intensive
				  // - think carefully before setting higher than say 50

        var penguin_elements = new Array ('element1', 'element2', 'element3');
				  // List of element IDs to treat as obstacles eg:
				  // <div id='element1' ...>

Near the bottom of jspenguin.js, you'll find the following:

          }, 20)

This causes a delay of 20ms between iterations of the main loop. Changing this number will affect the overall speed of the penguins' movement.

Finally, throughout the code you'll find numerous uses of Math.random to control the penguins' behaviour. For instance, when a falling penguin lands on a 'surface' it is 3 times more likely to walk than to dig. Play around with these numbers if you aren't happy with the default.


Downloading the JSPenguins code enables you to integrate it into your own website. What if you want to see cute penguins on other sites? The answer is a JavaScript bookmark (a bookmarklet). Right click on this link and choose 'Bookmark this link'. Next browser to another website, click the newly created bookmarklet from your bookmark menu, and penguins will appear.

The limitation with this approach is that the code contains generalizations about which elements to treat as obstacles, and this is very site-specific. In this bookmarklet, td and img tags are treated as obstacles. If you wish to change it, you'll need to upload a modified copy of jspenguin-bookmarklet.js to your server, then edit the bookmarklet to reference this copy.






Fun Stuff


A collection of smaller bits and pieces
about life as a sys admin

Pete's Shed

Art, Electronics, Woodwork and other little projects I do when I'm hiding in the shed from my wife.

linux support email pete@linuxbox.co.uk
(+44) 07890 592198