# How to break line using loadspring()?

**URL:** <https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668>\
**Category:** Coding Questions\
**Created:** [July 11, 2019, 4:31pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668 "2019-07-11T16:31:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 11, 2019, 4:31pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/1 "2019-07-11T16:31:25Z")

</div>

Hello,  
I’d like to split my text into Strings and to move the same Strings to new coordinates. First when I split the text I don’t manage to insert a line break, how should I proceed?  
Thanks a lot in advance for your help.  
Best,  
L

```auto
PFont f;
String alphabet="ABCDEFGHIJKLMNOPQRSTUVWXYZ2019,.;:!?\n ";
String wordsList="FOLLY,WHAT,FOR,TO,IS,THE,WORD,ALL,GIVEN,IS,FROM,ALL,THAT,SEEING,THIS,SEE,GLIMPSE,NEED,SEEM,WHERE,OVER,AWAY,AFAR,AFAINT";
String []lines;
String message;
int posX = 20;
int posY = 50;
boolean [] drawWords = new boolean[wordsList.length()];
boolean drawText;
char upperCaseChar;

void setup() {
  size(1080, 1600);
  f = createFont("Arial", 25, true);
  textFont(f);
  lines = loadStrings("Beckett.txt"); //laden des zu analysierenden textes
  message= join(lines, " ");
  lines=split(message, ",");
  //message = message.replaceAll(",", "");
}

void draw() {

  background(0);
  translate(100, 100);
  smooth();
  posX=-40;
  posY=10;
  float[] sortPositionsX = new float[wordsList.length()];
  String [] words= split(message," ");
  for (int i=0; i<words.length; i++) {
    String word= words[i].toLowerCase();
    int index = wordsList.indexOf(word);
    if (index<0)index=0;
    float m=map(mouseX, 50, width-50, 0, 1);
    m= constrain(m, 0, 1);
    float sortX = sortPositionsX[index];
    float interX = lerp(posX, sortX, m);
    float sortY =index*30+30;
    float interY = lerp(posY, sortY, m);

    posX+=textWidth(words[i])+10;
      if (word.equals(",")) {
        posY+=40;
    }

    textSize(40);
    fill(255);
    text(word, interX, interY);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 5:22pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/2 "2019-07-11T17:22:54Z")

</div>

```auto

PFont f;
String alphabet="ABCDEFGHIJKLMNOPQRSTUVWXYZ2019,.;:!?\n ";
String wordsList="FOLLY,WHAT,FOR,TO,IS,THE,WORD,ALL,GIVEN,IS,FROM,ALL,THAT,SEEING,THIS,SEE,GLIMPSE,NEED,SEEM,WHERE,OVER,AWAY,AFAR,AFAINT";
String []lines = {"fdsj kdsfjfdslka mnmxcn abandbdf", 
  "dslkjf cmxv xcyv, mycnvjdsh ioweretu", 
  "asasassa qwqwq vvvvvv, lolklokkloklo zuzuzuzuzuz"};
String message;
int posX = 20;
int posY = -50;
boolean [] drawWords = new boolean[wordsList.length()];
boolean drawText;
char upperCaseChar;

void setup() {
  size(1080, 1600);
  f = createFont("Arial", 25, true);
  textFont(f);
  // lines = loadStrings("Beckett.txt"); //laden des zu analysierenden textes
  message= join(lines, " ");
  lines=split(message, ",");
  //message = message.replaceAll(",", "");
}

void draw() {

  background(0);
  translate(100, 100);
  smooth();
  posX = 40;
  posY = 50;

  float[] sortPositionsX = new float[wordsList.length()];
  String [] words= split(message, " ");

  for (int i=0; i<words.length; i++) {
    String word= words[i].toLowerCase();
    int index = wordsList.indexOf(word);
    if (index<0)
      index=0;
    float m=map(mouseX, 50, width-50, 0, 1);
    m = constrain(m, 0, 1);
    float sortX = sortPositionsX[index];
    float interX = lerp(posX, sortX, m);
    float sortY =index*30+30;
    float interY = lerp(posY, sortY, m);

    posX += textWidth(words[i])+10;

    if (word.equals(",") || word.indexOf(",")>0) {
      // new line 
      posX = 40; 
      posY += 40;
    }

    textSize(40);
    fill(255);
    text(word, 
      interX, posY);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 5:28pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/3 "2019-07-11T17:28:33Z")

</div>

Not sure what you mean by loadspring().

Anyway, in this sketch we receive a line break by changing the xpos and ypos when the if-clause is true:

```auto
    if (word.equals(",") || word.indexOf(",")>0) {
      // new line 
      posX = 40; 
      posY += 40;
    }

    textSize(40);
    fill(255);
    text(word, 
      interX, posY);

```

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 11, 2019, 5:56pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/4 "2019-07-11T17:56:23Z")

</div>

Thank you very much dear @Chrisir,  
well the loadspring() is just here to upload a ‘long’ text instead of including it in the code…  
What I’d like to achieve ist to sort the most employed words in this Beckett’s poem !  
Thanks you very much for the help!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 6:01pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/5 "2019-07-11T18:01:16Z")

