Check out my
new book!
HTML5 Games book
Getting your ASCII on with Flickr , , , , ,
A while back I made a JavaScript image-to-ASCII-art converter using the image data access available through the Canvas element. For this Thursday's afternoon of fun and code, I decided to pull it back out of the closet and see what else I could do with it.
I'd already worked a bit with the Flickr API and found it quite a pleasant experience, so I decided to make a small application that pulls out Flickr photos and asciifies them for retro fun and profit.

How it works

You simply enter the search query of your choice and click the "Asciify" button. A request is then sent off to the Flickr server and any photos that match the query are returned. The image data is analyzed and turned into ASCII characters.

You can choose to have the characters colored the same color as the pixels they represent or simply leave them black/white. Optionally, you can have the background of the character colored as well by choosing "use blocks", making the final image more akin to a very blocky or pixelated version of the original, just made out of HTML rather than an actual image. Last, there's the option of having the background of the output be the average color of the original image. This may not look great for all images - and of course makes no sense if you're already using the blocks method.

Be aware that far from all Flickr images are suitable for Asciifying and some of the options just mentioned look better on some images than on others.

By default, the application will only ask for images that are licensed under the Creative Commons licenses to ensure that no feelings and/or intellectual property rights are hurt.

Since the application relies on the Canvas element and image data access, so far only Firefox, Opera and recent WebKit nightlies are supported.

Click here to start Asciifying Flickr

..or read on, if you're interested in

How it really works

The Flickr search part is pretty straight forward. A single request is sent, calling the "flickr.photos.search" method. We then get a list of photos from Flickr, but we can't access the data in these directly due to the same-origin policy of the Canvas element. To get around this, we're using a small proxy script (written in PHP) that does nothing other than retrieve the image file and pass it straight through to the browser.

The image is then painted (and downscaled since we're not using all pixels) on a hidden Canvas element, the image data is retrieved using getImageData() and each pixel in the image is analyzed. The brightness of the pixel is calculated using a simple RGB to brightness formula and this level of brightness is then mapped to a list of characters selected for their varying apparent brightness. The list used here is [ .,:;i1tfLCG08@] for black/white output and [ CGO08@] for colored output.

If the output is black/white, we just write the character to a string and move on to the next. If we're using colored output, we create a span element styled with the appropriate color. All these spans are the reason it can appear a bit more sluggish when using colors than when using black/white output. If the "blocks" option is on, we simply set the background of the character span to be the same color as the character itself. This way, the block appears solid but we can still drag the mouse over the output and select the ASCII text. For the last option, background color, the original image is downscaled to a 1x1 pixel Canvas and the color of this single pixel is read and used as the background color of the containing element.

Feel free to leave a comment or ask any questions.
Get Asciified!

posted Thursday, October 16, 2008 by Jacob Seidelin