Author Topic: Old School Color Cycling with HTML5  (Read 2138 times)

0 Members and 1 Guest are viewing this topic.

Offline Gryzor

  • Administrator
  • 6128 Plus
  • *****
  • Posts: 16.895
  • Country: gr
  • CPC-Wiki maintainer
    • CPCWiki
  • Liked: 4020
  • Likes Given: 7237
Old School Color Cycling with HTML5
« on: 15:05, 26 July 10 »
I just love this one... :)

Quote
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory. Thus began the era of color cycling.
Most games used the technique to animate water, fire or other environmental effects. Unfortunately, more often than not this looked terrible, because the artist simply drew the scene once, picked some colors to be animated and set them to cycle. While this technically qualified as "color cycling", it looked more like a bad acid trip. For an example, just look at the water in this game.
However, there was one graphic artist who took the technique to a whole new level, and produced absolutely breathtaking color cycling scenes. Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts The Secret of Monkey Island and Loom, invented his own unique ways of using color cycling for envrironmental 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.
Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit "true color" games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.
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 640x480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article).

Offline mr_lou

  • 6128 Plus
  • ******
  • Posts: 3.206
  • Country: dk
    • index.php?action=treasury
    • 8-bit Memoirs - a Blu-ray diskmag-like eBook about the 8-bit era
  • Liked: 1370
  • Likes Given: 2694
Re: Old School Color Cycling with HTML5
« Reply #1 on: 08:49, 29 July 10 »
I remember complaining a lot about color-cycling being a technique that was missing on a lot of platforms I looked at after my CPC. I couldn't believe such a simple thing wasn't possible. It was absolutely a plus to be able to do it, since it saved a lot of CPU power.
Glad to see it's finally possible again. :)

Offline Gryzor

  • Administrator
  • 6128 Plus
  • *****
  • Posts: 16.895
  • Country: gr
  • CPC-Wiki maintainer
    • CPCWiki
  • Liked: 4020
  • Likes Given: 7237
Re: Old School Color Cycling with HTML5
« Reply #2 on: 10:55, 29 July 10 »
And in HTML, no less! Btw, it looks as if web design is becoming less and less something everyone could dabble in...

Offline andycadley

  • Supporter
  • 6128 Plus
  • *
  • Posts: 979
  • Liked: 479
  • Likes Given: 79
Re: Old School Color Cycling with HTML5
« Reply #3 on: 12:38, 29 July 10 »
It's clever, but a bit pointless since the CPU now has to do all the work of emulating a palletted display that was precisely what palette switching tricks were aiming to avoid.

Offline Gryzor

  • Administrator
  • 6128 Plus
  • *****
  • Posts: 16.895
  • Country: gr
  • CPC-Wiki maintainer
    • CPCWiki
  • Liked: 4020
  • Likes Given: 7237
Re: Old School Color Cycling with HTML5
« Reply #4 on: 15:02, 29 July 10 »
I don't think the guy did it for that purpose - he just missed the aesthetics of it :)

PS GOD DAMN!!!! I MISSED MY 2000th POST!!!! And I wanted to do something special for it... this is 2001.

Offline mr_lou

  • 6128 Plus
  • ******
  • Posts: 3.206
  • Country: dk
    • index.php?action=treasury
    • 8-bit Memoirs - a Blu-ray diskmag-like eBook about the 8-bit era
  • Liked: 1370
  • Likes Given: 2694
Re: Old School Color Cycling with HTML5
« Reply #5 on: 16:45, 29 July 10 »
I didn't look at the code. I just assumed (even though I again and again learn never to assume anything), that the color cycling was part of HTML5. I guess not then.