Jump to content

Recommended Posts

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:

image.jpeg.bd3952ad7d87d5ce184a7da6b832ab37.jpeg

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

Link to comment
Share on other sites

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

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

 

ascii-zeichen.jpg.76e2e1979dec222f0f326a93dff578b8.jpg

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher for Windows 1.10 • Windows 10 Home/Pro
Affinity Photo for iPad 1.10 • Designer for iPad 1.10 • iPadOS 15.5 (iPad Air 2)

Link to comment
Share on other sites

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?

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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

 

Using a Lenovo laptop running Windows 10 in England

Link to comment
Share on other sites

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.

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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?

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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

 

 

Using a Lenovo laptop running Windows 10 in England

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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

 

Using a Lenovo laptop running Windows 10 in England

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher for Windows 1.10 • Windows 10 Home/Pro
Affinity Photo for iPad 1.10 • Designer for iPad 1.10 • iPadOS 15.5 (iPad Air 2)

Link to comment
Share on other sites

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?
  • ...

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

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.

Affinity Photo 1.10.5, Affinity Designer 1.10.5, Affinity Publisher 1.10.5;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.5.280 & Affinity Designer 1.10.5 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.0.2

Link to comment
Share on other sites

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.

MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 11.6.8

Affinity Designer 1.10.5 | Affinity Photo 1.10.5 | Affinity Publisher 1.10.5 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

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###########                  
                                                               
 

Link to comment
Share on other sites

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

 

Using a Lenovo laptop running Windows 10 in England

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher for Windows 1.10 • Windows 10 Home/Pro
Affinity Photo for iPad 1.10 • Designer for iPad 1.10 • iPadOS 15.5 (iPad Air 2)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

691714823_asciiartfindspaces.jpg.bb353490e7199de97ffec5c7118e518f.jpg

macOS 10.14.6, MacBookPro Retina 15" + Eizo 27"

Link to comment
Share on other sites

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.

-- Walt

   Desktop: new:  Windows 11 Home, version 21H2 (22000.613) 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090  (old: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970 )
   Laptop:  Windows 10 Home, version 21H2 (19044.1706) 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
    Affinity Photo 1.10.5 (.1342) and 1.10.5.1342 Beta   / Affinity Designer 1.10.5 (.1342) and 1.10.5.1342 Beta  / Affinity Publisher 1.10.5 (.1342) and 1.10.5.1282 Beta
 iPad Pro M1, 12.9", iPadOS 15.4.1, Apple Pencil 2, Magic Keyboard

  Affinity Photo 1.10.5 (.280) and 1.10.2 (.266) Beta / Affinity Designer 1.10.5 (.21) and 1.10.3 (.19) Beta 

Link to comment
Share on other sites

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.

1312440763_shapedcurvetext.jpg.b15e3adabe70944cd56d5318f23e3d3e.jpg

macOS 10.14.6, MacBookPro Retina 15" + Eizo 27"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.