Color Cycling from the 90s Returns with HTML5

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

In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!

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/PCWorks
Chrome 5+ Mac/PCWorks
Firefox 3.5+ Mac/PCWorks
Opera 10.6+ Mac/PCWorks
iPhone with iOS 4+Works
iPad with iOS 3.2+Works
Internet Explorer 6, 7, 8Does not work, unless of course you have Google Chrome Frame, hehe.
Internet Explorer 9Works

You can download the source code and get more details on the technology here

Join discussion

Comments 1

  • Anonymous user

    Bro, The way to do this is with WebGL and shaders.

    0

    Anonymous user

    ·6 years ago·

You might also like

We need your consent

We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more