ASCII Art in Affinity

[JJohn1980]

hi,

I'm working on this ASCII art project and I used mockofun to transform the Apple logo into ASCII art (Newskool setting) Here's what I got:

now, the tool's ASCII photo filter allows me to download the result as an image or grab the actual text from the ascii art and I can paste it into affinity, but it's not the same proportions. do I have to use a certain font? how do I do this using the text and not the image.

has anybody tried doing ASCII art in affinity?

 

thanks,

JJohn

[v_kyr]

Hmm, did you already tried with frame text and a monospace font like Lucida Console, Courier ... etc. for the ASCII art?

                          $$$$
                        $$$$$$
                       $$$$$$
                       $$$$
                       $$
          $$$$$$$$$$$$$ $$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
     $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
    $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
    $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
     $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
      $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
         $$$$$$$$$$$$$$$$$$$$$$$$$$$$$
           $$$$$$$$$$$$$$$$$$$$$$$$$
             $$$$$$$$$$$$$$$$$$$$$
               $$$$$$$$  $$$$$$$

 

[Alfred]

1 hour ago, JJohn1980 said:

I used mockofun to transform the Apple logo into ASCII art

Please provide a link to the relevant page on the MockoFUN site.

[R C-R]

1 hour ago, v_kyr said:

Hmm, did you already tried with frame text and a monospace font like Lucida Console, Courier ... etc. for the ASCII art?

I give up! How did you get the text to conform to the outline of the logo shape?

[kenmcd]

6 minutes ago, R C-R said:

I give up! How did you get the text to conform to the outline of the logo shape?

To look like the original, you need to use the same font and set the same line height.
That way you get the same aspect ratio on each character as the original.
Monospace fonts have different widths - think normal vs. semi-condensed monospace.
And different vertical metrics.
So you also need to set the leading/line height the same to get the same aspect ratio which was used to create the ascii art.

[R C-R]

2 minutes ago, LibreTraining said:

To look like the original, you need to use the same font and set the same line height.
That way you get the same aspect ratio on each character as the original.
Monospace fonts have different widths - think normal vs. semi-condensed monospace.
And different vertical metrics.
So you also need to set the leading/line height the same to get the same aspect ratio which was used to create the ascii art.

I'm confused. First I thought all characters in monospaced fonts had the same widths.

But aside from that, I am asking how specifically you got all the characters to appear within the shape of the logo. When I try just typing a long string of "$" characters into a vector shape of a logo, I get only one line of characters & as soon as it is longer than the width of the logo it jumps out.

Maybe an example AD file showing both the original logo shape or image you used & the final Text frame filled with the characters you typed would help me understand this better.

[William Overington]

4 minutes ago, R C-R said:

I'm confused. First I thought all characters in monospaced fonts had the same widths.

All characters in a monospaced font should have the same width as all other characters wthin the same font.

Yet each of two monospaced fonts do not necessarily have characters of the the same width as the characters of the other font.

William

 

[R C-R]

1 minute ago, William Overington said:

All characters in a monospaced font should have the same width as all other characters wthin the same font.

Yet each of two monospaced fonts do not necessarily have characters of the the same width as the characters of the other font.

That much I understand. It's just the way @LibreTraining phrased it made me think what was meant might be that within a single font weight the characters could have different widths.

But I am still puzzled by how all the characters remained inside the logo shape/image/whatever it was that the original starting point.

[v_kyr]

Another example here on the go ..

1)   

2)

• https://manytools.org/hacker-tools/convert-images-to-ascii-art/go/

• ascii-art.txt

 

3) 

• apple-logo-ascii.afdesign

[R C-R]

6 minutes ago, v_kyr said:

Another example here on the go ..

So you are not doing this in AD alone, right?

So when the OP said "has anybody tried doing ASCII art in affinity?" the answer is it cannot be done without the help of another app or website?

[William Overington]

10 minutes ago, R C-R said:

