a Sunday morning experiment

I'd like to share the results of a small experiment. I've been
playing around with producing ascii images on the fly with Perl and I
came up with the following idea; why not try making a pure html
version of an image using 1X1 pixel sized divs with the background
color set to the color of each pixel in the original image. Well, it
works, kind of cool in a way BUT… the image I'm working with is a
12kb jpeg and the resulting html file is 3.2mb :-) hehe. Here's the
script (needs GD and the GD perl module):


#!/usr/bin/perl
use GD;
## create the html file and open for writing
$f = "myfile.html";
open F, "> $f" or die "Can't open $f : $!";
## set the path for the image to use
$filename = "/Users/palli/downloads/tryggvi.jpg";
## open the image with GD and determine the size
$myImage = GD::Image->new($filename);
($width,$height) = $myImage->getBounds();
## open HTML tags
print F "<html><body bgcolor=\"#ffffff\">";
## loop through every single pixel, determing color and write div
for($i=0;$i<$height;$i++){
for($i2=0;$i2<$width;$i2++){
## get current pixel
$myIndex = $myImage->getPixel($i2, $i);
## get RGB values for current pixel
($myRed, $myGreen, $myBlue) = $myImage->rgb($myIndex);
## convert decimal values to hex
$hexRed = sprintf("%2.2X", $myRed);
$hexGreen = sprintf("%2.2X", $myGreen);
$hexBlue = sprintf("%2.2X", $myBlue);
## write div with position to pixel position and background to
pixel color
print F "<div style=\"position:absolute; left:".$i2."px; top:".
$i."px; width:1px; height:1px; z-index:1; background-color: #$hexRed
$hexGreen$hexBlue; layer-background-color: #$hexRed$hexGreen$hexBlue;
border: 1px none #000000;\"></div>"
}
}
## close html tags
print F "</body></html>";
## close file
close F;
## That's it, have fun!




Pall Thayer
[email protected]
http://www.this.is/pallit

Comments

, Corey Eiseman

Hey Pall,
That sounds pretty awesome. Do you happen to have it running online
somewhere that we could see the results without installing it? I will
probably play around with it at some point (thanks for sharing the
code!) but don't know if I have time right now or GD installed for that
matter. But I'd love to see it in action. If not, no big deal, thanks
for sharing!

Corey Eiseman
http://toegristle.com/


Pall Thayer wrote:
> I'd like to share the results of a small experiment. I've been playing
> around with producing ascii images on the fly with Perl and I came up
> with the following idea; why not try making a pure html version of an
> image using 1X1 pixel sized divs with the background color set to the
> color of each pixel in the original image. Well, it works, kind of
> cool in a way BUT… the image I'm working with is a 12kb jpeg and the
> resulting html file is 3.2mb :-) hehe. Here's the script (needs GD and
> the GD perl module):
>
>
> #!/usr/bin/perl
> use GD;
> ## create the html file and open for writing
> $f = "myfile.html";
> open F, "> $f" or die "Can't open $f : $!";
> ## set the path for the image to use
> $filename = "/Users/palli/downloads/tryggvi.jpg";
> ## open the image with GD and determine the size
> $myImage = GD::Image->new($filename);
> ($width,$height) = $myImage->getBounds();
> ## open HTML tags
> print F "<html><body bgcolor=\"#ffffff\">";
> ## loop through every single pixel, determing color and write div
> for($i=0;$i<$height;$i++){
> for($i2=0;$i2<$width;$i2++){
> ## get current pixel
> $myIndex = $myImage->getPixel($i2, $i);
> ## get RGB values for current pixel
> ($myRed, $myGreen, $myBlue) = $myImage->rgb($myIndex);
> ## convert decimal values to hex
> $hexRed = sprintf("%2.2X", $myRed);
> $hexGreen = sprintf("%2.2X", $myGreen);
> $hexBlue = sprintf("%2.2X", $myBlue);
> ## write div with position to pixel position and background to
> pixel color
> print F "<div style=\"position:absolute; left:".$i2."px;
> top:".$i."px; width:1px; height:1px; z-index:1; background-color:
> #$hexRed$hexGreen$hexBlue; layer-background-color:
> #$hexRed$hexGreen$hexBlue; border: 1px none #000000;\"></div>"
> }
> }
> ## close html tags
> print F "</body></html>";
> ## close file
> close F;
> ## That's it, have fun!
>
>
>
> –
> Pall Thayer
> [email protected]
> http://www.this.is/pallit
>
>
>
>
> +
> -> post: [email protected]
> -> questions: [email protected]
> -> subscribe/unsubscribe: http://rhizome.org/preferences/subscribe.rhiz
> -> give: http://rhizome.org/support
> +
> Subscribers to Rhizome are subject to the terms set out in the
> Membership Agreement available online at http://rhizome.org/info/29.php
>

