# Display full text string without overlap

**URL:** https://discourse.processing.org/t/display-full-text-string-without-overlap/8946
**Category:** Coding Questions
**Created:** [March 4, 2019, 9:50pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946 "2019-03-04T21:50:16Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 4, 2019, 9:50pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/1 "2019-03-04T21:50:16Z")

</div>

Hi guys.

My string of text overlaps itself instead of filling the x1, y1, x,2 and y,2 area. What is going on?

 ![string%20problem](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31250287e195d73dc07aced7f8719ed6862c74d8.png)

```auto
size(700, 1000);

String [] words2 = loadStrings("byer2.txt");

for ( int k = 0; k < words2.length; k++) {
  fill(255);
  text(words2[k], 100, 100, 500, 200);
}

```

String txt file:

```auto
Albertslund Assens Bjert Brønshøj Dianalund Esbjerg Flensburg Fredensborg Fredericia Frederiksberg Gilleleje Greve Haderslev Hellerup Herlev Herning Hillerød Hobro 
Horsens Hvidovre København Køge Kolding Lemvig Lyngby Nørre Alslev Odense Randers Rønne Roskilde Silkeborg Skagen Sorø Svendborg Søborg Sønderborg Sønderho Taastrup Thisted Tønder Valby Vanløse Aalborg Aarhus

```

---

<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: [March 4, 2019, 11:00pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/2 "2019-03-04T23:00:28Z")

</div>

You have an array which has multiple lines

The lines are shown in the same area in a rect, all of them in the same rect, so they overlap

Solution: add up all Strings to one String result in the for loop using result=result + words2[k] + “\n“;

And don‘t use text inside the for loop but only after it: text (result…

---

<div class="post-metadata">

### Author: ![Abel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abel/32/3289_2.png) [@Abel](https://discourse.processing.org/u/Abel)
#### Post date: [March 5, 2019, 4:06am UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/3 "2019-03-05T04:06:25Z")

</div>

Hey! 🤗

Good suggestion from @Chrisir. But there are often times where one may need to display contents separately without appending them with `\n`. **An example could be where the file contents are choices for a question and you may want your user to click on the choices displayed.**

So in cases like this one, here is a simple method to calculate the number of lines it will take to display the text on canvas. Needless to say, this depends on the `textSize()` and `textFont()` set.

```auto
void setup () {
  size(700, 1000);

  String [] words2 = loadStrings("byer2.txt");

  float xPos = 100, yPos = 100;
  float w = 500, h = 200;
  float eachH = textAscent() + textDescent(); // height for each line

  fill(255);
  for ( int k = 0; k < words2.length; k++) {
    text(words2[k], xPos, yPos, w, h);
    yPos += linesRequired(words2[k], 500)*eachH;
  }
}

int linesRequired(String input, float toDisplayOnW) {
  float allCharW = 0;
  for (char c : input.toCharArray())
    allCharW += textWidth(c);
  return int((ceil(allCharW/toDisplayOnW) + 1));
}

```

Hope you find it useful. 😊

---

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 5, 2019, 9:16am UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/4 "2019-03-05T09:16:28Z")

</div>

Thanks a lot, it works perfectly

---

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 5, 2019, 2:37pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/5 "2019-03-05T14:37:02Z")

</div>

Hi Chris!

How would I go about giving each city a random color from an array of 3 colors?

---

<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: [March 5, 2019, 4:05pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/6 "2019-03-05T16:05:53Z")

</div>

In my former approach it’s not directly possible

To have each city / word of a new color you need to split at ‘ ‘ (a space sign) - then check the length of the resulting array and make a color arry c1 of the same length - and then for loop over the resulting array and use fill(c1[i]); and use text(… and check for necessary line breaks

Pit falls included

---

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 5, 2019, 5:45pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/7 "2019-03-05T17:45:28Z")

</div>

How would the syntax look for splitting the String?

This is wrong 😕

```auto
String [] words2 = loadStrings("byer2.txt");
  String [] individual = split(words2, " ");

```

---

<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: [March 5, 2019, 7:52pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/8 "2019-03-05T19:52:13Z")

</div>

use join first

```auto
  String [] words2 = loadStrings("byer2.txt");
  String [] individual = split(join(words2, " "), " ");

```

simple example

```auto

color[] possibleColors = {
  color(255, 0, 0), 
  color(255, 0, 255), 
  color(255, 255, 0)
};

String [] words2 = {"Upsala", "Stockholm", "Kopenhagen", "Langeland", "Malmö"};

String [] individual; 

color[] wordColors;

void setup() {

  size(600, 600);

  individual = split(join(words2, " "), " ");

  wordColors = new color[individual.length];

  for (int i = 0; i<individual.length; i++) {

    wordColors[i] = possibleColors [int(random(possibleColors.length))];
  }//for

  background(0);
}//

void draw() {
  background(0); 
  for (int i = 0; i<individual.length; i++) {
    fill(wordColors[i]);
    text(individual[i], 77*i+22, 33);
  }//for
}//func

```