That much I understand. It's just the way @LibreTraining phrased it made me think what was meant might be that within a single font weight the characters could have different widths.

But I am still puzzled by how all the characters remained inside the logo shape/image/whatever it was that the original starting point.

The space character in a monospaced font should have the same width as each of the printing characters in that font.

Does that solve it?

William

 

 

[kenmcd]

25 minutes ago, R C-R said:

I'm confused. First I thought all characters in monospaced fonts had the same widths.

They do - within that particular font.
But the point was making is that different mono fonts will have different fixed widths.
The width of Courier is different than TheSansMono Condensed, for example.

So that ASCII art tool is using a particular font, which has particular horizontal and vertical metrics, and it is fitting the characters into the shape using those metrics.
So to replicate the exact aspect ratio and not have a distorted art, you need the same metrics.

[R C-R]

Just now, William Overington said:

The space character in a monospaced font should have the same width as each of the printing characters in that font.

Does that solve it?

I thought the ASCII version was being done entirely in AD, not with the help of something that added the spaces. IOW, that somehow the AD text frame itself was causing one continuous string of characters not to overflow outside the logo shape, without adding any spaces, returns, or whatever.

[William Overington]

3 minutes ago, R C-R said:

So you are not doing this in AD alone, right?

So when the OP said "has anybody tried doing ASCII art in affinity?" the answer is it cannot be done without the help of another app or website?

Not necessarily. One could do ASCII art from zero. People used to do ASCII art using teleprinters back in the 1960s.

Decide on a number of ASCII characters with various ammunts of black, so, say, a space, a fullstop, an I, an o, an M.

Draw a grid over a picture. For each cell decide which is the appropriate level of black and use the appropriate character.

It takes time, but can be done on the basis as time taken often does not matter if it is a hobby.

William

 

[Alfred]

7 minutes ago, R C-R said:

So when the OP said "has anybody tried doing ASCII art in affinity?" the answer is it cannot be done without the help of another app or website?

The OP’s question was a follow-up to this observation:

3 hours ago, JJohn1980 said:

now, the tool's ASCII photo filter allows me to download the result as an image or grab the actual text from the ascii art and I can paste it into affinity, but it's not the same proportions.

I took that to mean that the use of a third-party website was assumed to be a necessary part of the process, but the OP was asking how to avoid getting a distorted result in AD.

[v_kyr]

6 minutes ago, R C-R said:

So you are not doing this in AD alone, right?

So when the OP said "has anybody tried doing ASCII art in affinity?" the answer is it cannot be done without the help of another app or website?

Did you even read and understood the OP's initial posting?

Keywords:

• mockofun (... to transform the Apple logo into ASCII art)
• ... or grab the actual text from the ascii art and I can paste it into affinity
• ... but it's not the same proportions. do I have to use a certain font?
• ...

[R C-R]

Just now, v_kyr said:

Did you even read and understood the OP's initial posting?

Of course I read it. I just did not understand that all of the solutions involved using a third party website or app in addition to AD.

[Old Bruce]

22 minutes ago, William Overington said:

People used to do ASCII art using teleprinters back in the 1960s.

In the 60's through the 80's I used to do it with a typewriter.

[JJohn1980]

hey guys, thanks so much for your help.

Yes, using monospace fonts is the solution for me. especially for graphics with different colors.

I used the mockofun tool because it's free, and I really love the filters.

The ASCII filter is very flexible as it allows me to work directly on the image. I can set how many characters to have on a line. Here's a video on how I do it: 

I read a bit about monospace fonts and that was my original problem. monospace fonts have the same width and that's what they use in mockofun. it provides a consistent and proportional design. 

non monospace fonts have different width and therefore the lines become of different sizes.

