Canvas Colour Cycling
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.
Comments
Maxximum
That’s great. Very good work, excellent design. And it reminds me my early coding on the Amiga, 25 years ago !
Thanks !
Posted on July 28, 2010
BobC
Absolutely beautiful work! Works fine on Opera 10.60/10.70 (Alpha), by the way
.
Posted on August 24, 2010
Yavatar
Works with Fx4b6. Better with acceleration available (smoother and somewhat lower CPU cycles).
Nice demonstration of HTML5. Love the different scenes.
Posted on September 15, 2010
Yavatar
Partially works IE9 beta 1
Low FPS (16-17)
No Sound
Does not zoom when using Max size (just centers in the zoom area)
Posted on September 17, 2010
David Chubrick
Works with Firefox 4 pre7 (Minefield). Beta 6 having issues running it now with new beta nVidia drivers.
Posted on September 20, 2010
Jon
Brings me back – I owned and loved Seize the Day way back when
Posted on November 12, 2010
Alex
Please someone get these as live wallpapers for Android! They would be totally awesome. Not sure how it’d work though, but some talented chaps could figure it out.
Posted on November 12, 2010
apple
is very good, I’am from china.
Posted on July 18, 2011
Himanshu vyas
The great work, Awesome, I am from India.
Posted on July 23, 2011
ashijingguo
it very beautiful，nice
Posted on July 26, 2011
nick
great!Can you teach me how to achieve this?
Posted on November 19, 2011
Related demos