Reintroducing Color Cycling Using HTML5 and Canvas Element

Comments Off on Reintroducing Color Cycling Using HTML5 and Canvas Element
Home » 2012 » September » 25
Comments Off on Reintroducing Color Cycling Using HTML5 and Canvas Element

Reintroducing Color Cycling Using HTML5 and Canvas Element


Techie Tuesday


I have just spent a greater part of my morning hypnotized and mesmerized by a particular website. Click on the picture below and you will be taken to the website that occupied me for several hours. Go ahead explore and enjoy the several scenes on offer.


Of course when I come across something as beautiful and intriguing as this demo, I need to go and discover how it was made. By some whimsical, fanciful, perhaps bordering on delusional ambition, I too, would like to be able to come up with something similar.


Here is where my research brought me: Joe Huckaby cracks the code for displaying color cycling online. Joe works with Mark J. Ferrari’s old images.


More about Mark J. Ferrari:

Mark is a graphic artist who took the technique of color cycling to a whole new level, and produced absolutely breathtaking scenes. Mark who also illustrated all the original backgrounds for Lucas Arts Loom, and some for The Secret of Monkey Island, invented his own unique ways of using color cycling for environmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels — just one single flat image with one 256 color palette.


Joe, Mark’s high school buddy, “thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.”


As related by Joe Huckaby on

This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark’s original 640×480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match.


Having myself tackled successfully the Spritely animation technique that uses pure HTML and javascript which I showcase on my homepage on design desk aRk2 – alternative web animation methods will, I guess, continue to fascinate me.


Joe generously shares his JavaScript and C++ source code to his color cycling engine which you can download for free at


From where I am now as a web developer I continue to be grateful to artists and web design/web developer geniuses like Joe, Mike and the warm friendly folks at Spritely who generously share their talents and knowledge.


I hope you enjoyed Mark’s masterpieces which Joe revived on the HTML5 platform.









Related Posts Plugin for WordPress, Blogger...
Be Sociable, Share!
Posted in: Blog, Techie Time, Two