Comments on: Canvas Color Cycling

By: RobG

RobG — Thu, 29 Jul 2010 05:40:32 +0000

Cool, but not very practical. Zoom in on the graphics and they run like molasis in winter. Crashed Safari on my iPad after about 20 seconds. :-(

By: ProPuke

ProPuke — Wed, 28 Jul 2010 02:58:04 +0000

@travisalmand – The optimisation has not been “recreated”. Palette cycling allowed graphics on the screen to be updated without being redrawn. This was from back in the day when blitting graphics onto the screen was computationally expensive & memory for storing animations was a preciously hoarded commodity (and computers stored a lookup table for colours, rather than supporting “high colour” modes).
This has no relation to that any more.
Now we are emulating the rotation in software, on a javascript virtual machine, no-less – It’s humorously highlevel & abstract (which was what @jgw was referring to)
It is, however, wonderfully nostalgic & excellently executed.
And damn! Mark Ferrari’s art is niiiice!
@hansschmucker gets a step further by making the browser perform the rotation, instead (neat idea!). It’s still not /quite/ the same mind-you, but it’s closer :]

By: gonchuki

gonchuki — Tue, 27 Jul 2010 19:53:50 +0000

This is absolutely brilliant. A nice recreation of the technique augmented by the quality of those astounding illustrations.
I used a similar technique in Flash a couple years ago (modifying the PLTE chunk in a PNG) but never reached production as the set of images I was handling was immense and unpredictable (something along the lines of hundreds of animations at 15-30 frames each that were 3D renders), which meant generating each palette was not a simple task.

By: antimatter15

antimatter15 — Tue, 27 Jul 2010 17:30:18 +0000

I recently made (erm, ported) a pure JS canvas -> animated GIF converter (http://github.com/antimatter15/jsgif) so I just did a few changes to canvascycle and tried making it into an animated gif: http://github.com/antimatter15/jsgif/blob/master/Demos/canvascycle/gif.gif

The palettes doesn’t seem right, but it’s still interesting.

By: jhuckaby

jhuckaby — Tue, 27 Jul 2010 16:15:22 +0000

@hansschmucker – I am impressed at how well your technique works, especially considering it isn’t affected by the number of pixels that have to be updated. I honestly considered that when I first started working on this demo (I was thinking GIF images, but same basic idea, manipulate the binary palette in memory and have the browser reload it), but totally dismissed it thinking it would be far too slow for the browser to “reinterpret” a binary image for every frame. I was very wrong. Nice work!

By: Breton

Breton — Tue, 27 Jul 2010 13:42:45 +0000

and also, thanks for pointing out these images by Mark Ferrari. It will take me some time to figure out what’s going on in these images! how does it work!?

By: Breton

Breton — Tue, 27 Jul 2010 13:41:34 +0000

The iphone’s application cache can only hold 5mb per “app”. Even if this technique is not computationally efficient, it is still efficient in terms of space. Look at how the same image data can be reused to show different times of day, and different weather conditions, simply by changing the palette. Look also at the fact that such animations can be achieved without storing multiple frames. We’re talking 5mb, including graphics, sounds, text, and javascript. Yeah, of course let’s revisit old techniques!

By: travisalmand

travisalmand — Tue, 27 Jul 2010 13:22:04 +0000

@igw – Are you saying if someone’s first attempt at recreating an optimization method for a new platform is not more efficient than the original implementation then that person shouldn’t bother? Should we just immediately dismiss all research efforts then?

By: crock

crock — Tue, 27 Jul 2010 13:15:51 +0000

The artist, Mark Ferrari, is brilliant.

By: hansschmucker

hansschmucker — Tue, 27 Jul 2010 12:33:15 +0000

Changed it a bit (the image is now delivered base64 encoded) and now it works in Opera as well (which means that it now works on all modern browsers)…. I’ve also added a big 512×1024 image to show the speed. Doesn’t look any better, though. Joe, where did you get that image?

By: hansschmucker

hansschmucker — Tue, 27 Jul 2010 10:49:19 +0000

Actually, we can make it as efficient as it was back then :) Browsers support any number of image formats with palettes, we just have to alter them and let the browser do the rest.
Here’s a simple example that works in Firefox, Safari and Chrome (not Opera yet… it’s either atob or the fact that I’m using BMPs).
It loads a little slow since I’m directly loading the BMP with a binary XMLHttpRequest and that means going through each byte and checking the range, but that could quickly be replaced.
Once it loads, it just changes the bytes in the BMP header that represent the palette and lets the browser (which is A LOT faster at doing this kind of stuff) worry about how to display a paletted image.
I don’t have a nice image like Joe, so you better not have epilepsy if you intend to watch this :)

http://www.tapper-ware.net/data/devel/web/apps/JS.ColorCycle/

By: DeanSJones

DeanSJones — Tue, 27 Jul 2010 03:35:41 +0000

Interesting… brought back some memories. Color Cycling, aka color map manipulation, along with bit-plane operations, was pretty standard even in the 80′s. It wasn’t just a cute optimization then, it was the ONLY way to render some complex graphics in near-time – because you could change the display with NO PIXEL writes, just a color map flip or bit-plane write to the framebuffer. Ahhh, Good Times.

By: jgw

jgw — Tue, 27 Jul 2010 00:27:32 +0000

I’m impressed that this works as well as it does, and definitely nostalgic for the art style. But palette cycling was an optimization trick, not an end to itself. Am I the only one who finds it rather odd that we’re reproducing a technique like this in a way that is probably orders of magnitude less efficient than in its original form?!