Processing 1.0 - Processing Discourse

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

‹ Previous Topic | Next Topic ›

Pages: 1

Wrapping Text (Read 1790 times)

Phattee Junior Member Offline Posts: 89	Wrapping Text Aug 17^th, 2009, 5:46pm Hello, I'm trying to write a program that will get text from a file, print it to the screen, and add a carriage return each time it hits the right side. I have tried a few approaches to compare the width of the text against the width of the display window, but I just can't figure it out. Can anyone sort of nudge me in the right direction?

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #1 - Aug 17^th, 2009, 7:33pm i know that texone had a working example posted in his blog before he took it down. Maybe you can ask him...
	twitter.com/CedricKiefer

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #2 - Aug 17^th, 2009, 7:36pm just found this one using the search ... http://processing.org/discourse/yabb2/?num=1163947310
	twitter.com/CedricKiefer

antiplastik YaBB Moderator Offline Posts: 699 France	Re: Wrapping Text Reply #3 - Aug 18^th, 2009, 5:21am The text() function can handle this for you. See the reference: http://processing.org/reference/text_.html

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #4 - Aug 18^th, 2009, 6:49am ahh right, i totally forgot about it. This is the way you should go... and now i remember what Texone did. he was working on syllabication
	twitter.com/CedricKiefer

Phattee

Re: Wrapping Text
Reply #5 - Aug 19^th, 2009, 8:58am

Hi,

Thank you all very much for your help, the text() function got me really close to where I need to be, but I still can't get the text to be perfectly flush against the margin due to the spacing:

I've been trying to make a function that loads the string into an array, then uses splitTokens() to break it up into individual words, then adds a space if the width of the text doesn't exceed the width of the window or an "\n" if it does, but I just can't seem to get it right.

I'll post what I have as soon as I clean up that convoluted mess.

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #6 - Aug 19^th, 2009, 9:16am processing support 3 types of text alignment left center and right http://processing.org/reference/textAlign_.html as far as i understand what you need is justification(Blocksatz). Dont know how to achieve that.
	twitter.com/CedricKiefer

antiplastik

Re: Wrapping Text
Reply #7 - Aug 19^th, 2009, 9:23am

Yes, what you want is not text-wrapping, but text-justification.

In that case, splitting the line into word-tokens and adding extra blank pixels is the right way. Try this maybe :

1. Count how many words you need to almost fill a line -using textWidth()
2. Count how many extra blank pixels you need to reach the end of the line
3. Draw the words one by one with extra pixels in between

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #8 - Aug 19^th, 2009, 9:28am sounds good, would be a good and usefull addition to textAlign()...
	twitter.com/CedricKiefer

Phattee

Re: Wrapping Text
Reply #9 - Aug 19^th, 2009, 10:11am

Ok here's what I have so far:

Quote:

size(300, 100);
fill(0);

PFont plotFont;
plotFont = createFont("SansSerif", 20);
textFont(plotFont);

String[] starTrek = loadStrings("starTrek.txt");
String[] pieces = splitTokens(starTrek[0]);
String[] builder = new String[0];

float widthCount = 0;
int piecesCount = pieces.length;

for (int i = 0; i < piecesCount; i++) {
  float pieceWidth = textWidth(pieces[i]);
  widthCount += pieceWidth;

  if (widthCount == width) {
    builder = append(builder, "\n");
    widthCount = 0;
  }
  else {
    if ((widthCount < width) && (widthCount + 1 != width)) {
      builder = append(builder, pieces[i]);
      builder = append(builder, " ");
      widthCount++;
    }
    else if (widthCount > width){
      builder = append(builder, "\n");
      builder = append(builder, pieces[i]);
      widthCount = textWidth(pieces[i]);
    }
  }
}

pushMatrix();
translate (0, 50);
for (int i = 0; i < piecesCount; i++) {
  text(builder[i]);
}
popMatrix();

println(builder);

My beginner brain has been burnt to a crisp

Phattee

