Text Overflow Issue with Characters in Strings

[Rahulhanje]

@SableRaf
I have encountered an issue where entering a string of text that exceeds the dimensions of the canvas results in the text being cut off or becoming unreadable. The problem arises when the length of the string surpasses the available canvas size.

example URL:https://processing.org/examples/charactersstrings.html

I’d like to work on this issue. Could @SableRaf please assign it to me? Also, I would appreciate any guidance on how to fix it.

[SableRaf]

Hi @Rahulhanje,

Good catch! You are correct. The behavior of the live sketch does not match the behavior of the Processing code on the page. This is due to a discrepancy between the way that Processing and p5.js handle text wrapping.

In Processing, it is sufficient to call text(words, 50, 120, 540, 300); where the numbers define the boundaries of a rectangle container for the text. Text wrapping is active by default in that scenario.

However, in p5.js, you have to additionally call textWrap() to activate the wrapping. In this particular case, you should use the CHAR parameter, so textWrap(CHAR) (edit: It's a little more nuanced than that, see correction below)

To fix this, you will need to edit the corresponding livesketch.js file at https://github.com/processing/processing-website/blob/main/content/examples/Basics/Data/CharactersStrings/liveSketch.js

For more details about updating live examples, please see examples.md.

I'll assign this issue to you. Let me know if you still have questions and feel free to make a pull request for the change.

[SableRaf]

Correction: the behavior difference is specific to character-wise wrapping. Word wrap DOES work in p5.js by default if you set boundaries for the text rectangle. However it does NOT wrap on characters.

[Rahulhanje]

Thank you for assigning the issue to me I’ll start working on it and will need a bit of time to resolve it.

[Rahulhanje]

@SableRaf I Created a pull request on solving this issue can you please review the code and merge it

[Stefterv]

Hi Rahulhanje,

I took a look at your pull request and have merged it into the website

[Rahulhanje]

Thankyou @Stefterv this is my First open source Contribution

[Rahulhanje]

I checked the website, and my change is visible. It's working perfectly fine

[SableRaf]

Hi @Rahulhanje,

Thank you so much and congratulations on your first contribution! 🎉

I reopened this issue to mention that the livesketch.js code should replicate the original Processing sketch's behavior as closely as possible. This is important to avoid any confusion for users since the code displayed on the example page is the code of the Processing sketch. I have updated the documentation about examples to clarify this point.

Please open a new PR to revert the changes and only leave the s.textWrap(CHAR) modification.

Thank you again for your efforts! If you have any questions, feel free to ask.

[Rahulhanje]

@SableRaf

Sorry to bother you sir , but as mentioned in the documentation, I only edited livesketch.js. If I revert the code, except for
s.textWrap(CHAR), the error remains the same. If I've misunderstood the error, could you please explain exactly what I done
wrong and whate i need to change

[Rahulhanje]

@SableRaf

I reverted the changes except for s.textWrap(CHAR). Now, the characters vertically overflow the canvas. To fix this, I implemented dynamic height adjustment, but I suspect these code lines are not aligned with the expected behavior of the Processing sketch. Am I right?