Drawing Grid: fun with tables and colors
Drawing grid was a fun project where people were able to create a picture just by clicking cell by cell in a big html table. That's right, a big 100x100 table. Point and click, while switching colours to make a real masterpiece. The clicking was not ideal, but the results are sometimes really amazing, especially the ones in the portraits category. The images in the archive are generated on the fly with Convert & htmldoc when I approve them. It's currently not possible anymore to submit new images, unless I would get a lot of requests to open it up again :)
You can still browse the entries from the past, some are simply fantastic!
In case you are interested, this is how I converted all the HTML to simple images. The conversion was done in 4 steps.
1. Write the html to a temporary file on the server.
<?php
// $grid comes from the database
$fp = fopen("blah.html","w");
// Yes it had borders :)
fwrite($fp,str_replace('border="1"','border="0"',$grid));
fclose($fp);
?>2. Convert the html to postscript with htmldoc
<?php
$command = "htmldoc --continuous --left 0 --top -23 blah.html -f blah.ps";
system($command,$retval);
?>The left margin is set to 0 and top margin to a negative value, so the html is positioned in the upper-left corner of the document. For some reason '0' for the top doesn't work. There is still a white line of 23 pixels height at the top. With the negative value, this is corrected.
3. Now it's time to convert the postscript to an image using 'convert' which is part of the ImageMagick package. Convert has a lot of options. In my case the crop function is what I needed.
<?php
$command = "convert -crop 202x201 blah.ps blah.jpg";
system($command,$retval);
?>4. The crop function generates a lot of garbage images, but the one I need is blah-0.jpg which will be displayed on this site. So this file is moved and renamed with it's ID in the database to the picture directory. The geometry was determined after some trial & error.
<?php
// $id comes from the database
$picture_directory = "somewhere/on/your/server";
$command = "mv blah-0.jpg $picture_directory/{$id}.jpg";
system($command,$retval);
// cleanup the rest of the garbage files
system("rm -f blah-*",$retval);
?>