Bengfort.com

I’m working on an interesting project– I’m writing programs that convert text to images based on the key strokes. It’s turning up some unusual results! My plan is to create a program that turns 140 characters into an image, so that people can tweet art! Ultimately, I would like to be able to upload a text file and have it turned into a png file, or even better, upload a png file and turn it into text! It’s not really an encryption scheme, since it can be easily deciphered, but I think it might be interesting digital artwork. For instance, Mike and I could upload the source code from our websites and create images from them– unique embodiments of our technical work!

I recently read an article on steganography- the art and science of hiding messages inside of images, and it got me to thinking: “what if the message wasn’t hidden in the image,but instead the message defined the image?” Now I’m not the artistic type- the kind of art I am interested in is methodical (read… paint by numbers). But I am a computer scientist, and I know that a color as understood by the computer is a 4 byte unsigned integer that defines an ARGB value (Alpha, Red, Green, Blue), where each byte represents the quantity of each part. I also know that a character like the lower letter case a, is defined by one byte when encoded in UTF-8, which represents a number between 32 and 126. Therefore, 4 characters, like the word duck can actually be translated into a unique ARGB value (or for opaque colors, three characters like the word ben can be translated into an RGB value).

Thus began my experiment. I wanted to see what a translation from text characters to colored pixels would produce, and if potentially there would be meaning in art created algorithmically. The quote above is from an email I sent to Jaci describing on what I was working on. The quote has one unique feature- it is 675 characters long. If you divide 675 by 3 (the number of characters you need to get an RGB value), you get 225 – which is 15 squared. This is perfect for an image of 150 x 150 pixels, where each RGB value makes up a 10 x 10 pixel square (or 100 pixels). Here was my first result:

First Attempt

So when you take the above quote and translate the byte sequence into RGB values, you get this colored, kind of grey, very dark image. The reason for this is because the characters American keyboards use (and we regularly type) range from between 32-126, while colors are defined with values between 0 and 255, where 0 is black, and 255 is white. When you put an RGB value together, the amount of each value determines the color, so (255,0, 0) is red. (0, 0, 0) is black (no color), and (255, 255, 255) is white (all colors). If the values are even, say (64,64,64) you get grey, darker grey is numbers closer to 0 and lighter grey is numbers closer to 255. So because the alphabet we normally use is so close together, and very low numbers- you get a grey, dark image. Especially since the most common character we use is the non-breaking space: ” ” which is 32.

To fix this, I shifted the values for the characters by distributing them evenly across the range 0-255 (for the nerds out there, I used the formula: Math.ceil((charCode – 32) / 94 ) * 255)). This had the effect of spreading the values of characters farther apart, and making them less grey, it also lightens the image, because the top values are closer to white again instead of black, and I got this:

Shifting the colors to a full range

Much, much better! And actually, an interesting result because all the colors are there- reds, greens, blues, yellows- that is what I was hoping for! I was afraid that a direct byte by byte translation would produce uninteresting results (monocolor, shades of the same color, etc.). There were still a lot of greys and whites, and I thought this could be the fault of the most common character, the non breaking space, which my shift gave a value of 0. So I made the non breaking space 255 (all white). This was a failure, because it lightened the image up too much:

Making space, " ", white

I had been hoping that maximizing a color value might make the color more vibrant. But as it turns out, spaces are only one of two other values, that probably are also high. so, instead a 0 value actually makes the other two colors more vibrant, while the the 255 value, just makes things whiter. Blocks might not be the most interesting result, so I tried random scatter of the 1o0 pixels:

Scattering the pixels randomly

But this has a problem, when you inject randomness into the formula, you can’t translate the image back to text. So my original idea of an algorithmically generated piece of art, whose meaning could be read in plain English, would be lost. This image could be translated into any text, not just the paragraph that you read in the beginning. Blocks are boring, so next I tried 100px lines, I hoped that this would give me the fluidity I was looking for:

Lines instead of blocks

Alas, it did not, it gave me three columns because 100 is 2/3 of 150, so the images was broken into thirds. I am now currently experimenting with some other manipulations including spirals, alpha gradient overlays, gradients, frequency histograms, etc. If you have any ideas, please comment them, so I can try them out!

