Canvas Demos

Canvas Colour Cycling

• Canvas Application
• Posted on July 27th, 2010

Joe Huckaby has gone back to an 8-bit technique for his colour cycling canvas demo. Back in the days of 8-bit video games graphics cards could only render 256 colors at a time so colour cycling was often used to achieve interesting visual effects by cycling (shifting) the color palette. The technique was fast and took virtually no memory. Thus began the era of color cycling.

Joe has recreated this effect using canvas and some beautiful graphics by Mark J Ferrari. Mark cleverly used color cycling for environmental effects such as rain, snow, ocean waves and smoke.

Graphics by Mark Ferrari

Comments from the Author:

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.

• • delicious
  • Digg
  • Facebook
  • LinkedIn
  • Reddit
  • Stumbleupon
  • Technorati
  • Twitter
• View application