Re: Wrapping Text
Reply #10 - Aug 19^th, 2009, 10:21am

Here's another one that seems to be getting closer, but I still can't get the "\n" to work:

Quote:

size(300, 100);
fill(0);

PFont plotFont;
plotFont = createFont("SansSerif", 20);
textFont(plotFont);

String[] starTrek = loadStrings("starTrek.txt");
String[] pieces = splitTokens(starTrek[0]);
String[] builder = new String[0];

String blankPixel;
float widthCount = 0;
int piecesCount = pieces.length;

for (int i = 0; i < piecesCount; i++) {
  float pieceWidth = textWidth(pieces[i]);
  widthCount += pieceWidth;

  if ((widthCount < width)) {
    blankPixel = " ";
  }
  else {
    blankPixel = "\n";
    widthCount = textWidth(pieces[i]);
  }
  builder = append(builder, pieces[i] + blankPixel);
}

pushMatrix();
translate (0, 50);
for (int i = 0; i < piecesCount; i++) {
  text(builder[i]);
}
popMatrix();

println(builder);

when I do a println() of the builder[] array, it appears correct on that black area at the bottom of the Processing window, with spaces and carriage returns after the corresponding words (although it still runs beyond the right edge), but when the text() function prints to the screen, it just doesn't include the carriage returns.

Phattee

Re: Wrapping Text
Reply #11 - Aug 19^th, 2009, 11:27am

Ok, if I add textAlign(RIGHT) at the top and take out that bottom chunk that starts with pushMatrix() and put in this instead

Quote:

for (int i = 0; i < piecesCount; i++) {
formattedText += builder[i];
}

text(formattedText, width, 50);

println(builder);

I can get it flush with the right edge, but the text still gets cut off at the left edge.

antiplastik

Re: Wrapping Text
Reply #12 - Aug 19^th, 2009, 1:51pm

Actually, by blank pixels, I really meant pixels, not spaces.

Here is some code to draw one justified line of text :

Quote:

// justify one line of text
void linejustify(String s, int x, int y, int w) {
  // how long is the text?
  int tw = int(textWidth(s));
  // is it longer than expected width? if so, return
  if (tw > w) {
    println("Text is too long.");
    return;
  }
  // does it match perfectly? if so, print it
  if (tw == w) {
    text(s, x, y);
    return;
  }
  // if not, how much pixels shall we add to reach expected length?
  int gap = w - tw;
  // split the text into words
  String[] tokens = split(s, " ");
  // is there only one word - or no word at all? if so, print it
  if (tokens.length <= 1) {
    text(s, x, y);
    return;
  }
  // otherwise,
  // we will distribute the missing pixels after each word, in the spaces
  int spaces = tokens.length - 1;
  int[] pixelsToAddAfterToken = new int[tokens.length];
  for (int i = 0; i < spaces; i++) {
    pixelsToAddAfterToken[i] = floor(gap/spaces);
    if (i <= gap%spaces) pixelsToAddAfterToken[i]++;
  }
  for (int i = 0; i < tokens.length; i++) {
    text(tokens[i], x, y);
    x += textWidth(tokens[i]) + textWidth(" ") + pixelsToAddAfterToken[i];
  }
}

void setup() {
  size(250, 150);
  background(255);
  fill(0);
  textFont(createFont("", 12), 12);
  linejustify("This text should be perfectly justified.", 0, 40, width);
}

antiplastik YaBB Moderator Offline Posts: 699 France	Re: Wrapping Text Reply #13 - Aug 24^th, 2009, 9:57am See: http://processing.org/discourse/yabb2/num_1195788731.html and enhancement suggestion submitted here as bug report: http://dev.processing.org/bugs/show_bug.cgi?id=1309

Cedric YaBB Moderator Offline Posts: 1838	Re: Wrapping Text Reply #14 - Aug 24^th, 2009, 10:06am thanks for submitting it!
	twitter.com/CedricKiefer

Pages: 1

‹ Previous Topic | Next Topic ›