Demos

I don't think these qualify for the illustrious demoscene pantheon, but I do enjoy creating fun WebGL demos. Some are interactive and have been installed at SPARKcon. Most are created with three.js.

Meet SimPixel

A WebGL-based visualizer for LED displays.

Fireflies

Fireflies is a WebGL demo in which a frolicking flock of fireflies forms flying figures for your fancy.

Glow Rope

A simple WebGL demo of streaming particles.

Kimotion

Kimotion is a framework for building reactive digital art displays.

DiMo: Particles

Dimo: Particles is an artistic particle physics simulation and interactive art exhibit I created (along with fellow Red Hat engineers Ian Hands and Ben Pritchett) for the SPARKcon festival in 2014. Launch live demo! Pictures These pictures are from the art exhibit at geekSPARK in 2014. $GALLERY After the event, I wrote this opensource.com article about the experience. The source code is, of course, open.

RGB WebGL Color Cube

I spent a bit of time this weekend building an RGB color cube for ColorPal, using Three.js. Drag and drop any image, and you’ll see a cube with all the pixels of your image mapped into 3D space. Launch live demo! and view the code. Your web browser must support WebGL, which at this point in history means a fairly recent Firefox or Chrome. In case your web browser doesn’t support WebGL, here’s a video to enjoy while you download Firefox Nightly.

ColorPal

ColorPal is an HTML5 color palette generator. Here’s a gif demonstrating how to use ColorPal. The color quality in gifs is pretty terrible, but you can still see the basic usage. Try it out at colorpal.org. ColorPal also has a command-line interface, powered by Node.js. I’ve written some posts about ColorPal.

Bouncey - canvas physics

This is Bouncey. It’s a simple physics demo I wrote in early/mid 2011, with some contributions and bugfixes from my good friend Greg Gardner. The description for bouncey’s github repo is: “a buggy, rudimentary, just-for-fun javascript physics simulator.” It covers Newton’s laws of motion. #cnvs { margin: 0 auto; display: block; width: 100%; border: 1px solid #464646; -webkit-box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.7 ); -moz-box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.