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:

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

document.open('image/gif');
document.write(image_gif_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:

javascript:'GIF89a\1\0\1\0\200[...]\1\0;'

var trans = 'GIF89a\1\0\1\0\200[...]\1\0;'

javascript:transparent