This project grew from a desire to present something using 2D tools that appeared to be 3D. The core of that project can be viewed at Oscillate.
This core function relies on Math.sin() to produce a wave, which I use to create the appearance of depth. My son, Grant, contributed to the math side of the problem solving.
I also wanted to create a machine-like environment, and a set of gears made sense. I created a proof of concept in Adobe AfterEffects, rendered it in a series of 360 still frames, and created a simple Javascript program that would swap images when scrolling, like a flip-blook.
The result was an attractive set of meshed gears that ran smoothly for local testing but refused to perform from a web server, even with the images pre-loaded into the cache.
My next revision used CSS rotate to turn individual gears in place. Performance is excellent, but proper meshing of the gear teeth is difficult. However, I am pleased with the result.
With a basic environment up and running, I needed a story. This is where writer's block set in. Fortunately, this is a class project, and Professor Will Luers asked, "Could you make a kinetoscope with this code?"
A Google search for "first movie" yielded Eadweard Muybridge's famous piece, "Sallie Gardner at a Gallop."
The final version is not historically accurate: Zoetropes are typically mounted vertically, and Muybridge used a device of his own invention, called a Zoopraxiscope, to display this work. However, as a proof of concept and demonstration of the functionality of 'Oscillate,' it is compelling.
Enjoy.