New color cycling technique for animated images

Joseph Huckaby has implemented animation with color cycling in HTML 5 with a new color cycling technique called ‘BlendShift Cycling’.

The animations shown on his site are absolutely stunning. The images are exquisitely drawn with great attention to detail. The animations have been quilted into many different layers of a scene. There are so many different things going on, you have to look at an image for a long time to fully appreciate it. The animations were created by artist Mark Ferrari.

Joseph has implemented color cycling using an HTML 5 canvas object. He programmatically creates an image data object from the canvas 2d context by calling context.createImageData, and then writes the pixels into it. Since canvas does not support images with indexed colors, it is not sufficient to just update the color lookup table to achieve a color cycled animation. Instead, each individual pixel has to be updated explicitly. This is quite a burden for JavaScript, causing the fan of my laptop to blow strongly after looking at an animation for a few minutes. Nevertheless, the animations achieve about 30 fps on my 2 GHz Intel Core 2 Duo.

Mark has created the images using Deluxe Paint II for PC compatibles. The color cycling is done using CRNG “color range cycling”, and is thus limited by the number of colors in the palette. (Using DRNG “DPaint enhanced color cycling” available in Deluxe Paint IV for Amiga, it would have been possible to use more colors). Therefore, since the number of colors is limited to 256, and since Mark uses so many different cycles simultaneously, I would have expected to see some kind of jerkiness in the animations – but they are super smooth!

This is thanks to a new technique named ‘BlendShift Cycling’ which Mark has developed. Instead of shifting colors in discrete steps through a cycle, the colors are blended seamlessly in and out of the color registers. – A very simple and effective technique.

Since I am hosting a number of CRNG cycled animations on my web site, I thought it would be great to have the same quality of animation too. Therefore I have updated my Java applets. For example, the Defender of the Crown title screen animation is now smooth like silk.