</div>

if you want to count the words in the poem(s):

I recommend HashMap - see reference.

First do the counting, then show the results

I can make an example

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 6:23pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/6 "2019-07-11T18:23:13Z")

</div>

```auto

import java.util.Map;

PFont f;

String wordsList=
  "FOLLY,WHAT,FOR,TO,IS,THE,WORD,ALL,GIVEN,IS,FROM,ALL,THAT,SEEING,THIS,SEE,GLIMPSE,NEED,SEEM,WHERE,OVER,AWAY,AFAR,AFAINT";
String[] wordsList2; 

String []lines = {"fdsj kdsfjfdslka mnmxcn abandbdf,", 
  "dslkjf cmxv xcyv, mycnvjdsh ioweretu,", 
  "FOLLY,WHAT,FOR,TO,IS,THE,WORD,ALL,GIVEN,IS,FROM,ALL,THAT,SEEING,THIS,SEE,GLIMPSE,NEED,SEEM,WHERE,OVER,AWAY,AFAR,AFAINT,", 
  "FOLLY,WHAT,FOR,TO,IS,THE,WORD,ALL,GIVEN,IS,FROM,", 
  ",THE,WORD,ALL,GIVEN,IS,FROM,", 
  "asasassa qwqwq vvvvvv, lolklokkloklo zuzuzuzuzuz"};
String []lines2; 

int posX = 20;
int posY = -50;

// ***********************************************************************************************
// Note the HashMap's "key" is a String and "value" is an Integer
HashMap<String, Integer> hm1 = new HashMap<String, Integer>();
// ***********************************************************************************************

void setup() {
  size(1080, 1600);

  f = createFont("Arial", 25, true);
  textFont(f);

  String message;
  // lines = loadStrings("Beckett.txt"); //laden des zu analysierenden textes
  message= join(lines, " ");
  lines2=split(message, ",");

  // Init 
  wordsList2 = split(wordsList, ","); 
  for (String s : wordsList2) {
    hm1.put(s.toLowerCase(), 0); // all 0
  }

  // Counting 
  for (int i=0; i<lines2.length; i++) {
    String word = lines2[i].toLowerCase().trim();
    if (hm1.get(word) != null) {
      hm1.put(word, ((int) (hm1.get(word)))+1); // add 1
    }
  }
}

void draw() {
  background(0);
  posX = 40;
  posY = 50;

  // Showing 
  textSize(40);
  fill(255);
  //// Using an enhanced loop to iterate over each entry
  //for (Map.Entry me : hm1.entrySet()) {
  // text(me.getKey() + " ", 33, posY);
  // text((me.getValue().toString()), 177, posY);
  // posY += 40;
  //}//for

  for (String s : wordsList2) {
    if (hm1.get(s.toLowerCase()) != null) {
      text(s, 33, posY);
      text(hm1.get(s.toLowerCase()), 237, posY);
      posY += 40;
    }
  }
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 12, 2019, 11:23am UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/7 "2019-07-12T11:23:58Z")

</div>

Waooow! Thank you so much dear @Chrisir for this great example using HashMap !  
Unfortunately I still have strange problems:  
when using  
`posX+=textWidth(words[i])+10;`  
the spaces between theStrings (words[i]) gets weird, some are normal other are too wide or too narrow?!  
How come? Thanks a lot. best, L

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 12, 2019, 8:02pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/8 "2019-07-12T20:02:49Z")

</div>

> posX+=textWidth(words[i])+10;

It depends from the sketch:

- e.g. in your first post you don’t use posX but `interX` - you use map()

- also, you `text()` the variable `word` which is lowerCase but use upper case with textWidth. The two can’t match

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 12, 2019, 9:16pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/9 "2019-07-12T21:16:12Z")

</div>

Hey @Chrisir,

thanks for your reply andhelp as usual :))

“you `text()` word which is loweCase but use upper case with textWidth”

do you mean the textWidth() function use uppercase by default?!

Regarding the HashMap method, it’s really great and powerful and thank you again for spending some time

writing this example. I still don’t get it completely, but will try to work with it to change the textSize()

of my main text(). I managed to pass the value here, not to my main text… I’ll post my attempts asap!

```auto
    for (String s : wordsList2) {
if (hm1.get(s.toLowerCase()) != null) {
      textSize(hm1.get(s.toLowerCase())*5); text(s, 33, posY);
text(hm1.get(s.toLowerCase()), 237, posY);
posY += 40;
}

```

Laurent Mareschal  
[https://laurentmareschal.com](https://laurentmareschal.com)

> **[laurent mareschal (@l.mareschal) • Instagram photos and videos](https://www.instagram.com/l.mareschal/)**
>
> 247 Followers, 657 Following, 134 Posts - See Instagram photos and videos from laurent mareschal (@l.mareschal)

  
P +33 (0)6.65.62.44.59

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 12, 2019, 9:24pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/10 "2019-07-12T21:24:06Z")

</div>

> [@lolonulu](#):
>
> do you mean the textWidth() function use uppercase by default?!

No.

I was referring to this line: posX+=textWidth(words[i])+10;

words[i] is not lower case

but you use text() with word and you made this lower case. So the text width textWidth(words[i]) is not matching the text you output with text(word…).

**Remark**

> will try to work with it to change the textSize() of my main text().

see [Word Cloud Threads - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/764/word-cloud-threads)

**Remark**

Remember to hit `ctrl-t` in processing prior to posting.

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 17, 2019, 4:12pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/11 "2019-07-17T16:12:34Z")

</div>

Dear @Chrisir,

I still have the same problem, even if all the texts are now in lowerCase…?!  
Where does it come from?! Thanks a lot in advance. best, L

```auto
String wordsList="afaint,afar,all,and,away,folly,for,from,given,glimpse,is,need,over,see,seeing,seem,that,the,there,this,to,where,what,word,";
String[]lines;
String message;
int posX;
int posY;
boolean [] drawWords = new boolean[wordsList.length()];
boolean drawText;

// *****************************************************************************************************************************************

void setup() {
  size(1080, 1600);
  lines = loadStrings("Beckett.txt"); //laden des zu analysierenden textes
  message= join(lines, " ");
  lines=split(message, ",");
}

// *****************************************************************************************************************************************

void draw() {
  background(0);  
  translate(100, 100);
  smooth();
  posX = 0;
  posY = 0;

  String [] words= split(message, " ");

  for (int i=0; i<words.length; i++) {
    String word= words[i];
    int index = wordsList.indexOf(word);
    if (index<0)
      index=0;
    float m=map(mouseX, 50, width-50, 0, 1);
    m = constrain(m, 0, 1);
    float sortX = 0;
    //float interX = lerp(posX, sortX, m);
    float sortY =index*10+30;
    float interY = lerp(posY, sortY, m);
    posX += textWidth(word)+20;

    if (word.equals(",") || word.indexOf(",")>0) {
      // new line 
      posX=0; 
      posY += 20;
    }
    textSize(20);
    fill(255);
    text(word, posX, interY);
  }
}

```

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 17, 2019, 4:14pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/12 "2019-07-17T16:14:40Z")

</div>

Forgot to ask you if you want me to send you the .txt file?!  
Cheers,  
L

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 17, 2019, 4:46pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/13 "2019-07-17T16:46:59Z")

</div>

I don’t know the answer

Maybe the textWidth function is not good

Also you should use textFont in setup

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 17, 2019, 4:49pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/14 "2019-07-17T16:49:17Z")

</div>

> [@lolonulu](#):
>
> String words= split(message, " ");

Or split lines?

Or use lines instead of words? Because you defined it in setup ()?

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 17, 2019, 5:59pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/15 "2019-07-17T17:59:03Z")

</div>

Thanks @Chrisir to try to help me.  
The crazy thing is that the same sketch with char() instead of String() works?  
Here is my last attempt:

```auto
String wordsList="afaint,afar,all,and,away,folly,for,from,given,glimpse,is,need,over,see,seeing,seem,that,the,there,this,to,where,what,word,";
String message;
String []lines;
boolean drawText;
PFont font;
String [] words;

// *****************************************************************************************************************************************

void setup() {
  size(1080, 1600);

  lines = loadStrings("Beckett.txt"); //link to the text
  message= join(lines, " "); // join all the words together
  lines= split(message, ","); //split the text line by line
  words = splitTokens(message, " "); // now split each line into words?!
  font = createFont("helvetica", 30);
  textFont(font);
  textAlign(LEFT);
}

// *****************************************************************************************************************************************

void draw() {
  background(0);  
  translate(500, 100);
  smooth();
  int posX = 0;
  int posY = 0;

  for (int j=0; j<words.length; j++) {
   
    int index = wordsList.indexOf(words[j]);
    //if (index<0) continue;
    float m=map(mouseX, 50, width-50, 0, 1);
    m = constrain(m, 0, 1);
    //float sortX = 0;
    //float interX = lerp(posX, sortX, m);
    float sortY =index*10+30;
    float interY = lerp(posY, sortY, m);
    posX +=textWidth(words[j])+10;
    
    if (words[j].equals(",") || words[j].indexOf(",")>0) {
      // new line 
      posX=0; 
      posY += 40;
    }

    fill(255);
    text(words[j], posX, interY);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 17, 2019, 6:59pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/16 "2019-07-17T18:59:33Z")

</div>

sorry, I don’t have time

but for the others that come after me:

**maybe you can explain what your intention is.**

1. 

Do you want to sort the text?

1. 

Do you want to Display the

- “afaint,afar,all,and,away,folly,for,from,given,glimpse,is,need,over,see,seeing,seem,that,the,there,this,to,where,what,word,”?

1. 

Do you want to make an animation or not?

1. 

What is the mouse supposed to do?

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 17, 2019, 9:29pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/17 "2019-07-17T21:29:05Z")

</div>

**maybe you can explain what your intention is.**

Do you want to sort the text?  
Yes in alphabetical order

Do you want to Display the

- “afaint,afar,all,and,away,folly,for,from,given,glimpse,is,need,over,see,seeing,seem,that,the,there,this,to,where,what,word,”?  
no, just the text itself sorted according to this list itself already classified in alphabetical order

Do you want to make an animation or not?  
yes, according to mouse movements

Want is the mouse supposed to do?  
mouseX=50: the text is at its starting position, displayed to be read  
mouseX=width-50: each word sorted will have a different position, A-words are the higest on screen, B-words just below, according to the index of each word…  
And everything works as it is supposed to work except that the words when mouseX=50 are not displayed in the right order. I played with the text.file, the TexAlign(), function, but haven’t found…?!  
Thanks @Chrisir for your help. Best, L

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 17, 2019, 10:01pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/18 "2019-07-17T22:01:59Z")

</div>

I don’t know

Chrisir

---

<div class="post-metadata">

**Author:** ![lolonulu](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@lolonulu](https://discourse.processing.org/u/lolonulu)\
**Post date:** [July 17, 2019, 10:05pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/19 "2019-07-17T22:05:02Z")

</div>

Dear @Chrisir, I’ve posted my question on the forum, hopefully someone, will be able to help me.  
It’s really a stupid problem, but anyway…  
Thanks,  
L

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 22, 2019, 7:43pm UTC](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668/20 "2019-07-22T19:43:47Z")

</div>

> [@lolonulu](#):
>
> just the text itself sorted according to this list itself already classified in alphabetical order

I don’t understand. You don’t need the “afaint,afar,all,and,away,folly,for,from,given…" list to sort. What’s its purpose???

> mouseX=50: the text is at its starting position, displayed to be read  
> mouseX=width-50: each word sorted will have a different position

Do you mean this like text is not sorted mouseX=50: and is sorted mouseX=width-50 ?

So only 2 situations sorted yes/no?

OR

do you want every position between like when the mouse moves, the letters move slowly?

[Next page](https://discourse.processing.org/t/how-to-break-line-using-loadspring/12668.md?page=2)