{"id":975,"date":"2013-01-11T09:00:03","date_gmt":"2013-01-11T07:00:03","guid":{"rendered":"http:\/\/www.ozalto.com\/?p=975"},"modified":"2013-11-07T15:42:59","modified_gmt":"2013-11-07T13:42:59","slug":"ascii_art_indesign","status":"publish","type":"post","link":"http:\/\/www.ozalto.com\/en\/ascii_art_indesign\/","title":{"rendered":"Make ASCII Art with InDesign"},"content":{"rendered":"

Do you like ASCII Art ?<\/strong>\u00a0Me too ! A few weeks ago, I have been started thinking\u00a0if it could be possible to generate ASCII Art from any regular InDesign Content<\/strong>. The concept is easy : take an image and translate every pixel into a representative character. How could I possibly introduce that idea within InDesign ? Finally, I succeeded in getting this done.\u00a0Not only I can convert images but any kind of content into ASCII Art.<\/strong><\/p>\n

Thanks to an extension, you can now generate ASCII Art from images but also shapes, text frames, groups and so forth. Is it possible the render isn\u2019t contrasted enough ? You can boost the contrast to get a better result ? Is the result too large, reduce the scale of the output ! Do you want to use your own character set ? Well, just edit the characters\u00a0associated to the tonal ranges. Do you want to keep the underlying material or remove it ? Just ask it !<\/p>\n

If you ever wanted a cool and easy way to play with ASCII Art within InDesign, download the extension and free your mind\u00a0\":D\"<\/strong><\/p>\n

\"asciiMe<\/p>\n

It\u2019s hard to state when ASCII Art appeared. If we only considered the computer side, then ASCII Art is quite recent. If we are more open minded and consider ASCII Art as playing with characters and typography, then the history is quite older. I won\u2019t dare giving a date myself. But let\u2019s stick to\u00a0a simple definition of ASCII Art as a way to express ideas and images by ordering characters in a certain way.<\/strong><\/p>\n

So the question is\u00a0how to we play ourselves in order to introduce ASCII Art within InDesign ? The answer is called BitmapData.<\/strong>\u00a0BitmapData is a class that give access to the raw structure of an image. So once you initiated this class, you can now read informations like width, height and every pixel composition. In my development,\u00a0I envisioned two leads<\/strong>. One was pure\u00a0extendscript<\/strong>\u00a0using the Adobe Bridge DOM and the other was using the\u00a0AS3<\/strong>\u00a0BitmapData class. As I am delivering an extension, you can understand that I picked the second one. I will introduce both approaches and then speak a little about the product.<\/p>\n

A ) BitmapData in Adobe Bridge<\/h4>\n

Adobe Bridge offers an access to an image BitmapDatas though its DOM.<\/strong>\u00a0Given a selection in Bridge, the following snippet reveals the RGB value of the first pixel of the image.<\/p>\n

\r\n\r\nvar\u00a0th = app.document.selections[0];\r\nvar\u00a0bmd =\u00a0new\u00a0BitmapData ( File ( th.path ));\r\nvar\u00a0pix1 = bmd.getPixel(0,0);\r\nvar\u00a0clr =\u00a0new\u00a0Color (pix1);\r\nalert(\u00a0"Red:"+clr.red+"\\rGreen:"+clr.green+"\\rBlue:"+clr.blue);\r\n\r\n<\/pre>\n
\"asciiMe<\/p>\n
Is this information correct ?<\/strong>\u00a0Let see what Photoshop tells us:<\/p>\n
<<\/p>\n
\"asciiMe<\/p>\n
It seems like\u00a0we have a gap between what bridge returns and the effective value.<\/strong>\u00a0I think that Bridge reads the raw value when ICC profile in Photoshop modifies the rendering of the pixel.\u00a0But as ASCII Art isn\u2019t that much about accuracy but expressionism, we can afford this gap.<\/strong><\/p>\n
So Bridge is able to look at the pixels value. Once that said, we can now envision to get our ASCII Art script done. But as the result has to be outputted in InDesign, we need to create a bridge between the two apps.\u00a0But I will stop here for a few reasons.<\/strong>\u00a0I indeed went a bit further but what made me change my mind was :<\/p>\n
    \n
  1. Performance was terrible<\/strong><\/li>\n
  2. Too many technologies implied.<\/strong><\/li>\n<\/ol>\n
    Could AS3 offers more opportunities ?<\/p>\n
    B )\u00a0\u00a0BitmapData in AS3<\/h4>\n
    BitmapData in AS3 is not much different than Bridge\u2019s. Of course, the methods and properties change but the idea of examining pixels value remain.\u00a0Let\u2019s see how we can get the pixel 1 value in AS3.<\/strong>\u00a0The following snippet will let us pick a file and learn about teh RGB value of the first pixel as we did in Bridge scripting:<\/p>\n
    \r\n\r\nprotected function button1_clickHandler(event:MouseEvent):void\r\n{\r\n var f:File = new File();\r\n f.browseForOpen("open");\r\n f.addEventListener(Event.SELECT, fileSelected );\r\n}\r\n\r\nprivate function fileSelected ( e:Event ):void\r\n{\r\n var f:File = e.target as File;\r\n\r\n var bitmapData:BitmapData;\r\n var loader:Loader = new Loader();\r\n loader.contentLoaderInfo.addEventListener ( flash.events.Event.COMPLETE, onComplete );\r\n loader.load ( new URLRequest ( f.url ) );\r\n}\r\n\r\nprivate function onComplete (event:Event ):void\r\n{\r\n var bmd:BitmapData = Bitmap( LoaderInfo ( event.target).content).bitmapData;\r\n var pix1:uint = bmd.getPixel(0,0);\r\n var rgb:Object = HexToRGB(pix1);\r\n Alert.show( "Red:"+rgb.r+"\\rGreen:"+rgb.g+"\\rBlue:"+rgb.b );\r\n}\r\n\r\nprivate function HexToRGB(value:uint):Object {\r\n var rgb:Object = new Object();\r\n rgb.r = (value >> 16) & 0xFF\r\n rgb.g = (value >> 8) & 0xFF\r\n rgb.b = value & 0xFF\r\n return rgb;\r\n}\r\n\r\n<\/pre>\n
    The last function ( HexToRGB ) comes from this link :\u00a0http:\/\/snipplr.com\/view.php?codeview&id=48683<\/a><\/p>\n
    And what about the result ?<\/strong><\/p>\n
    \"asciiMe<\/p>\n
    Once again, the result differs from Photoshop and Bridge<\/strong>. If we can understand that ICC profiles may affect the RGB values in Photoshop,\u00a0it\u2019s more suprising to have gaps between AS3 and ExtendScript.<\/strong>\u00a0Well, I think it\u2019s quite understandable. ExtendScript has its own cooking and we are getting the RGB value from another calculation.\u00a0Don\u2019t forget that pixel values are indeed numbers and their translation may leed to some calculation leaks<\/strong>\u00a0and in fine to a gap. Once again, we do not care here about absolute precision.<\/p>\n
    C) The \u00ab\u00a0Ascii Me\u00a0\u00bb extension<\/h4>\n
    More than \u00ab\u00a0Ascii-ing\u00a0\u00bb content within InDesign, my idea was to give control over a few parameters.<\/strong>Characters for instance. It was obvious for me that we can\u2019t force people to use a closed set of characters. Creativity comes when user have free hands over processus. Contrast also because some pictures or objects may be too low contrasted to generate a great render. Scaling the render was important to gain in performance and object handling.<\/p>\n
    Instructions :<\/strong><\/p>\n
      \n
    1. Prepare some paragraph style<\/strong>\u00a0to control the final look ( not a prerequisite but it will ease your process) :<\/li>\n<\/ol>\n
      – Set a monospace font<\/p>\n
      – Equals font size and leading<\/p>\n
      – Dramatically increase kerning to get a more natural proportion<\/p>\n
        \n
      1. Select one or more object to ASCII<\/strong><\/li>\n
      2. Edit parameters if needed<\/li>\n
      3. Click on the \u00ab\u00a0Ascii Me\u00a0\u00bb button<\/strong><\/li>\n<\/ol>\n
        Once that done, the doors of your creativity are wide open !\u00a0<\/strong>Here are a few renders I could generate myself :<\/p>\n
        \"asciiMe<\/p>\n
        \"\"<\/p>\n
        \"\"<\/p>\n
        D) Conclusion<\/h4>\n
        It\u2019s no mistery that I do like Extensions a lot. The reason on top of that is that you can create convergence between two universes and get the best of each of them : AS3 and ExtendScript. This Ascii Me extension shows this possible gathering. At some point in my development, I really thought I was exploring virgin lands when\u00a0I finally found this link :<\/strong><\/p>\n
        http:\/\/help.adobe.com\/en_US\/as3\/dev\/WS5b3ccc516d4fbf351e63e3d118a9b90204-7eee.html<\/p>\n
        The sample shows another approach.\u00a0<\/strong>For example, the tonal range is much wider than mine. I have 5 ranges, they have 64 of them.<\/p>\n
        \r\nprivate static const palette:String =\u00a0<code>"@#$%&8BMW*mwqpdbkhaoQ0OZXYUJCLtfjzxnuvcr[]{}1()|\/?Il!i><+_~-;,. "\r\n<\/pre>\n
        And for each of these ranges, tehre is a character associated. I was achieving my development when I think I could use these 64 values for this extension but I finally went back to my 5 ranges as the result wasn\u2019t the one I had in mind.\u00a0Sometimes the best is the\u00a0enemy\u00a0of good.<\/strong>\u00a0I was ok with my ranges and I didn\u2019t feel like the 64 values really improve the product.\u00a0But of course, that\u2019s my humble opinion.<\/strong><\/p>\n
        Hope you have fun and if you do something great,\u00a0feel free to send me so I can post it here or place a link in the comments.<\/strong><\/p>\n
        Enjoy and if you really like this, look at the Paypal button\u00a0\";)\"<\/p>\n
        Loic<\/strong><\/p>\n
        Download the AsciiMe Extension<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        Do you like ASCII Art ?\u00a0Me too ! A few weeks ago, I have been started thinking\u00a0if it could be possible to generate ASCII Art from any regular InDesign Content. The concept is easy : take an image and translate every pixel into a representative character. How could I possibly introduce that idea within InDesign […]<\/p>\n","protected":false},"author":2,"featured_media":1004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/posts\/975\/"}],"collection":[{"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/users\/2\/"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/comments\/?post=975"}],"version-history":[{"count":0,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/posts\/975\/revisions\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/media\/1004\/"}],"wp:attachment":[{"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/media\/?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/categories\/?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ozalto.com\/en\/wp-json\/wp\/v2\/tags\/?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}