, Pall Thayer

Hi Corey,
I'm not running it as a CGI so it's not something to see "in action"
but I put up a sample of the output here: http://pallit.lhi.is/~palli/
myfile.html (take a look at the source, funny in a geek sort of way).

I reduced the image by about half so it's now "only" 724 kb instead
of 3.2 mb. The image is of my brother showing off his new Vox AC 30
(with a beautiful specimen of a Kustom head and cabinet in the
background).

If you don't know if you have GD installed, then you probably don't.
The module is available on http://www.cpan.org You can also find a
link to the GD library from there.

Pall

On 12.3.2006, at 12:28, toegristle wrote:

> Hey Pall,
> That sounds pretty awesome. Do you happen to have it running online
> somewhere that we could see the results without installing it? I
> will probably play around with it at some point (thanks for sharing
> the code!) but don't know if I have time right now or GD installed
> for that matter. But I'd love to see it in action. If not, no big
> deal, thanks for sharing!
>
> Corey Eiseman
> http://toegristle.com/
>
> Pall Thayer wrote:
>> I'd like to share the results of a small experiment. I've been
>> playing around with producing ascii images on the fly with Perl
>> and I came up with the following idea; why not try making a pure
>> html version of an image using 1X1 pixel sized divs with the
>> background color set to the color of each pixel in the original
>> image. Well, it works, kind of cool in a way BUT… the image I'm
>> working with is a 12kb jpeg and the resulting html file is
>> 3.2mb :-) hehe. Here's the script (needs GD and the GD perl module):
>>
>>
>> #!/usr/bin/perl
>> use GD;
>> ## create the html file and open for writing
>> $f = "myfile.html";
>> open F, "> $f" or die "Can't open $f : $!";
>> ## set the path for the image to use
>> $filename = "/Users/palli/downloads/tryggvi.jpg";
>> ## open the image with GD and determine the size
>> $myImage = GD::Image->new($filename);
>> ($width,$height) = $myImage->getBounds();
>> ## open HTML tags
>> print F "<html><body bgcolor=\"#ffffff\">";
>> ## loop through every single pixel, determing color and write div
>> for($i=0;$i<$height;$i++){
>> for($i2=0;$i2<$width;$i2++){
>> ## get current pixel
>> $myIndex = $myImage->getPixel($i2, $i);
>> ## get RGB values for current pixel
>> ($myRed, $myGreen, $myBlue) = $myImage->rgb($myIndex);
>> ## convert decimal values to hex
>> $hexRed = sprintf("%2.2X", $myRed);
>> $hexGreen = sprintf("%2.2X", $myGreen);
>> $hexBlue = sprintf("%2.2X", $myBlue);
>> ## write div with position to pixel position and
>> background to pixel color
>> print F "<div style=\"position:absolute; left:".$i2."px;
>> top:".$i."px; width:1px; height:1px; z-index:1; background-color: #
>> $hexRed$hexGreen$hexBlue; layer-background-color: #$hexRed$hexGreen
>> $hexBlue; border: 1px none #000000;\"></div>"
>> }
>> }
>> ## close html tags
>> print F "</body></html>";
>> ## close file
>> close F;
>> ## That's it, have fun!
>>
>>
>>
>> –
>> Pall Thayer
>> [email protected]
>> http://www.this.is/pallit
>>
>>
>>
>>
>> +
>> -> post: [email protected]
>> -> questions: [email protected]
>> -> subscribe/unsubscribe: http://rhizome.org/preferences/
>> subscribe.rhiz
>> -> give: http://rhizome.org/support
>> +
>> Subscribers to Rhizome are subject to the terms set out in the
>> Membership Agreement available online at http://rhizome.org/info/
>> 29.php
>>
>
> +
> -> post: [email protected]
> -> questions: [email protected]
> -> subscribe/unsubscribe: http://rhizome.org/preferences/
> subscribe.rhiz
> -> give: http://rhizome.org/support
> +
> Subscribers to Rhizome are subject to the terms set out in the
> Membership Agreement available online at http://rhizome.org/info/
> 29.php
>