So what is the end result? As you read from my paragraph, I’m thinking about making this mainstream by creating a web application for tweets. Of course, now that I’m posting this as a blog, anyone can steal that idea and run with it. Maybe I should grab the domain tweettoart.com! But I’m thinking this could have bigger implications. I also mentioned that I could uniquely turn my web pages into graphics, or even bigger- I could take the entire New York Times website on a particular day and turn it into some sort of graphic! If you have ideas for applications of this, please comment below and let me know!

Also, I’m hoping that using these methods, we could find interesting images, where text can be written specifically to produce an image. Then both the image and the text would have meaning! Imagine creating poetry that designed an image (hint, hint, Devi and Bethany!) That would be really cool.

If you want a copy of the program in its current format to install on your computer (It’s Adobe AIR), so that you can play around… email me or comment below. I’d be happy to share, just keep in mind that it is experimental, so you might be able to break it.

Well, I just hit a wall in my forward progress that I have been making over the past couple of days! I have just got a brand new computer that is perfect for development work. I have purchased Visual Studio 2005, which is on its way, and I have everything I need to get going on all of these grand ideas I have… or not?

I discovered that Microsoft FrontPage 2003, the HTML editor I was using on my old computer no longer exits on my new computer! I have the same exact Microsoft Office installed- MS Office 2003 Proffessional, and yet, no Front Page 2003! At first I thought that because I have 3 copies of Office (A student copy, a copy from Navy, and a copy from my old computer) that perhaps I just had the wrong copy of office— nope! I did find Front Page XP, but that is really of no use.

So I am HTML editorless, which makes it tough to do web design work! To do everything this weekend, I used notepad, which obviously gave me a lot of bug shooting to do because I type too fast for my own good.

So I said to myself- I just need to buy a new copy of FrontPage (although after more exploration, good riddance- FrontPage does the most annyoing thing by putting a thumbs.dat file in every single folder you are using). But Microsoft has given up on FrontPage and split it into two very different products- SharePoint designer 2007, and something called Microsoft Expression Web, which I guess is Microsoft’s attempt to rival Adobe Dreamweaver.

Well Expression Web is 200+ bucks, more if I pay in pounds. I had already purchased Visual Studio 2005 to do ASP.NET work as well as C#, but before I could go talk to Jaci about the software purchases, I realized- do I really want to buy into Microsoft this completely?

This led to a lot of angst about my path along this learning process. I have swerved into Microsoft-only technologies somehow, and I am wondering if I should try to escape while there is still time (although Visual Studio is an expenseve back down!), or if there is some good way to mix the two. I am torn, because I started learning C# instead of Flash or Java, and I really should switch back. Needless to say, the Adobe Web Design Premium suite (which contains photoshop CS3, which is another product I really want) is going to run me 1500 bucks- so should I switch now?

Well, now I am HTML editor program-less and clueless about what I should do next! See my next post for my learning path, and maybe someone out there can make suggestions.

I have become a nerd- thank God!

Today I have officially (according to my wife and my sudden urge to watch re-runs of TNG) become a nerd, and not a moment too soon! (The picture below should explain all, note the CenGen shirt…)

Today I turned my Naval Academy computer that is five years old, suffering from all the various components (and video games) I have installed on it, into a local web server with Apache 2.0, php 5.1, and MySQL so I can have a testing environment to build the Bengfort Blog Engine.

Frankly, I am not sure it will survive the installation.

So far, I have desperately run to Staples to get an external USB hard drive to back up my computer in the face of ever impending blue screen doom. (Somehow, magically the computer came back to life… I don’t know what happened, but to this day the Computer sometimes will not turn off without physically unplugging it from the wall!) I can’t run multiple applications of anything more complicated than iTunes or Internet Explorer. And every time I turn the computer off, I do so terrified that it won’t turn on again (especially since my computer basically rejected the external hard drive!)

Well that is that, and even though my poor 90 GB Hard Drive is almost maxed out (remember when: “90 Giga-whats? Gosh, I won’t even use 90 of those mega-thingys, why do they give us so much space?”) I have still boldly gone into programming territory.

Today I have moved from simple web designer to web programmer.

With my successful installation, I hope to achieve what so few jocks have done in the past- to actually do something useful with a computer. And if my computer survives, I intend to design and install our very own blog engine onto the website. Step one complete: one small step for 10 year olds, one giant step for ex-Navy Lacrosse players everywhere.

And as promised in the past few blogs… it begins! Now the only question remains: does my domain have php, etc. installed on the server in Baltimore?