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.

Keywords Visualization v2

See the live visualization at: http://www.bengfort.com/keywords/

Version 2 of the Bengfort.com Keywords Visualization is now complete. This new update includes tool tips (hover the mouse over a node and the tool tip appears) that describe the data in plain language- in this case, how many times the keyword appears in Bengfort.com (note that multiple appearances in a single post are all counted, as opposed to the number of posts that include the keyword, I hope my grammar was clear enough to explicate this). In addition, now the strength of the links is now visually shown via color and thickness. This actually expanded the graph, so I may have to refactor so it all fits on the screen. Finally, if you click on a node, it searches Bengfort.com for the last 7 posts that include the keyword and present those posts to you!

Additionally, the graph has now been made clearer. Link strength is identified on a 5 point scale, however I have excluded strengths of 1 or 2, this immensely cleans up the graph and only shows the most relevant links. While this means some links no longer appear, other connections have suddenly become more apparent. (I’m especially fond of the link between our disciplines and technology!)

This version finalizes the tutorial on SitePoint.com with modifications made to make it work for Bengfort.com. I know this graph is still far from perfect, and I intend to continue to explore making this application more usable. To that end, any feedback from you guys would be much appreciated! For instance, tell me what you see, and if there is anything I could do to make it better. (Remember, I don’t know what you see, I only see what is on my browser). If there is any functionality you think should be included, if there are any keywords you want added, please let me know! I know that it is easy to read the post and to forget about it, but the more you think about it, the better I can make it!

Once again, the link to the visualization is: http://www.bengfort.com/keywords/ check it out!

Data visualization of frequence of Bengfort.com keywords

See the live visualization and play with the Spring-Graph structure at: http://www.bengfort.com/keywords/

I’m constantly amazed about how people can manipulate data and statistics any way they see fit to make their own point. I don’t know about you, but whenever someone gives me the “numbers” I’m very skeptical of where they came from. Just consider the fodder from our so called major news networks that John Stewart has to make fun of! I think I’m right in saying that people are all too willing to believe “numbers” just because they look science-y or there is a pretty bar graph. Even simple inspection will reveal flaws- percentages that don’t add up to 100 or whose summation far exceeds 100. Graphs that use highlighting and weighted fonts that don’t necessarily apply to a distribution, or the simple omission of keys (legends) that would prove an opposite point.

That’s why the science (and art) of data visualization so appeals to me. We have learned bar graphs, line graphs, and pie charts since we were in elementary school, but these are the tools that are so often used to mislead us: simply because they are too simple to hold the complex data that we are now used to analyzing on a daily basis. Data visualization attempts to take complex data sets and graphically represent them in a way that humans can instantly comprehend their meaning. Visual cues including size, color, shape, and difference are all used to represent some form of data. With the growth of web technologies and web databases, an ever increasing number of amazing and interesting data visualizations has appeared, and soon I believe that elementary school kids will be taught even more complex data structures.

So, when I got a tweet from Sitepoint.com concerning building a keyword visualizer with Flex- I knew that this would be perfect for our website. So I read the article and built a version of what they used for our website! (Note that at this point, I’m still awaiting the third part of this three part series, and then I will continue to make my own customizations, so stay tuned for more updates with the visualization!) Essentially what is happening is that a script goes through our blog database and picks out keywords in all the posts. Keywords that appear in the same post are considered linked. For instance, by writing science and technology in this post together, those two words will now have a link between them. In addition the script counts the occurrences of the keyword as well as the occurrences of the links. (If you’re keeping score- this is a server side PHP script that outputs the results in a JSON file format).

The visualization is handled by Adobe’s Flex framework combined with the SpringGraph API. The more a keyword appears, the larger its nodes will be- in addition, the higher the count of links between keywords, the larger the link will be. Distance is also a factor- the larger keywords are on the outside, with the lesser keywords on the inside- they “repulse” each other by the strength of their links. Now, by simple inspection we can see that Guyana linked with Recipes and Cookbook- is by far the largest part of our website. Benjamin is connected to China and Ballet (don’t know why) while cat and dog are so closely connected that they are almost touching! You can see how this provides basically a topical analysis of our blog!

