Hi All,
Ok, so hopefully you've read the other blog or seen the stuff on youtube and followed a link here or whatever. If not, go back and have a look. Also, this blog is a little bit technical. So if you're interested in the effect rather than the cause, look away now.
Images. Images everywhere. But how did I make mine?
Well at first, I decided that I would read the HTML and use that to generate image data. The smallest unit of image data is the pixel, and we need to give it at least 5 values. These are:
Red (0-255)
Green (0-255)
Blue (0-255)
X (pos)
Y (pos)
Lets ignore X,Y as they are the easiest to sort out. However, we do need to worry about RGB.
Lets go back to some HTML code...
<html><head>I love html</head><body>I really love html</body></html>
Here is some example code. Gotta love it right?
Every character there is represented by a value in something called ASCII. These are somewhere between 0 and 255. For example, a capital 'A' has a value of 65. I
could have just used that value to describe either a red, green or blue value. But the thing is, reading through my code, I wanted to really test myself at 2am and write some superfluous lines of code. I change ASCII into HEX.
HEX describes numbers using the format 0-9, A-F where A is 10, B is 11 and so on up to F which is 15. 16 in HEX is 10. AA in HEX is 26. As ASCII characters are 0-255, we need 2 HEX characters for each 1 ASCII character.
My code then, has to loop from the beginning, to the end, choosing 2 characters per colour. 6 HEX characters describing all 3 colours. Red, Green and Blue.
Once it has done that, its a simple case of changing it back down to DEC (our "normal" numbering system) so I can pass it to GD to write the pixel.
Before we get to, now I look at it, rather rushed and over complicated code, we can encode the example:
Anti-aliasing has helped
a lot here. Don't forget, it takes 3 characters to make 1 pixel. There are only 16 pixels in that image. It's a 4x4 blown up really big.
Here's the code:
#!/usr/bin/perl
#use strict;
#use warnings;
use GD;
use HTTP::Lite;
use String::HexConvert ':all';
$filename=0;
while ($monkey == true){
$filename ++;
my $hexcode = "";
my $twitcode = "";
my $x=0; # x coord
my $y=0; # y coord
my $i=0; #loop var
my $row =0;
my $weight=0;
my $r =0;
my $g =0;
my $b =0;
#my $im = new GD::Image(20,10);
$http = HTTP::Lite->new;
#$req = $http->request("http://wemakeawesomesh.it/make")
#$req = $http->request("http://search.twitter.com/search.json?q=%23BeliebersAreHereForJustin")
$req = $http->request("http://theregister.co.uk/index.html")
#$req = $http->request("http://feeds.bbci.co.uk/news/rss.xml")
or die "Unable to get document: $!";
$twitcode = $http->body();
$hexcode = ascii_to_hex($twitcode);
$size = sqrt((length($hexcode) / 6) );
my $im = new GD::Image($size,$size,1);
#print $hexcode;
for ($i=0;$i <= length($hexcode);$i = $i + 2){
$row ++;
$weight ++;
print "\n\nWEIGHT: $weight CHARPOS: $i \n";
if ($weight == 1){
$r = hex(substr($hexcode, $i, 2));
print "\n" . substr($hexcode, $i, 2);
}
if ($weight == 2){
$g = hex(substr($hexcode, $i, 2));
print "\n" . substr($hexcode, $i, 2);
}
if ($weight == 3){
$b = hex(substr($hexcode, $i, 2));
print "\n" . substr($hexcode, $i, 2);
print "\nCOORDS: X: $x, Y: $y----- $r,$g,$b\n";
$cursorcolour = $im->colorAllocate($r,$g,$b);
$im->GD::Image::setPixel($x,$y,$cursorcolour);
$x++;
$weight=0;
if ($x >= $size){
$x=0;
$y ++;
}
}
}
binmode STDOUT;
open (MYFILE, ">frame$filename.png");
print MYFILE $im->png;
close (MYFILE);
sleep(300);
}
Wow, that's ambitious for blogspot to handle isn't it?
A few things to mention here.
1. There is a wrapper that means it will loop forever. I last used this particular version of the code to collect twitter data every 5 mins. (Which you can see with the sleep(300) above)
2. I've left some examples in there.
3. I've done some dodgy maths to get the image size.
4. I've commented out the top 2 lines.
So please, take my code, have some fun. Rewrite it (take out the rubbish stuff like the string ASCII->HEX->HEX->DEC manipulation)
If you do improve it, let me know what you did.
I'll let you work out how I did the mp3 video, and the text-> music. It won't be hard now.
Thanks for reading,
