How to create sprite animation on a web page?
Well, there are definitely multiple ways of doing it.
How about being cool?
What do the cool dudes do nowadays?
They write in HTML5 with libraries like KineticJS.
Kinetic provides a quick and easy interface for showing animation.
But there is one problem. It reads all sprites from a single image. Figuring out sprite coordinates is way too boring.
I have a good news for you: I wrote a software to automate it!
Here is the software:

Draw sprites in a single image and store the image as png or jpg. Sorry, my application only supports up to 9 sprites. You are welcome to modify it.

Start the application

Push “Load Images” button and load your image. It shall be visible on a screen.

With the left slider, set total number of your sprites.

With the right slider, choose sprites one-by-one. With the left mouse button, drag blue rectangle to frame the first sprite. Use right mouse button + mouse move to resize the box. Sorry, I use same size for all frames. Rationale: I’m too lazy to resize each individual sprite.

Repeat for all frames: select frame with the right slider and move blue rectangle to frame it.

Push Save button to save the result

Unpack “web package”, copy your image to folder walkcycle_4, then in that folder open walkcycle.htm and replace lines like x: 214.666666666667, y: 30.6666666666667, width: 138.666666666667, height: 144.666666666667 with the data you generated and saved.

Change image file name at the end of walkcycle.htm with your image.

Open walkcycle.htm in a browser. It might ask you whether you allow content to be executed. Allow it. Push “Start” button and enjoy.

Sadly, it does not work in Opera. But it works in Google Chrome, Mozilla and IE on my machine.

Well, Stellaris is no longer a paperweight – thanks to the guys who wrote Energia

I plug thing together and it did not work. I swapped wires to inputs 1 and 2 and it started spinning. Why is that? I’m not sure, but I have noticed that LEDs on the control board fire in the wrong order, and I foxed it with swapping wires. Now it spins OK.

You can see 3 LED ON – it is side effect of digital camera long exposure time. Only 1 or 2 LEDs are ON at a time.

How I’m going to use it? I have no idea. Perhaps, it will go to back to the shelve.

See source code after the break. I did not write it – I found it on the internet and tweaked a bit.

It takes a little bit of programming, but that’s the fun part.
Kinect code is written in C# and run on Win7/64 PC. I use example from Kinect SDK. Arduino part is written in Arduino C. They communicate via Serial-over-USB.

Sadly, it is little too late for Halloween. Never mind, I already have a REALLY CRAZY idea for the next year!

If you want to use Kinekt sources, download the toolkit from MS web site and compare project FaceTrackingBasics-WPF with my sources using something like WinMerge. You will see what did I change.

Arduino part is missing code that checks for non-”0″. But it works. The idea was – if there is bad package, or PC-Arduino get out-of-sync, Arduino shall skip bad data and re-sync. However, code works just fine without it, so I never added the last few lines of code.
(do you remember programming Int14 in MS DOS? That thing required all kind of SW recovery and yet worked unreliably, or maybe I just had some bad hardware). Anyways, I tell to myself: it is not broken, so do not fix it.

Oh, and communication protocol is very simple. PC sends to Arduino 3 bytes over and over:
0×00, X, Y