Create an ASCII Gradient
This experiment is part of my larger experiment on converting any image to text. In this part I am going to explain how to create and ASCII gradient so as to arrange the ASCII characters from darker to lighter ones. A darker looking character is like ‘$’ or ‘Æ’ while a lighter character is like ‘.’ or ‘,’. We’ll find out how to arrange them in descending order based on this criterion.
To solve this problem I actually calculated and compared the pixels covered by the characters. The more the number of pixels covered, the darker the character is. You smell right – we are going to take the help of graphics API to determine these.
Using mono-spaced font: To compare evenly between the ASCII characters, we will use a mono-spaced font (Courier New in this case). A mono-spaced font is one where all the characters have equal width and height. It is usually used while editing code.
Without any more ado, here are the steps we are going to follow in the program. You may consider it as the algorithm:
- Initialize variables. Set font size to 1.
- Determine the width and height of a character on screen (It will be the same for all characters since we are using a mono-spaced font). Let’s say the width is W and height is H. Total number of pixels contained by the rectangle enclosing the character = W x H
- Print a character. Now count the number of pixels covered by the color of the character (black in this case). Let us call it pCount. Divide pCount by the total number of pixels calculated in step 1. That gives us the percentage of space covered by the character. Let us call it pPercent. We will find out the average of the percent of pixels calculated by varying font size from 1 to 10. This will give us a fair estimate for those characters which have nearly same pPercent value for some font size. It will give a more accurate value of the pPercent parameter.
- Increment font size by 1. Repeat steps 2 to 4 till font size is 10. Add the pPercent calculated after every 3 steps (2 to 4) to percentSum, which is the sum of pPercents for one character with font size varied from 1 to 10. Now divide percentSum by 10 to get the average pPercent value. Let us call it avgPercent.
- Store each obtained avgPercent value in an array. Define it as avgValues[256] (Since there are 256 ASCII characters). So if we are processing for ‘A’, we store its avgPercent in avgValues[65] (Since ASCII Value of A is 65).
Also define an array asciiValues[256] to store ASCII values of each corresponding character. - Repeat Step 1 to 4 with all different characters in the ASCII. Finally we have 256 different avgValues to compare.
- Now sort the array avgValues[] to get the required result. With each swap of avgPercent values during the sort, also swap the corresponding asciiValues. So when we have the avgValues[] array sorted, we will automatically get our required sequence of characters in asciiValues! Here is an example:
Before Sort
After Sort
asciiValue
avgPercent
asciiValue
avgPercent
\
]
^
_
`
a
0.086482
0.104275
0.063204
0.086958
0.013372
0.186839
`
^
\
_
]
a
0.013372
0.063204
0.086482
0.086958
0.104275
0.186839
In the above case, the avgPercent values are sorted to automatically obtain a the required series of ASCII characters (lighter to darker).
- Concatenate the characters of ASCII in the sequence of values gathered by asciiValues.
Example: For the above case, we have the sequence: “`^\_]a” which is arranged from lighter to darker characters.
After running my program, I got this sequence generated:
ÆÑÊŒØMÉËÈÃÂWQBÅæ#NÁþEÄÀHKRŽœXgÐêqÛŠÕÔA€ßpmãâG¶øðé8ÚÜ$ëdÙýèÓÞÖåÿÒb¥FDñáZPäšÇàhû§ÝkŸ®S9žUTe6µOyxξf4õ5ôú&aü™2ùçw©Y£0VÍL±3ÏÌóC@nöòs¢u‰½¼‡zJƒ%¤Itocîrjv1lí=ïì<>i7†[¿?×}*{+()\/»«•¬|!¡÷¦¯—^ª„”“~³º²–°¹‹›;:’‘‚’˜ˆ¸…·¨´`
You can easily see that the the sequence starts with characters that look dark. The characters look lighter progressively till the end. Now I can use this in my convert image to text program.
Hope you enjoyed this programming experiment and learnt a few things too. I’ll be really glad to listen from you. Please add your valuable suggestions and comments below.
1 Response
[…] Creating an ASCII gradient – Arranging ASCII characters from darker to lighter look. […]