Pall Thayer
[email protected]
http://www.this.is/pallit

, Corey Eiseman

Hi Pall,

Thanks for the sample, very impressive. I did get a chuckle out of the
source, although… I don't know if you were planning on taking this any
further or just experimenting, but if you're looking to reduce the size
of the html without shrinking the dimensions of the source image, I'm
guessing you could put some of the repetitive css in a class to save a
significant number of bytes.. i.e. put this in the head of the page or
external style sheet:

.x { position:absolute; width:1px; height:1px; z-index:1; border: 1px
none #000000; }

then change the line that writes the div accordingly

print F "<div class=\"x\" style=\"left:".$i2."px; top:".$i."px;
background-color: #$hexRed$hexGreen$hexBlue; layer-background-color:
#$hexRed$hexGreen$hexBlue;\"></div>"

Maybe not as funny, but it would be nice to see larger images. Anyway,
great work and thanks again for sharing.

Cheers,

Corey Eiseman
http://toegristle.com/


Pall Thayer wrote:
> Hi Corey,
> I'm not running it as a CGI so it's not something to see "in action"
> but I put up a sample of the output here:
> http://pallit.lhi.is/~palli/myfile.html (take a look at the source,
> funny in a geek sort of way).
>
> I reduced the image by about half so it's now "only" 724 kb instead of
> 3.2 mb. The image is of my brother showing off his new Vox AC 30 (with
> a beautiful specimen of a Kustom head and cabinet in the background).
>
> If you don't know if you have GD installed, then you probably don't.
> The module is available on http://www.cpan.org You can also find a
> link to the GD library from there.
>
> Pall
>
> On 12.3.2006, at 12:28, toegristle wrote:
>
>> Hey Pall,
>> That sounds pretty awesome. Do you happen to have it running online
>> somewhere that we could see the results without installing it? I will
>> probably play around with it at some point (thanks for sharing the
>> code!) but don't know if I have time right now or GD installed for
>> that matter. But I'd love to see it in action. If not, no big deal,
>> thanks for sharing!
>>
>> Corey Eiseman
>> http://toegristle.com/
>>
>> Pall Thayer wrote:
>>> I'd like to share the results of a small experiment. I've been
>>> playing around with producing ascii images on the fly with Perl and
>>> I came up with the following idea; why not try making a pure html
>>> version of an image using 1X1 pixel sized divs with the background
>>> color set to the color of each pixel in the original image. Well, it
>>> works, kind of cool in a way BUT… the image I'm working with is a
>>> 12kb jpeg and the resulting html file is 3.2mb :-) hehe. Here's the
>>> script (needs GD and the GD perl module):
>>>
>>>
>>> #!/usr/bin/perl
>>> use GD;
>>> ## create the html file and open for writing
>>> $f = "myfile.html";
>>> open F, "> $f" or die "Can't open $f : $!";
>>> ## set the path for the image to use
>>> $filename = "/Users/palli/downloads/tryggvi.jpg";
>>> ## open the image with GD and determine the size
>>> $myImage = GD::Image->new($filename);
>>> ($width,$height) = $myImage->getBounds();
>>> ## open HTML tags
>>> print F "<html><body bgcolor=\"#ffffff\">";
>>> ## loop through every single pixel, determing color and write div
>>> for($i=0;$i<$height;$i++){
>>> for($i2=0;$i2<$width;$i2++){
>>> ## get current pixel
>>> $myIndex = $myImage->getPixel($i2, $i);
>>> ## get RGB values for current pixel
>>> ($myRed, $myGreen, $myBlue) = $myImage->rgb($myIndex);
>>> ## convert decimal values to hex
>>> $hexRed = sprintf("%2.2X", $myRed);
>>> $hexGreen = sprintf("%2.2X", $myGreen);
>>> $hexBlue = sprintf("%2.2X", $myBlue);
>>> ## write div with position to pixel position and background
>>> to pixel color
>>> print F "<div style=\"position:absolute; left:".$i2."px;
>>> top:".$i."px; width:1px; height:1px; z-index:1; background-color:
>>> #$hexRed$hexGreen$hexBlue; layer-background-color:
>>> #$hexRed$hexGreen$hexBlue; border: 1px none #000000;\"></div>"
>>> }
>>> }
>>> ## close html tags
>>> print F "</body></html>";
>>> ## close file
>>> close F;
>>> ## That's it, have fun!
>>>
>>>
>>>
>>> –Pall Thayer
>>> [email protected]
>>> http://www.this.is/pallit
>>>
>>>
>>>
>>>
>>> +
>>> -> post: [email protected]
>>> -> questions: [email protected]
>>> -> subscribe/unsubscribe: http://rhizome.org/preferences/subscribe.rhiz
>>> -> give: http://rhizome.org/support
>>> +
>>> Subscribers to Rhizome are subject to the terms set out in the
>>> Membership Agreement available online at http://rhizome.org/info/29.php
>>>
>>
>> +
>> -> post: [email protected]
>> -> questions: [email protected]
>> -> subscribe/unsubscribe: http://rhizome.org/preferences/subscribe.rhiz
>> -> give: http://rhizome.org/support
>> +
>> Subscribers to Rhizome are subject to the terms set out in the
>> Membership Agreement available online at http://rhizome.org/info/29.php
>>
>
>
>
> –
> Pall Thayer
> [email protected]
> http://www.this.is/pallit
>
>
>
>
> +
> -> post: [email protected]
> -> questions: [email protected]
> -> subscribe/unsubscribe: http://rhizome.org/preferences/subscribe.rhiz
> -> give: http://rhizome.org/support
> +
> Subscribers to Rhizome are subject to the terms set out in the
> Membership Agreement available online at http://rhizome.org/info/29.php
>

