Use giflets
Use gifs
Browser safe palette
Data urls

Colorcube Colophon

Colorcube presents the slice of a plane through the browser safe palette, a 6x6x6 colorcube which the major browsers support on 8 bit color displays. When the plane exits the cube before a complete 6x6 slice is completed, it is wrapped back through for another pass. Pressing on a frame button alters the plane. There may be some bugs yet to be worked out. Looking at it, I'm not sure that I believe my own explanation of how it works just now, but it does generate some interesting combinations of colors to look at.

By default, colorcube uses src="javascript:gifdata" urls to display images. This means that images are downloaded in javascript source rather than as image files. The archive of images downloaded by colorcube contains all the 1 by 1 gifs in any color specified by 24 bits of RGB, the (always fashionable) 1 by 1 transparent gif image, and a single image for our frame. The 2^24 color gifs are, obviously, synthesized on the fly rather than enumerated in the source file which is only 2455 bytes large.

An alternative implementation of colorcube is available through the Use Gifs link. In this case the page will download the necessary gifs from my server rather than synthesizing them inline. This should allow a comparison between inline and individually served images.

In principle this method of encoding images could be used to convert whole collections of images into javascript source, which could then archived and compressed into a jar file with the rest of a site's javascript, and all delivered with a single http transfer. Then rather than waiting and wondering when, or if, the rest of images required for rendering a page would be coughed up by the server, one would know that they were all present as soon as the archive arrived.

Support for these constructs appears to be in the version 4 browsers. Thus far I've verified the following:

Explorer worked with the page I used yesterday, but both 4.01 and 5.0 fail today, so there must be some borderline portable code in my javascript. Please send me any examples of support or non support which alter or extend this table, or corrections to the code which allow it to run on more platforms. Opera doesn't display either the giflet or the gif version of the colorcube page.

My original goal was to find any way that a JavaScript program could compute graphics and insert the computed graphics into a web page. One possibility was to use'image/gif');
to write gif images into selected documents. It turns out, after much fruitless effort on my part, that while will open documents with mime type 'image/gif' document.write() cannot write the character with value 0, which makes it very difficult to write gif file data.

A second possibility was to use data urls in which the value of a small object can be encoded inline as base64 content. Since the data in a tag is limited, in worst case, to 1024 bytes, only fairly small images could be displayed this way.

As luck would have it, I asked for help on the comp.lang.javascript newsgroup, and Martin Webb came up with a third solution to the problem. This uses a javascript url to supply the data for the src= field of an image. The data is neither written nor encoded, it is simply supplied as the result of a javascript expression. Thus we may write a url as:

which specifies the 1 pixel square transparent gif as a javascript literal string. Or we might store that data into a global variable:
var trans = 'GIF89a\1\0\1\0\200[...]\1\0;'
and then write the url as:

Roger E Critchlow Jr
Last modified: Fri May 16 19:46:40 MDT 2003