with monospace:

                             #####                             
                  #########.       .#########.                 
             ####o                           .####o            
         ####     ##         #   #         ##     ####         
      ###    ######          #####o         ######    ###      
    x##   #########         #######         #########   ###    
   ##   ###########         #######         ###########   ##   
  ##  ###############.    ###########     ###############  ##  
 ##  #####################################################  ## 
 ##  #####################################################  ## 
 ##  #####################################################  ## 
 ##  #####################################################  ## 
  ##  #########   ####### ########### X######   #########  ##  
   ##   #####        #      .#####o      #        #####   ##   
     ##   ####                ###                ####   ##     
       ###   #                 #                 #   ###       
         ####                  #                  ####         
             #####                           #####             
                  ###########x   o###########                  
                                                               

without monospace:

                             #####                             
                  #########.       .#########.                 
             ####o                           .####o            
         ####     ##         #   #         ##     ####         
      ###    ######          #####o         ######    ###      
    x##   #########         #######         #########   ###    
   ##   ###########         #######         ###########   ##   
  ##  ###############.    ###########     ###############  ##  
 ##  #####################################################  ## 
 ##  #####################################################  ## 
 ##  #####################################################  ## 
 ##  #####################################################  ## 
  ##  #########   ####### ########### X######   #########  ##  
   ##   #####        #      .#####o      #        #####   ##   
     ##   ####                ###                ####   ##     
       ###   #                 #                 #   ###       
         ####                  #                  ####         
             #####                           #####             
                  ###########x   o###########                  
                                                               
 

[William Overington]

13 hours ago, Old Bruce said:

In the 60's through the 80's I used to do it with a typewriter.

One time in the 1960s I produced a similar effect using metal type 12 point square single type ornaments and spaces. If I remember correctly I used spaces, thick-line circles and filled circles. I then printed copies letterpress on a hand-operated printing press, an Adana 8 x 5 machine, on, I think, a light beige paper of a printing paper brand called, if I remember correctly, Clan 66. I remember that name as I used that type of paper for various things, it was available in a number of colours, I remember using yellow and a deep turquoise blue too.

Black ink on quality tinted paper gives a very stylish look.

William

 

[Alfred]

7 hours ago, JJohn1980 said:

I used the mockofun tool because it's free, and I really love the filters.

Thanks for the explanation, but you still haven’t told us exactly where to find that text filter on the MockoFun site! Although I’ve watched the video clip that you posted here, I’m afraid I’m none the wiser about how to reach that page.

[JJohn1980]

40 minutes ago, Alfred said:

exactly where to find that text filter on the MockoFun

Well, I thought the video is pretty self explanatory, but I will try to do it in words too:

1. log into https://www.mockofun.com/

2. Upload the image of the logo and add it to the work area

3. Select the image, go to FILTERS (upper menu) and add the ASCII art filter

[thomaso]

15 hours ago, R C-R said:

I just did not understand that all of the solutions involved using a third party website or app in addition to AD.

The additional app is used to get the required blank spaces typed correctly + switch characters corresponding to the image brightness at each glyph position.

The point of "ASCII art" is that it never is text inside a (vector) shape object – but just text looking like that.
So, you can do the exactly same within Affinity only but its a lot more cumbersome. Or as Bruce pointed out, with a manual typewriter.

The entire text always fills a rectangular area / and thus depends on a monospace font. Note the large number of blank spaces around the apple, with a break at the end of each line:

[walt.farrell]

1 minute ago, thomaso said:

The point of "ASCII art" is that it never is text inside a (vector) shape object – but just text looking like that.

On the other hand, couldn't you draw a vector shape (such as an apple shape), get it looking like you want, and click on it with the Frame Text Tool to give you Shape Text? Then fill it it with the appropriate characters. You could insert zero-width spaces to break lines of text. And you might need to adjust the shape a bit to account for the indents that will be applied automatically.

[thomaso]

11 minutes ago, walt.farrell said:

Then fill it it with the appropriate characters.

That is the point and 'problem'. Yes, it is possible but useless time consuming since alternatives exist. Whereas wrapped text is more useful only for "real" text – but not for a series of same characters which require specific manually typed spaces at the correct positions to cause line breaks.