September 27, 2002

12:23 PM

CSS Art?The weblog of Steven Champeon is in hiatus-mode now. At the moment it presents certain photos on the first page. Photos? If you click one, you get something that looks like a badly increased jpeg or something. But it isn't. Take a look in the source code. How did Champeon made that? And: Why?
posted by ronsens (20 comments total)

One of my coworkers did this a few years back with PHP, except with tables (this was before CSS was widespread). You could pass variables into the querystring to set the cell-size, which made for some really cool mosaic Unreal Tournament screenshots. It's actually pretty easy to do.. just get the RGB values of a GIF and generate a colored span/td for each of them.
posted by dvdgee at 12:31 PM on September 27, 2002

He probably used something similar to bg_ascii, which does the same thing but uses html 3, font color tags, it automatically converts any image into a full color html ascii document, or into a plaintext b&w ascii document. Pretty cool. I hope he didn't do it by hand.
posted by Grod at 12:32 PM on September 27, 2002

Your link returns a 403 ("Access to resource is forbidden") error to my browser, though going straight to the top level works for me. (However, page loading was taking an eternity -- ditto for any click-through.) Otherwise, what dvdgee said.
posted by macrone at 12:36 PM on September 27, 2002

As for why: Because he could? Why not? It's neat and would make a fun little programming experiment.
posted by Su at 12:52 PM on September 27, 2002

It's worth pointing out that whatever he used is smart enough to group things: it uses just a single span if there are several pixels of the same color in a row.
posted by gleuschk at 12:55 PM on September 27, 2002

Also to help you answer the question of why, keep in mind Steve also programmed a way to visualize the WHOIS database, plotting the .org/.com/.net availability in real time. He's an inquisitive, innovative programmer, and that's why he creates stuff like this.

I read about his CSS experiments somewhere, but can't recall the full explanation. There's much more than meets the eye, if I remember correctly. I emailed him to ask that he repost it here.
posted by mathowie at 12:57 PM on September 27, 2002

Increase the text zoom to zoom in!
posted by rschroed at 1:15 PM on September 27, 2002

Heck this is neat. Would love to know what he's using to build all that CSS. As for why? Because it's there.
posted by aladfar at 1:23 PM on September 27, 2002

View source on the index page for a (sort of) explanation.
posted by modofo at 1:24 PM on September 27, 2002

This reminds me of the computer stupidities:
"I recently visited the site of a company which shall remain unnamed and was frustrated by the extremely slow screen refresh as I scrolled through the page. I investigated and discovered that instead of declaring a plain green background color for the page, they had created a one pixel GIF image which was 'tiled' as a background."
posted by whatzit at 1:28 PM on September 27, 2002

Whatzit: I've seen that done before, mainly due to browsers incorrectly rendering hex values at different color depths, especially 16-bit, which makes it impossible to seamlessly use background colors on non-transparent GIF's or JPEGS.

The stupid part is that they used a 1x1 image - I never use tiled background images smaller than 20x20.
posted by dvdgee at 1:44 PM on September 27, 2002

Why? Because, as Su says, because I can :) I was kinda stressed out, too many projects going on, and so forth, and needed some sort of fun project to take my mind off the rest.

What can I say? I'm funny that way.

I had a bunch of 96x128 jpegs I'd made over the past few years for the "obligatory fake webcam pic" section of the 'blog. So, I threw them together on the home page and used a 404 ErrorDocument to redirect everything else to that page, because I'm sick of my blog and want to do something new with it, but didn't have time at that point. The rationale is in the comments on that page, along with some fun, if simple, math. And, of course, each line in the comment is 80 characters long, for no good reason other than I wrote it in emacs via the Terminal on OS X. And it's all valid XHTML and CSS, or should be, anyway. All the pages I tested after working the bugs out were valid, anyway.

How did I do it? I realized I could convert the graphics into XPMs using ImageMagick, since XPM is a pretty easy format to work with in Perl; it contains an ASCII (e.g., more or less human readable) colormap and pixel array. And from there, I could write a perl script to generate an XHTML page with spans as pixels, and a stylesheet keyed to the colors each pixel needed to be.

The script itself is pretty simple, just 180 lines of perl including comments. I've posted the actual script here if anyone cares. All you need is an X11 rgb.txt file, which comes with X Windows and emacs, among other places, I suppose. The box I ran it on doesn't have X Windows, so I used the file that comes with emacs instead, but as long as the format is three decimal r, g, and b values followed by a colorname, and they're separated by whitespace, you should be all set.

The script works on every XPM file I tested it on. If you find one it doesn't work on, fix the script ;)

The run-length encoding is just a bonus - these can get pretty big (the smallest is 138K to the largest, which is 708K). I also tried using other tags, like q and tt to see if I could get the size down, but it doesn't help all that much. I guess I'd save 147K off the largest one by switching from span to q, but that feels like a kludge. I could have used p and set display to inline, I suppose. Maybe if I tinker with it again I'll fix that. Heh. 'p' for 'pixel'? Or maybe have it spit out XML, but that's not as portable.

I tried to optimize the JPEGs to the 216-color palette or smaller before converting them to XPMs in order to really cut down on the size. Most of the graphics have a 256 color palette, which means (256 * 48 = ) 12288+ bytes just to hold the colormap, so making the palette smaller would cut that down, as well as being able to merge similar colors into longer run lengths (and therefore save space on markup). But that made the quality even worse, and I was starting with some pretty small graphics, anyway, so I figured what the heck.

It's not like I expected anyone to visit, frankly. I sent it on to Eric Meyer and Tantek Celik, as a CSS browser torture test, and pretty much forgot about it until Matt pointed out that you all were talking about it.

Oh, and thanks to rschroed for the text zoom thing - I hadn't thought to try that, but it does work. Cool :)
posted by schampeo at 2:49 PM on September 27, 2002

thanks for the answers. especially schampeo of course.

(my why-question was more a rhetoric one :-) )
posted by ronsens at 3:14 PM on September 27, 2002

I wrote a script to do the same thing a few years ago. Mine uses CSS and outputs an all-text page, containing colored characters with colored backgrounds. The background color is the average color in the cell, the foreground character partly encodes the error. It also outputs a CSS palette page. I'm only sure that it works in IE.

An example is this page, with this being the original image. You can download the PERL script from here. It requires the GD graphics library. It works on GIF and JPEG images if you have GD v1.19; if you have later versions of GD it will not work with GIFs (Compusurve made them take it out.)

The script was not originally designed for distribution, so I hope the code is not too ugly.

On preview: schampeo beat me to it. But you are welcome to play with mine as well.
posted by quarantine at 3:28 PM on September 27, 2002

New tagline: "Metafilter: You're welcome to play with mine as well"

well, it was funny in my head
posted by fvw at 4:02 PM on September 27, 2002

I'm only sure that it works in IE.

In Mozilla (1.2a), it's very broken, but cool in a glitchy sort of way: random whitespace, punctuation, and shards of color.
posted by hilker at 4:08 PM on September 27, 2002

Err, oops, this is the original image.
posted by quarantine at 4:53 PM on September 27, 2002

This URL makes my browser cry.
posted by Hamusutaa at 5:03 PM on September 27, 2002

that's beautiful quarantine
posted by mhjb at 5:05 PM on September 27, 2002

Thanks, mhjb.
posted by quarantine at 5:15 PM on September 27, 2002