Imaging ASCII Art
I know, I've been on kind of an "Image" thing recently. Well with today's post I think I've finally got it out of my system. Today we're going to highlight two kind of, sort of, related projects.
First we return to some work from an image ninja master, Dewald Esterhuizen.
This article explores the concept of rendering ASCII Art from source images. Beyond exploring concepts this article also provides a practical implementation of all the steps required in creating an Image ASCII Filter.
Building the Sample
There are no special requirements or instructions for building the sample source code.
Using the Sample Application
The sample source code that accompanies this article includes a sample application. The concepts illustrated in this article can tested and replicated using the sample application.
The sample application user interface implements a variety of functionality which can be described as follows:
- Loading/Saving Images – Users are able to load source/input images from the local file system through clicking the Load Image button. Rendered ASCII Art can be saved as an image file when clicking the Save Image button.
- Pixels Per Character – This configuration option determines the number of pixels represented by a single character. Lower values result in better detail/definition and a larger proportional output. Higher values result in less detail/definition and a smaller proportional output.
- Character Count – The number of unique characters to be rendered can be adjusted through updating this value. This value can be considered similar to number of shades of gray in a grayscale image.
- Font Size – This option determines the Font Size related to the rendered text.
- Zoom Level – Configure this value in order to apply a scaling level when rendering text.
- Copy to Clipboard – Copy the current ASCII Art string to the Windows Clipboard, in Rich Text Format.
The following image is screenshot of the Image ASCII Art sample application is action:
Converting Pixels to Characters
ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the 95 printable (from a total of 128) characters defined by the ASCII Standard from 1963 and ASCII compliant character sets with proprietary extended characters (beyond the 128 characters of standard 7-bit ASCII). The term is also loosely used to refer to text based visual art in general. ASCII art can be created with any text editor, and is often used with free-form languages. Most examples of ASCII art require a fixed-width font (non-proportional fonts, as on a traditional typewriter) such as Courier for presentation.
This article explores the steps involved in rendering text strings representing ASCII Art, implementing source/input images in rendering ASCII Art text representations. The following sections details the steps required to render ASCII Art text strings from source/input images:
- Generate Random Characters – Generate a string consisting of random characters. The number of characters will be determined through user input relating to the Character Count option. When generating the random string ensure that all characters added to the string are unique. In addition avoid adding control characters or punctuation characters. Control characters are non-visible characters such as Start of Text, Beep, New Line or Carriage Return. Most punctuation characters occupy a lot less screen space compared to regular alphabet characters.
- Determine Row and Column Count – Rows and Columns in terms of the Character Count option indicate the ratio between pixels and characters. The number of rows equate to the image height in pixels divided by the Character Count. The number of columns equate to the image width in pixels divided by the Character Count.
- Iterate Rows/Columns and Determine Colour Averages – Iterate image pixels in terms of a rows and columns grid strategy. Calculate the sum total of each grid region’s colour values. Calculate the average/mean colour value through dividing the colour sum total by the Character Count squared.
- Map Average Colour Intensity to a Character – Using the average colour values calculate in the previous step, calculate a colour intensity value ranging between 0 and the number of randomly generate characters. The intensity value should be implemented as an array index in accessing the string of random characters. All of the pixels included in calculating an average value should be represented by the random character located at the index equating to the colour average intensity value.
He continues into talking about each major section of code, helping you use and understand his sample.
The next project by Hisham Abdullah Bin Ateya is simpler, but still an interesting different look at providing a image to ASCII Art conversion, using VB.Net and LINQ
I saw many articles explaining how to generate ASCII Art from image, but I didn't see any article that achieves the same stuff in LINQy style. With that, I 'll explain how to use LINQ technology to compose a couple of functions to achieve our goal.
As we know, Language Integrated Query (LINQ) is a powerful technology for composing, querying, transformation different data source, all of that inside your code.
I think of ASCII Art as composing and transforming a couple of functions to generate the beauty stuff.
Using the Code
The LINQ to ASCII Art is very straight forward. In this section, I'll explain every function in detail.
This main purpose of this function is to get the actual pixels for a specified image, so it accepts a bitmap, iterates through all its pixels horizontally and vertically using the width and the height of that image, and uses the
GetPixelfunction to get a pixel with specific coordinates. Then, the return value is the actual pixels as
IEnumerable(Of Color)to make it easy to play with those pixels using LINQ later on. Its code looks like this:
Here's a snap of the source;
Now you've seen two different approaches, go forth and ASCII!