The Sproingies

Welcome to the Sproingies repository!

You can view them live if you have a WebGL-enabled browser.

Credits and Software Licenses

Before copying the code, please read the Credits and Software Licenses page.

History

The Sproingies originally appeared in 1997, written in C and OpenGL 1.0, and made their way into screensavers like xlockmore and xscreensaver. At the time they used 6 baked animation frames, in the form of 6 models, and that was fine because computers of that era generally couldn't show more than 6 frames during the time it took a Sproingie to jump down a single stair. A few years later they were re-written in C++ and OpenGL 1.0, using parametric equations instead of baked animation, and could support full (arbitrarily fast) frame rates.

But CPU-intensive screen savers gave way to greener technology, and monitors and computers went into low-power mode when not in use, so the Sproingies became reclusive, and were not heard from for many years.

Current Implementation

Fast-forward to the present day. The Sproingies are back, ported to Javascript and WebGL, and ready to sproing to life once again in your web browser. Great care has been taken to preserve the original algorithms (from the parametric version of course) and keep the look-and-feel of that version where possible. The fixed-function pipelines of OpenGL 1.0 are long gone, not available to WebGL, but modern shaders emulate the original look (with a small embellishment, namely per-pixel lighting on the Sproingies themselves).

User Controls

The camera that watches the Sproingies will drive itself when left alone, like the screensaver. You can also drive it with the mouse: Left button drag to pan and tilt, and middle or right button drag to zoom. There's a settings panel with some controls for the number, speed, and funkiness of the Sproingies. The settings panel and related UI are done with jQuery UI 1.8.13 and jQuery 1.5.1.

Be sure to try the F11 key, which for most browsers (including Chrome and FireFox) will enter full-screen mode, so you can really get the screensaver look going if you like. Remember the F11 key is needed to get out of this mode (this is browser implementation, I can't hook it up to the ESC key or anything, unfortunately).

WebGL Inspector

There's also a button to embed a copy of the awesome WebGL Inspector v1.5, which does take a small performance hit when you include it, but lets developers dive deep into the draw calls and examine the workings of WebGL. After you hit the button to embed it, look for two new buttons in the far upper-right. One button will capture an animation frame for analysis, and the other button opens the Inspector's UI to examine the captured frame.

Two changes have been made to the embedded copy of WebGL Inspector here: The F11 key was being used as a hotkey to open the Inspector's UI, this has been moved to F5 so as not to conflict with the all-important full-screen function of F11. Also, some tweaks were made to the "embed.js" script to allow the Inspector to be conditionally embedded at runtime, so users can turn off embedding with the click of a button. This was done for performance reasons, to run faster when the Inspector is not in use.

Future Plans

The main idea still on the drawing board is to move most of the Sproingie parametric logic into the vertex shader itself. This would require a lot more computations to be done, in total, but would move the bulk of them out of Javascript and onto the GPU, and thus could be significantly faster on most systems.

Conclusion

Enjoy the Sproingies!