Color Cycling is a technology used “back in the ‘90s” in video games, where the colors of a particular object are shifted over time to give the appearance of animation. This used less computing resources than actually storing and animating several frames. It was most commonly used for things like water and fire, but later, graphic artist Mark J. Ferrari used the technique to great effect to animate snow, ocean waves, moving fog, smoke, waterfalls and more.

This technique died in the late '90s due to the rise of 3d technology and full 32-bit color games, but it has been brought back to life by Joe Huckaby, who has implemented a full 8-bit color cycling engine in JavaScript using the Canvas element.

But, this isn’t just a port: there is an additional feature of this engine that wasn’t found back when these things were common. That feature, Huckaby calls BlendShift Cycling. Whereas a normal color cycling engine would simply change the colors and move on with it, BlendShift Cycling creates a better looking effect by “fading” one color into the next. As you can see in the demo, the effect looks pretty darn realistic. If you click on Show Options, and then switch to Standard cycle mode, you can see the difference between BlendShift Cycling and Standard Cycling.

Since the canvas element is not yet hardware accelerated (except in IE9), some optimization had to be done in order to make the effect perform at the level you can see in the demo today. Instead of looping through all 307,200 pixels every frame, the scene is pre-processed to extract an array of just the pixels that will be updated. This optimization trick worked well as you can see, and it worked well enough that the demo runs very smoothly on an iPad or other mobile device with a decent processor as well. Very impressive!

You can check out a blog post about the effect here, the demo showcasing scenes designed by Mark Ferrari with or without sound (as played by the HTML5 Audio element), and have a read through the code here. Impressive work!