Color Cycling in HTML5 (also, pretty old-school game artwork)

negativeliberty on 27/7/2010 at 00:43

Thanks, that's amazing, brought me right back.

Quote Posted by Digital Nightfall

They're all from Mark Ferrari's personal portfolio. I don't know if any were ever used in a game or if they're just his personal artwork. I also don't know who animated them. They're not animated at his website.

The animation is achieved by "cycling" specific colours in the palette, unless I've horribly misunderstood it. Like the waterfall or beach scene, you assign certain colours in the palette (of the water, in this case) to cycle through set values (colours) ranging from blue to light blue to white and so on. Amazing what can be done with such a 'simple' trick.

I think we can now safely say HTML5 is becoming a lot more interesting even for gaming, probably won't be long till we'll see a game similar to Machinarium done in HTML5 instead of Flash.

Digital Nightfall on 27/7/2010 at 01:19

I know how it was done, negativeliberty. I don't know who did it, though. The programmer mentions that he got the images from the artist's portfolio, but doesn't explain if he animated them himself or if the artist had a hand in it. I'd suspect the later, but it's not explained where I can see.

addink on 27/7/2010 at 09:58

Quote Posted by Digital Nightfall

[...] but doesn't explain if he animated them himself or if the artist had a hand in it. I'd suspect the later, but it's not explained where I can see.

The animation is done by the artist. All the programmer needs to know is which ranges in the palette should be looped.

Though there never was a standard for this, some image file formats could store the ranges for palette looping. For instance the old startup screen for Windows 95 had a color palette animated loading bar and this screen was completely defined within a single bmp (a file cleverly disguised by being named logo.sys). I remember tinkering around with it, trying to get one of the locations of Indiana Jones And The Fate Of Atlantis to show and animate.

These examples are amazing btw. Could not believe these were done using a single 256 color palette. I checked. They are.

EDIT:
As stated in the (http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5#_section_1_3) linked page the original files were of the Amiga IFF format that contains the palette cycling information.

ZylonBane on 27/7/2010 at 14:01

Holy crap, that one that uses palette cycling to simulate falling snow is incredible.

Note that the default display is kind of cheating though, regarding simulating a true 256-color display. If you pop open the options and switch the Cycle Mode to "Standard", the animation isn't nearly as smooth.

Quote Posted by Phatose

Kind of silly to peg it as HTML5 though. The majority of the work is done server side, turning the old Amiga images into JSON, and after that doing the rest is trivial even in HTML4. Make a bunch of divs, set the background color of the ones that change with a css class, and then manipulate the class.

Yeah... (http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5#_section_1_2) no.

Phatose on 27/7/2010 at 16:52

No, he's not using the technique I described. Not really relevant to what I'm saying though.

If, instead of using canvas and an array of pixels, he'd used divs and css classes, he'd be adjusting the background color of 4-5, maybe up to 10 css classes instead of 300,000 pixels.

ZylonBane on 27/7/2010 at 18:27

Or you could just replace the whole thing with an animated GIF. What's your point?

Phatose on 27/7/2010 at 20:25

That portraying it as some new, HTML5 only tech gives the impression that it's something you can't do in HTML4, and there are far too many of those floating around the net as is.

Nameless Voice on 28/7/2010 at 13:28

Very cool.

The rain and snow is particularly impressive.

I'm reminded of how the Windows 95/98 startup screens supported colour cycling - at one point I had a pulsating fractal effect there, back in the day.

Melan on 28/7/2010 at 14:13

Beautiful. There is just something about old digital artwork that captures the imagination even when the technology becomes outdated. A lot of games that were made for the Amiga first had this quality - the Ishar series, Transarctica... Memories.

SubJeff on 29/7/2010 at 14:28

Quote Posted by Phatose

That portraying it as some new, HTML5 only tech gives the impression that it's something you can't do in HTML4

If you are prepared to hack it in you can do a massive amount with HTML4, CSS and Ajax, yes.

I think the point is that with HTML5 you can do this in a much simpler fashion. Correct me if I'm wrong.