# Making a long text appearing and disappearing

**URL:** <https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658>\
**Category:** Coding Questions\
**Created:** [February 23, 2019, 9:09am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658 "2019-02-23T09:09:50Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![videopirate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/videopirate/32/3835_2.png) [@videopirate](https://discourse.processing.org/u/videopirate)\
**Post date:** [February 23, 2019, 9:09am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/1 "2019-02-23T09:09:50Z")

</div>

Hi everyone, I am new here. hi hi!  
I am a visual artist and I project text (poetry) to an audience.  
I would love some help in making a long text appearing and disappearing.  
At the moment I have only two words. In my case I need the text to be long, sometime even 100 words or more.  
this is what I have so far:

String oneName = “i don’ t want to be”;  
String otherName = “you”;  
String displayed ="";

int interval = 500; // 2s  
int time;

PFont font;

void setup() {  
size(300, 300);  
font = createFont(“arial”, 26);  
background(0);  
displayed = oneName;  
time = millis();  
textFont(font);  
fill(255);  
}

---

<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:** [February 23, 2019, 9:27am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/2 "2019-02-23T09:27:15Z")

</div>

Please explain  
appear and disappear

Do you mean the text blinks, goes on and off, flashes, scrolls, appears line by line…?

For blink:

```
if(textVisible)
   text(.....

```

and also

```
if(millis()-time > 1200) {
      time=millis();
      textVisible = ! textVisible; // toggle
    }

```

you need a boolean textVisible; before setup()

It’s a timer

---

<div class="post-metadata">

**Author:** ![videopirate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/videopirate/32/3835_2.png) [@videopirate](https://discourse.processing.org/u/videopirate)\
**Post date:** [February 23, 2019, 9:32am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/3 "2019-02-23T09:32:43Z")

</div>

thanks for the quick reply. I think there is already a timer in (interval) . I need only an option that allows the text to be longer, at the moment it is 2 words only… I would like to avoid to write word by word, but have the option to fill in a longer text, 100 words for example all in once and make the blinking one after the next. The text should be blinking, I am happy with blinking and appearing line by line. A fading option would be great in the future.We did code something like that, using an HTML script/ but it was ages ago…

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 23, 2019, 9:36am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/4 "2019-02-23T09:36:37Z")

</div>

```auto
String onetxt = "i don’t want to be";
String othertxt = "you";
String displayed ="";

long startT, stopT=2000;
boolean sel;

PFont font;

void setup() {
  size(300, 300);
  font = createFont("arial", 26);
  background(0);
  displayed = onetxt;
  startT = millis();
  textFont(font);
  fill(255);
}

void draw() {
  background(200, 200, 0);
  mytimer();
  fill(0,0,200);
  text(displayed, 10, height/2);
}

void mytimer() {
  if ( millis() >= startT + stopT ) {
    startT += stopT; // what you need to be done now
    sel = ! sel;    
    if (sel) displayed = onetxt;
    else displayed = othertxt;
  }
}

```

that would be a full example, just for switching…

for fading can try like

```auto
String onetxt = "i don’t want to be";
String othertxt = "you";
String displayed ="";
long startT, stopT=2000;
boolean sel;
PFont font;
int fader;

void setup() {
  size(300, 300);
  font = createFont("arial", 26);
  textFont(font);
}

void draw() {
  background(0,0,0);
  mytimer();
  fader -= 2;
  fill(fader,fader,fader);
  text(displayed, 10, height/2);
}

void mytimer() {
  if ( millis() >= startT + stopT ) {
    startT += stopT; // what you need to be done now
    sel = ! sel;    
    if (sel) displayed = onetxt;
    else displayed = othertxt;
    fader = 255;
  }
}

```

---

<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:** [February 23, 2019, 9:37am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/5 "2019-02-23T09:37:43Z")

</div>

You can have text as long as you want

```
     myText = „hhhh“
        +“Jjjjjj“
        +“........“;

```

use \n inside the ““ to get line breaks

Use text () command with 5 Parameters to get aut line breaking in a rect essentially - See Reference

---

<div class="post-metadata">

**Author:** ![videopirate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/videopirate/32/3835_2.png) [@videopirate](https://discourse.processing.org/u/videopirate)\
**Post date:** [February 23, 2019, 9:55am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/6 "2019-02-23T09:55:08Z")

</div>

Thanks kll!  
Chrisir, I am trying to have the text appearing not in the same window but in a sequence. Basically it would be as it is but with a longer text. I wnted to avoid typing strings and maybe just add a lot of text with some separation to project a few words and then again another few and other few. I call it the concept shooter, it is like you would be shooting words, like bullets. As for example: “you are” (first window), “in a dream” second window", “you call reality” third window. If I use your code, they will appear all in the same window. My aim is to add a really long text and have it all appear consequentially. Not sure I am able to explain it well… beside, thanks 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:** [February 23, 2019, 10:02am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/7 "2019-02-23T10:02:36Z")

</div>

this wasn‘t fully clear from your first post

you have several options

store text in a separate text file line by line and load it using loadStrings() and for loop over the resulting array (or rather use an index i for the array and increase i when you go to the next screen in the timer if clause)

Alternatively you can store the text like I did above and separate your screens with eg. # ( … = “you are # now here # to party #“ ; )

Then use split() with # to get an array then for loop over it (or rather use i like above) - see reference

Or just write the array down:

```
    myText[0]=“.....
    myText[1]=“.....

```

Chrisir

---

<div class="post-metadata">

**Author:** ![videopirate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/videopirate/32/3835_2.png) [@videopirate](https://discourse.processing.org/u/videopirate)\
**Post date:** [February 23, 2019, 10:42am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/8 "2019-02-23T10:42:57Z")

</div>

Thank Chrisir. Indeed to have the text separate way (testing it in a note pad) makes a lot of sense, however I am not able to get it to work. I think my level of knowledge is very low and I am really shy to admit it but it is the way it is. But will keep on trying with your suggestions. Maybe a good way for me to learn more!

---

<div class="post-metadata">

**Author:** ![videopirate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/videopirate/32/3835_2.png) [@videopirate](https://discourse.processing.org/u/videopirate)\
**Post date:** [February 23, 2019, 10:50am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/9 "2019-02-23T10:50:46Z")

</div>

Found this solution for now. Lots of typing, and not a lame copy and paste,but it works:

string[][] story = {  
{“once upon a time”, “there was a girl”, “called little red”, “riding hood”},  
{“once upon a time”, “there was a wolf”, “called big bad”}  
};  
int counter;  
int storyNum;

void setup() {  
size(600, 400);  
background(100);  
counter = 0;  
storyNum = 0;  
}

void draw() {  
background(100);  
textMode(CENTER);  
textAlign(CENTER);  
textSize(36);

```
counter = counter + 1;
if (counter < 100) {
	text(story[storyNum][0], width/2, height/2);
} else if (counter < 200) {
	text(story[storyNum][1], width/2, height/2);
} else if (counter < 300) {
	text(story[storyNum][2], width/2, height/2);
} else if (counter < 400) {
	text(story[storyNum][3], width/2, height/2);
} else {
	counter = 0;
}

```

}

---

<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:** [February 23, 2019, 10:56am UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/10 "2019-02-23T10:56:37Z")

</div>

Better than nothing my friend

😉

Chrisir

---

<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:** [February 23, 2019, 3:41pm UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/11 "2019-02-23T15:41:44Z")

</div>

here is my approach with # as a separator (other than with your code you can have 1000 text screens and the code doesn’t get longer except for the initial text that gets splitted)

```auto
// shows a text section by section. 

// Separate sections by "#", text in one go. 
String myText = 
  "once upon a time#there was a girl#called little red#riding hood#"
  +"once upon a time#there was a wolf#called big bad#"
  +"Lorem ipsum dolor sit amet,#consectetuer adipiscing elit. #Aenean commodo ligula eget dolor.#"
  +"Aenean massa. #Cum sociis natoque penatibus et magnis dis parturient montes, #nascetur ridiculus mus. #Donec quam felis, #ultricies nec, #pellentesque eu,#"
  +"pretium quis, sem. Nulla consequat massa quis enim. #Donec pede justo, fringilla vel, #aliquet nec, vulputate eget, arcu. #In enim justo, rhoncus ut, #imperdiet a, venenatis vitae, justo.#"
  +"Nullam dictum felis eu pede mollis pretium. #Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. #Aenean vulputate eleifend tellus. #Aenean leo ligula, porttitor eu,#"
  +"consequat vitae, eleifend ac, enim. #Aliquam lorem ante, dapibus in, #viverra quis, feugiat a, tellus.";

// our array (it's a list)
String[] textOutput; 

// which element in the array is currently shown
int i=0; 

// for the timer: 
int time;

void setup() {
  size(1200, 1000);
  background(0); 
  textOutput = split (myText, "#" );

  textAlign(CENTER);
  textSize(36);

  time=millis();
}//func 

void draw() {

  background(0); 

  text(textOutput[i], width/2, height/2);

  if (millis()-time > 1200) {
    time=millis();
    // color for text
    fill(random(100, 255), random(100, 255), random(100, 255));
    i++; // next element in the array 

    // check end of array
    if (i >= textOutput.length) {
      i=0; // reset
    }//if
  }//if
  //
}//func 
//

```

---

<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:** [February 23, 2019, 4:19pm UTC](https://discourse.processing.org/t/making-a-long-text-appearing-and-disappearing/8658/12 "2019-02-23T16:19:22Z")

</div>

new version that loads a text file and displays it

similar to the version above but loading a file

file must be in sketch folder

inside the file, line breaks are allowed (but later ignored), the # signs are necessary

```auto
// shows a text section by section. 
// Separate sections by "#", text in one go. 

// our array (it's a list, each element is a text section formerly separated by #)
String[] textOutput; 

// which element in the array is currently shown
int i=0; 

// for the timer: 
int time;

void setup() {
  size(1200, 1000);
  background(0);

  String[] myText;
  myText=loadStrings("text.txt");

  // using join (to join all lines together first) and then split (to separate only at #)
  textOutput = split (join(myText, ' '), "#" );

  textAlign(CENTER);
  textSize(36);

  time=millis();
}//func 

void draw() {

  background(0); 

  text(textOutput[i], width/2, height/2);

  if (millis()-time > 1200) {
    time=millis();
    // color for text
    fill(random(100, 255), random(100, 255), random(100, 255));
    i++; // next element in the array 

    // check end of array
    if (i >= textOutput.length) {
      i=0; // reset
    }//if
  }//if
  //
}//func 
//

```

Chrisir