P5 text() and console.log treat multiline strings differently

p5.js Coding Questions
1

Hello! I am trying to print some ASCII art to my p5 sketch and am having a lot of trouble. When it prints to the console, the padding on the art is correct and it looks good in the console. But when I use the text(art,0,0) to try to print it to the sketch screen, the padding messes up entirely. I’m wondering why that is and how to fix that. Thank you!

let art= `Here’s some ASCII art:

    _______
   /       \  
  |  ___    | 
  | |___|   | 
  |         | 
   \______ / 
       |

[========]
| | | |
/ | \ /
/||

And here’s some more text. `;

function setup() {
createCanvas(400, 400);
background(220);
text(art,20,20);
console.log(art);
}

function draw() {

}

image
image1677×810 32.7 KB

2

Your editor and the console are probably using a fixed-width font, while text() is using a proportional font. Set a fixed-width font for p5 and it should match.

3

Thank you so much for this tip! I changed the font using textFont(‘Courier New’); (According to Google, Courier New is a monospaced font) and I still have the same issue. Any other tips?

4

The next problem is that you are using backslashes which act as an escape character. You can get around this by declaring your string as “raw”:

let art= String.raw`Here’s some ASCII art:

     _______
    /       \  
   |  ___    | 
   | |___|   | 
   |         | 
    \______ / 
        |
 [=========]
  |   |   |    |
 /    |    \  /
/_____|_____\|

And here’s some more text. `;
5

Thank you so much! This now works in an isolated sketch (the one shared above), but when I try to incorporate it into my bigger project, where the ASCII message is stored as a variable and starts and ends with 3x` (```), I am having trouble. Thank you so much for all your help so far!

Edit - printed in the console is the var currResp

image
image1722×633 32 KB

6

Since I can’t see the rest of your code, I don’t know where it goes wrong. Obviously something is removing leading whitespace characters. Try to keep all the strings as String.raw to preserve all of the characters as you typed them.

7

I’m relatively sure that the issue is in the code above, because when I print the art from each stage of the currResp# variable, it all prints correctly in the console. So the whitespace is always there, in some form. How would I get the initial string from an api call, so I can cast it as a String.raw like I do above, but would doing that earlier in the code help me? It seems like it looks right to the console all throughout.

image
image1755×678 14.4 KB

8

https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer.js#L233 has the code for the text() function which, potentially, does a lot of manipulation to the text to support word wrapping. I’m not sure if it somehow detects raw text to avoid that or not.

I would suggest starting with the simple example you posted that you know works and then gradually add the addition features you want in your full version, testing as you go, to see what causes the problem. At this point, I have no other ideas.

Edit: my final guess would be that performing string manipulation on a raw text string causes it to lose its “rawness”, reverting to a normal text string which p5 then tries to word-wrap. I leave it to you to search the javascript docs on the web about raw text and how to preserve it.

9

Solved:
It was the bounding box parameters (optional parameters, in bold below) that were messing up the line spacing. The fix was to use a monospaced font + take out those optional bounding box params. The raw string was helpful for the copy and pasting I did from one sketch to another, but it ultimately wasn’t needed when working all within 1 sketch. Thanks for all your help @scudly !

text(currResp, width / 2+20, currHei,width/2-30, currHei+300);

10

Raw text may still needed if you have any back-slashes in your picture as javascript will try to interpret them as special characters. For instance, two in a row will probably get replaced by a single one. Or it might not, but be sure to test it.

Glad you got it working.