, Pall Thayer

Of course! I should have thought of that myself. Well, I was able to
bring the image down to 442 kb at its current size. The slightly
bigger version came down to 1 mb from 3.2 mb (but that's still from a
12 kb jpeg).

thanks for the tip.

ps. I'm still trying to figure out whether or not this might be
useful in any way :-)

Pall
On 12.3.2006, at 23:04, toegristle wrote:

> Hi Pall,
>
> Thanks for the sample, very impressive. I did get a chuckle out of
> the source, although… I don't know if you were planning on taking
> this any further or just experimenting, but if you're looking to
> reduce the size of the html without shrinking the dimensions of the
> source image, I'm guessing you could put some of the repetitive css
> in a class to save a significant number of bytes.. i.e. put this in
> the head of the page or external style sheet:
>
> .x { position:absolute; width:1px; height:1px; z-index:1; border:
> 1px none #000000; }
>
> then change the line that writes the div accordingly
>
> print F "<div class=\"x\" style=\"left:".$i2."px; top:".$i."px;
> background-color: #$hexRed$hexGreen$hexBlue; layer-background-
> color: #$hexRed$hexGreen$hexBlue;\"></div>"
>
> Maybe not as funny, but it would be nice to see larger images.
> Anyway, great work and thanks again for sharing.
>
> Cheers,
>
> Corey Eiseman
> http://toegristle.com/
>
>
> Pall Thayer wrote:
>> Hi Corey,
>> I'm not running it as a CGI so it's not something to see "in
>> action" but I put up a sample of the output here: http://
>> pallit.lhi.is/~palli/myfile.html (take a look at the source, funny
>> in a geek sort of way).
>>
>> I reduced the image by about half so it's now "only" 724 kb
>> instead of 3.2 mb. The image is of my brother showing off his new
>> Vox AC 30 (with a beautiful specimen of a Kustom head and cabinet
>> in the background).
>>
>> If you don't know if you have GD installed, then you probably
>> don't. The module is available on http://www.cpan.org You can also
>> find a link to the GD library from there.
>>
>> Pall
>>
>> On 12.3.2006, at 12:28, toegristle wrote:
>>
>>> Hey Pall,
>>> That sounds pretty awesome. Do you happen to have it running
>>> online somewhere that we could see the results without installing
>>> it? I will probably play around with it at some point (thanks for
>>> sharing the code!) but don't know if I have time right now or GD
>>> installed for that matter. But I'd love to see it in action. If
>>> not, no big deal, thanks for sharing!
>>>
>>> Corey Eiseman
>>> http://toegristle.com/
>>>
>>> Pall Thayer wrote:
>>>> I'd like to share the results of a small experiment. I've been
>>>> playing around with producing ascii images on the fly with Perl
>>>> and I came up with the following idea; why not try making a pure
>>>> html version of an image using 1X1 pixel sized divs with the
>>>> background color set to the color of each pixel in the original
>>>> image. Well, it works, kind of cool in a way BUT… the image
>>>> I'm working with is a 12kb jpeg and the resulting html file is
>>>> 3.2mb :-) hehe. Here's the script (needs GD and the GD perl
>>>> module):
>>>>
>>>>
>>>> #!/usr/bin/perl
>>>> use GD;
>>>> ## create the html file and open for writing
>>>> $f = "myfile.html";
>>>> open F, "> $f" or die "Can't open $f : $!";
>>>> ## set the path for the image to use
>>>> $filename = "/Users/palli/downloads/tryggvi.jpg";
>>>> ## open the image with GD and determine the size
>>>> $myImage = GD::Image->new($filename);
>>>> ($width,$height) = $myImage->getBounds();
>>>> ## open HTML tags
>>>> print F "<html><body bgcolor=\"#ffffff\">";
>>>> ## loop through every single pixel, determing color and write div
>>>> for($i=0;$i<$height;$i++){
>>>> for($i2=0;$i2<$width;$i2++){
>>>> ## get current pixel
>>>> $myIndex = $myImage->getPixel($i2, $i);
>>>> ## get RGB values for current pixel
>>>> ($myRed, $myGreen, $myBlue) = $myImage->rgb($myIndex);
>>>> ## convert decimal values to hex
>>>> $hexRed = sprintf("%2.2X", $myRed);
>>>> $hexGreen = sprintf("%2.2X", $myGreen);
>>>> $hexBlue = sprintf("%2.2X", $myBlue);
>>>> ## write div with position to pixel position and
>>>> background to pixel color
>>>> print F "<div style=\"position:absolute; left:".$i2."px;
>>>> top:".$i."px; width:1px; height:1px; z-index:1; background-
>>>> color: #$hexRed$hexGreen$hexBlue; layer-background-color: #
>>>> $hexRed$hexGreen$hexBlue; border: 1px none #000000;\"></div>"
>>>> }
>>>> }
>>>> ## close html tags
>>>> print F "</body></html>";
>>>> ## close file
>>>> close F;
>>>> ## That's it, have fun!
>>>>
>>>>
>>>>
>>>> –Pall Thayer
>>>> [email protected]
>>>> http://www.this.is/pallit
>>>>
>>>>
>>>>
>>>>
>>>> +
>>>> -> post: [email protected]
>>>> -> questions: [email protected]
>>>> -> subscribe/unsubscribe: http://rhizome.org/preferences/
>>>> subscribe.rhiz
>>>> -> give: http://rhizome.org/support
>>>> +
>>>> Subscribers to Rhizome are subject to the terms set out in the
>>>> Membership Agreement available online at http://rhizome.org/info/
>>>> 29.php
>>>>
>>>
>>> +
>>> -> post: [email protected]
>>> -> questions: [email protected]
>>> -> subscribe/unsubscribe: http://rhizome.org/preferences/
>>> subscribe.rhiz
>>> -> give: http://rhizome.org/support
>>> +
>>> Subscribers to Rhizome are subject to the terms set out in the
>>> Membership Agreement available online at http://rhizome.org/info/
>>> 29.php
>>>
>>
>>
>>
>> –
>> Pall Thayer
>> [email protected]
>> http://www.this.is/pallit
>>
>>
>>
>>
>> +
>> -> post: [email protected]
>> -> questions: [email protected]
>> -> subscribe/unsubscribe: http://rhizome.org/preferences/
>> subscribe.rhiz
>> -> give: http://rhizome.org/support
>> +
>> Subscribers to Rhizome are subject to the terms set out in the
>> Membership Agreement available online at http://rhizome.org/info/
>> 29.php
>>
>
> +
> -> post: [email protected]
> -> questions: [email protected]
> -> subscribe/unsubscribe: http://rhizome.org/preferences/
> subscribe.rhiz
> -> give: http://rhizome.org/support
> +
> Subscribers to Rhizome are subject to the terms set out in the
> Membership Agreement available online at http://rhizome.org/info/
> 29.php
>




Pall Thayer
[email protected]
http://www.this.is/pallit