I know you guys may not find this particularly interesting, but I hope you can grasp how much data has been distilled into an easily viewable graph- we have over 600 posts in our blog, each with about 700 words in them- all distilled into an easily comprehensible visual medium. As our blog changes, so will the graph. I think that in all our fields- International Relations, Political Science, Anthropology, Business, International Education, and Computer Science- this is extremely relevant, and I hope that you guys will make use of the tools that I have shown you. (speaking of those fields, I should probably add them as key words!). If you are interested in doing any sort of complex visualization- trust me, I’m your guy to develop an application for you that will do it!

See the live visualization and play with the Spring-Graph structure at: http://www.bengfort.com/keywords/

I have been a Flickr user for some time now, but a couple months ago I finally ran up against Flickr’s photo limits (200 pictures) and had to decide whether or not to upgrade to a Flickr Pro account for $24,99 a year. I had initially decided to use Flickr to share family photos and use plug-ins from our blog to manage them- rather than its more common usage as a photo sharing social networking site. Unfortunately, the regular account’s restrictions- only 2 sets (albums) and 200 photos was not substantial enough for our website. I was still planning on sticking with Flickr, however, because the Flickr API was easy and Flickr’s batch photo management system was superb and I had also built up a pretty good network of contacts on Flickr.

Meanwhile, I had been receiving shared album links from other friends and family via Picasa. At first (and with previous versions of Picasa), I was not impressed. I had other software that did what the desktop version of Picasa did, and it was nothing exciting. The web albums side was also just a means to share pictures privately, there was no social networking aspect, so generally I just downloaded the pictures from Picasa or embedded a slide show in another page I was working. However, I could not ignore the fact that most of my friends and family have GMail accounts (including me), so I decided to check it out.

Picasa 3 (the desktop software) is much improved from older versions, and has a connection with the web albums side of Picasa that is much better and cleaner than the batch photo organization tools from Yahoo. Plus, because I already had a GMail account- the social network on Picasa was already developed, and with a few minor tweaks I managed to build a network that rivaled my Flickr account. Picasa is now my default photo viewer and has some awesome details that improve web photo orgnaization, including watermarking and copyright management- as well as a desktop organization system that ties in with Windows Explorer. I still use Adobe CS4 to do all my photo editing and image work, but Picasa is a great image manager because it organizes both web and desktop (and external harddrive) images.

Google does not limit you on the number of photos you post, but rather on the amount of disk space- for free you get 1GB. However, upgraded storage is offered at very reasonable prices (comparative to Flickr), but here is the gravy- with Google, your upgraded storage goes across all your accounts- Gmail, Picasa, etc. So I purchased 10GB for $20 and vastly improved my Google experience. Photo management also has tie-ins with other Google applications- including geotagging from Google Earth. The public photos page also now rivals Flickr’s photostream as a place to put up your public albums.

I guess the bottom line is this: if you are a Google user (and most of my family is) then you should be using Picasa- you’ll find that your Google expereience improved dramatically. However, if you are a Yahoo user, then Flickr is still a very good web application, and you probably don’t care about all the tie ins that I mentioned above.

Just as a note- you will now see that the pictures on this blog (in the sidebar) are now from Picasa and not the Flickr photostream. If you would like to see my public photos page it is here: http://picasaweb.google.com/bbengfort.

Winston is the smartest person in our family!

Facebook is monetizing “web 2.0″ by selling targeted ads- i.e. ads that use the data on Facebook to create custom tailored ads for each person. Google does similar things with Adwords and even the ads they place in Gmail. This kind of advertising has the potential to be extremely rotten (i.e. previous Facebook scandels where your friend’s Amazon purchases might be shared with you), or they can be an effective and lightweight way to advertise (no more annoying pop-ups).

In typical Facebook tradition, for my Birthday my wall was plastered with best wishes from friends and family- and I can only assume this is why I received the banner ad that was at the top of the facebook page. The ad features my family members- and lists their IQs (which I’m 100% sure are fake), then ranks them accordingly. The target of the ad is at the end where my name and picture are listed with question marks for my IQ- obviously trying to get me to install the Facebook app and do better than my family (impossible).

What really made this a flop, and quite amusing, is that they ranked Winston, my pet dog, number 1, above Bethany, who is finishing a Master’s degree at the University of Maryland in the time it takes most people to get an Undergraduate degree, Devi who is fluent in Chinese, and my mother who is CEO/President of a company! Now, I realize that Winston went to Oxford, and has a snooty English accent, but he is only 3!

