Trev's Tech Blog: 2013

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,

Hi All,

I was sat down bored the other day. The internet is the most bland, boring and unexciting place at the moment. It's dull.

So I wondered. Can I make the internet more interesting? And the answer, surprisingly, was yes.

I turned it into pictures, like this:

Now this looks amazing. All that from some data. I've been playing with this for a while, and here are a few videos of the results of my testing:

Now this is all well and good. I can change the internet into images and set them to music. (I'll deal with the 'how' in the next blog as it's quite detailed.)

It was then that I realised I could put absolutely anything through my encoder. So I wondered...Can I encode an mp3? The answer is yes. Yes I can. What's interesting is that you can see the file header and the tail at the end too.

After that I thought a bit more....I wonder what the internet would sound like? What would happen if I used audio as the output?

Well....here it is (TURN YOUR VOLUME DOWN FIRST!):

Feel free to have a listen and a watch or 3. Make some comments, or if you have any other ideas, let me know.

Thanks for reading!

Trev's Tech Blog

Saturday 25 May 2013

How to make the Internet Beautiful. The Code.

How to Make the Internet Beautiful.

Friday 5 April 2013

Bash script to download Infinite Monkey Cage episodes.