It’s time to bring the technology back, using open web technologies like the HTML5 Canvas element and the techniques of Mark J. Ferrari.
Color cycling from the 90s, a technology used in 8-bit video games to achieve interesting visual effects by shifting the color palette, is back! Back then game developers used the technology to animate water, fire or other environmental effects. There was one artist that took color cycling to a whole new level. Mark J. Ferrari invented his own techniques of using the technology for scenes. He achieved all his effects without any layers or alpha channels — just one single flat image with one 256 color palette.
The technique then died, but Joe from Effect Games thinks that it’s time to bring it back, using open web technologies like the HTML5 Canvas element. The artist shared a demo which is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. He used 35 of Mark’s original 640×480 pixel masterpieces and I added some ambient environmental soundtracks to match. You can find the demo here.
Q & A with Mark J. Ferrari
BlendShift Cycling
Those of you familiar with color cycling may notice something a little “different” about the palette animation in this engine. Many years ago I had an idea to improve color cycling by “fading” colors into each other as they shifted, to produce many “in between” frames, while preserving the overall “speed” of the cycling effect. This creates a much smoother appearance, and gives the illusion of more colors in the scene. I call this technique BlendShift Cycling. Someone may have invented this before me, but I’ve certainly never seen it used.
You can really see the effect this has if you slow down the cycling speed (Click “Show Options” and click on either ¼ or ½), then turn BlendShift off and on by clicking on the “Standard” and “Blend” cycling modes. See the difference? The colors “shift” positions in whole steps when using Standard mode, but fade smoothly into each other when using BlendShift. If only I’d invented this trick 20 years ago when it really mattered!
Optimization
Amiga IFF / LBM Files
Mark’s scenes are actually Amiga IFF / ILBM files, originally created with Deluxe Paint in DOS. Ah, those were the days! So, to make this work, I had to write a converter program which parses the files and extracts the pixels, the palette colors, and all the cycling information, and writes it out as something JavaScript can understand. The data is stored as JSON on disk, and delivered to the browser with gzip compression. The data sent over the wire ends up being about 100K per scene, which isn’t too bad (most of the soundtracks are larger than that, haha). My converter script is written in C++, but included in the source package if you are interested.
Browser Support
The color cycling engine works in the following browsers / platforms:
Safari 4+ Mac/PC | Works |
Chrome 5+ Mac/PC | Works |
Firefox 3.5+ Mac/PC | Works |
Opera 10.6+ Mac/PC | Works |
iPhone with iOS 4+ | Works |
iPad with iOS 3.2+ | Works |
Internet Explorer 6, 7, 8 | Does not work, unless of course you have Google Chrome Frame, hehe. |
Internet Explorer 9 | Works |
You can download the source code and get more details on the technology here.