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!

⇓ 12 comments Anonymous

You are magician of Web!

October 16, 2008 at 2:01 PM
Jacob Seidelin

Oh, thank you :)

October 20, 2008 at 12:44 PM
Anonymous

can I have a look at php proxy script used here?

December 24, 2008 at 5:31 AM
Porter

I've always wondered how people did such detailed pictures in this style, never did it occur to me that it was done through programming, crazy.

October 26, 2009 at 8:09 PM
Iraê

I was going to show this to my friends but it isn't working anymore. Some 404 in firebug's net panel

January 18, 2010 at 11:20 AM
Jacob Seidelin

Thanks, I'll look into it. It does indeed look broken.

January 18, 2010 at 11:40 AM
Tonks

Wow That is some crazy stuff. This rocks.

March 29, 2010 at 7:56 PM
ekhtsasy


شركة تنظيف فلل بالدمام
شركة تنظيف شقق بالدمام
شركة تنظيف مجالس بالدمام
شركة لتسليك المجارى بالدمام
شركة تسليك مجارى بالدمام
شركة نقل اثاث بجدة
شركة نقل عفش بجدة
شركة مكافحة حشرات بجدة
شركة رش مبيدات بجدة
شركة مكافحة الصراصير بجدة
شركة مكافحة النمل الابيض بجدة
شركة تنظيف بجدة
شركة تنظيف فلل بجدة
شركة تنظيف منازل بجدة
شركة تنظيف شقق بجدة
شركة تنظيف خزانات بجدة
شركة تنظيف مجالس بجدة

August 8, 2014 at 7:42 AM
ekhtsasy


شركة تنظيف خزانات بالرياض
شركة تنظيف مسابح بالرياض
شركة تنظيف بيارات بالرياض
شركة تسليك مجاري بالرياض
شركة تنظيف منازل بالرياض
شركة تنظيف فلل بالرياض
شركة تنظيف شقق بالرياض
شركة مكافحة حشرات بالرياض
شركة مكافحة البق بالرياض
شركة مكافحة فئران بالرياض
شركة رش مبيدات بالرياض
شركة نقل اثاث بالرياض
شركة نقل عفش بالرياض
شركة تخزين اثاث بالرياض
شركة تخزين عفش بالرياض
شركة كشف تسربات المياه بالرياض
شركة كشف تسربات بالرياض

August 8, 2014 at 7:43 AM
كيمو نور


شركة تنظيف واجهات بالرياض
شركة تنظيف مسابح بالرياض
شركة تنظيف بالرياض
عزل خزانات واسطح
شركة عزل خزانات بالرياض
شركة تنظيف خزانات بالرياض
شركة عزل اسطح بالرياض
نقل اثاث
شركة نقل اثاث بالرياض
شركة نقل عفش بالرياض
شركة تخزين عفش بالرياض
شركة رش مبيدات بالرياض
شركة مكافحة حشرات بالرياض
مكافحة حشرات

October 10, 2014 at 2:46 PM
كيمو نور

شركة تنظيف شقق بالرياض
شركة تنظيف واجهات بالرياض
شركة تنظيف مجالس بالرياض
شركة تنظيف موكيت بالرياض
شركة غسيل السجاد بالرياض
شركة تنظيف مسابح بالرياض
شركة كشف تسربات بالرياض
كشف تسربات المياه بالرياض
عزل خزانات واسطح
شركة تنظيف خزانات بالرياض
شركة عزل اسطح بالرياض
شركة عزل خزانات بالرياض
مكافحة حشرات
شركة رش مبيدات بالرياض
شركة مكافحة حشرات بالرياض



October 10, 2014 at 2:50 PM
كيمو نور


شركة تسليك مجارى بالرياض
شركة تنظيف فلل بالرياض
شركة تنظيف قصور بالرياض
شركة تنظيف منازل بالرياض
نقل اثاث
شركة نقل اثاث بالرياض
شركة نقل عفش بالرياض
شركة تخزين عفش بالرياض
شركة مكافحة النمل الابيض بالرياض
شركة تنظيف فلل بالرياض
شركة مكافحة حشرات بالرياض

October 10, 2014 at 2:55 PM
Post a Comment