Nice work Facebook- a classic Facebook ad for my birthday!

Note: Click on the picture to see it in it’s orginal size in a lightbox!

Now basically all digital content has been made available on demand via the Internet. You can get streaming radio- or podcasts downloaded to your iPod (or other mobile audio player) and listen to them when you want to. For instance, I listen to Wait, Wait, Don’t Tell Me- an NPR news quiz that is hilarious and informative during the week. Unfortunately it comes on during the weekend when I’m not available to listen live, so I download it as a podcast. My Chumby streams live internet radio and podcasts from my iTunes, so I can listen while I work. If you are not doing this already, I highly encourage it- there is a lot of great content out there that can really add a lot to your daily routine.

To carry this forward, I want to talk about two services that allow me to get varied intellectual content that I couldn’t get elsewhere- Audible.com and iTunes university. Audilble.com is a repository of all sorts of audio files from audio books to speeches, to the daily newspaper read out loud to you. But more on this in a second. iTunes university is a download service from Apple that allows you to download lectures and other academic audio recordings from professors from schools all over the United States. Talk about ways to keep your mind engaged while you’re driving!

While iTunes University is mostly free lectures- Audible.com is a paid for service. You can either purchase audio content individually for a premium price, or pay a subscription fee (of varying levels) that give you monthly credits to purchase audio works. Personally, I am on the subscription plan, and I have already “read’ (heard) many great audio books as a result. Each reading is a performance, and they have some really excellent authors and narrators. I highly recommend it. Don’t have an iPod? Don’t worry- Audible has 5 different formats that you can download to- so you won’t be stranded just because you went with the Zune.

My father-in-law has just got a new job driving a tanker out here- and we are already getting him set up with these services. They keep you sharp and engage you, all while allowing you to do other things. People have been predicting the demise of radio- but audio content is still very accessible and very important- certainly it is much better than TV and much more engaging! Stay tuned for some podcast and Audible recommendations!

When I started looking for running shoes I thought my main concern would be things like comfort, stability, shoe size, running appropriateness, etc. How little did I realize that the main motivating factor would be technology! After comparing several brands- Adidas, Under Armour, New Balance, and Nike, I realized that they all had pretty much the same thing going, and I could get whatever I needed. The deciding factor was Nike’s relationship with Apple. Nike and Apple have teamed up to create Nike + runs, a gadget that I would highly recommend to any serious runner.

So here is how it works. You put a little chip into your left shoe, under the insole. The chip is activated when you step on it, so you can only wear these shoes for running- don’t take them out to the mall or battery life will plummet. Next, you plug in a tiny data chip into your iPod- don’t worry it looks exactly like the charger and isn’t too big, it fits in most arm bands. Once plugged in, the iPod (if you have the right version of the iPod software, which you should if you bought your iPod in the past two years) you have access to Nike runs on your iPod.

Nike Runs basically plays a music track of your choice while you are running. But on top of the music track a little voice lets you know how far you have gone, what your pace and time is, and even gives you little coaching tips. You can do distance, time, or pace workouts and customize each one so the little voice tells you what you want to hear. In addition you can select a “Power Song” that when you need a little boost, you hit the button and the power song immediately comes on to pump you up!

The chip in your shoe tracks distance and time (and therefore also pace) very accurately. In fact, with no configuration at all, it was only a half lap off of 2 miles (my first run with it). If you know a distance, you can then configure it so you don’t have to run that extra half lap.

But that’s not the end- plug the iPod into your computer, and it uploads the data to Nikeruns.com. And here is where things really get interesting. At Nike Runs you can compete against your friends (around the world), you can track your workouts, you can create customized workout plans that download to your iPod, you can set goals and milestones and have them tracked- all without having to input any data, it all comes from the iPod. Also, Apple and Nike have commissioned original music tracks specifically devoted to running so that you have the right music to keep you on tempo or pace. They even have celebrity coaches that help you learn to run better, faster, or stronger.

The experience was easy- easy setup, easy tracking, easy use. And the design and interface are beautiful. Combine that with the precision, and I think I have myself a very handy tool that might get me 13.1 miles yet! I highly recommend this to anyone that is planning on getting new shoes soon.