---

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 5, 2019, 8:57pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/9 "2019-03-05T20:57:26Z")

</div>

This is awesome thank you! How would you go about adding line breaks so the text won’t continue outside the canvas?

---

<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: [March 5, 2019, 9:35pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/10 "2019-03-05T21:35:24Z")

</div>

```auto

// set of allowed colors 
final color[] POSSIBLE_COLORS = {
  color(255, 0, 0), 
  color(255, 0, 255), 
  color(255, 255, 0)
};

String [] words2 = {"Upsala", "Stockholm", "Kopenhagen", "Langeland", "Malmö"};

String [] individual; 

color[] wordColors;

void setup() { // array 

  size(710, 600);

  // make a longer list of words 
  for (int i = 0; i<10; i++) { 
    words2 = concat(words2, words2);
  }

  // step 1: join and make individual words (array "individual")
  individual = split(join(words2, " "), " ");

  // step 2: generate color list "wordColors" of the same length as array individual
  wordColors = new color[individual.length];

  // step 3: fill color list "wordColors" 
  for (int i = 0; i<individual.length; i++) {
    wordColors[i] = POSSIBLE_COLORS [int(random(POSSIBLE_COLORS.length))];
  }//for

  background(0);
}//func 

void draw() {
  background(0);
  showText( individual );
}//func 

void showText(String[] localArray) {

  int x = 12;  
  int y = 33;

  for (int i = 0; i<localArray.length; i++) {
    // Do we need a line break? 
    if (x+textWidth(localArray[i])>width-13) {
      // line break 
      x = 12; // reset x 
      y += 29; // next line
    }//if

    fill(wordColors[i]);
    text(localArray[i], x, y);
    x+=textWidth(localArray[i])+5; // increase x
  }//for
}//
//

```

---

<div class="post-metadata">

### Author: ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)
#### Post date: [March 6, 2019, 9:46am UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/11 "2019-03-06T09:46:13Z")

</div>

Hi again.

I’ve written this into a class object now.

how would I go about having each individual city increase and decrease in opacity/transparency? 🙂 to my understanding the program only reads the text loop once, so would you write a function for the animation and place that into the text()?

this is where I am at so far

```auto
class OrdBillede2 {
  
  float opacity;

  color [] muligeFarver = {
    color(100, 214, 232), 
    color(22, 81, 32), 
    color(31, 66, 106), 
  };

  String [] words2 = loadStrings("byer2.txt");
  String [] individual;
  color [] byFarver;

  int o;
  PFont font1;
  float textStr2 = 15;

  OrdBillede2() {

    font1 = loadFont ("Akkurat-Bold-18.vlw");
    textFont(font1);
    //for (int i = 0; i <10; i++) {
    // words2 = concat(words2, words2);
    //}

    individual = split(join(words2, " "), " ");

    byFarver = new color[individual.length];

    for (int i = 0; i<individual.length; i++) {
      byFarver[i] = muligeFarver [int(random(muligeFarver.length))];
    } // loop
    for (int i = 0; i<individual.length; i++) {
      random(opacity);}
  } // OrdBillede2()

  void display() {
    
  opacity = random(0,255);
    
    showText (individual);
  } // void display
  void showText(String [] localArray) {

    int x = 80;
    int y = 176;

    for ( int i = 0; i <localArray.length; i++) {
      if (x+textWidth (localArray[i])>width-5) {
        x = 80;
        y += 30;
      }
      textFont(font1);
      textSize(textStr2);
      fill(byFarver[i], opacity);
      //rotateY(radians(60));
      text(localArray[i], x, y);
      x+=textWidth (localArray[i])+22;
    }
    
    opacity = opacity +10;
    
  } // void showText
} // ordBillede2

```

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 8, 2019, 11:22pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/12 "2019-03-08T23:22:02Z")

</div>

It seems like, in general, you want to flow a set of substrings together into one or more paragraphs while embedding advanced formatting (changes in color, opacity, etc.) around words or phrases.

You might be interested in this previous related discussion:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/19410/is-it-possible-to-set-multiple-colours-within-a-single-function)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

 ![](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1fed9802bc1f511e1123b1b09c04973848f798cf.png)

---

<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: [March 9, 2019, 2:18pm UTC](https://discourse.processing.org/t/display-full-text-string-without-overlap/8946/13 "2019-03-09T14:18:09Z")

</div>

> [@jacobo](#):
>
> so would you write a function for the animation and place that into the text()?

Wow! This shows a deep misunderstanding of what’s going…

just play with the code a bit.

As you can see in the function `showText` we use one array for the word `localArray` and one for the color `byFarver`.

Read about arrays in the reference

the function `showText` uses text()

Now to have a variety you could have an array byOpacity like byFarver that hold those values. Define byOpacity where byFarver is defined and use it where byFarver is used

Chrisir