# Text keeps moving to the background

**URL:** <https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591>\
**Category:** Libraries\
**Created:** [July 8, 2019, 3:17pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591 "2019-07-08T15:17:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![edor97](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@edor97](https://discourse.processing.org/u/edor97)\
**Post date:** [July 8, 2019, 3:17pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591/1 "2019-07-08T15:17:54Z")

</div>

Hello, I’m trying to take text (a dialogue I put in _avoid draw()_ )to the foreground because it shows in front of the screen for under a sec and then goes behind the background.

```auto
void setup(){
  //Sfondo
    Uomo1 = loadImage("figura uomo 1.png");
    Uomo2 = loadImage("figura uomo 2.png");
    Foresta = loadImage("cold-fog-forest-1003124.jpg");
    Foresta.resize(1080,720);
    Stanza = loadImage("castle-european-interiors-68389.jpg");
    Stanza.resize(1080, 720);
    background(0);
    
  //Centro
    minim = new Minim(this); //Inizializzazione del player
    player = minim.loadFile("loop midi.Wav"); //Carica file "loop midi.Wav" dalla cartella data dello sketch
    meta = player.getMetaData();
    beat = new BeatDetect(); //Rileva i battiti più rilevanti della canzone
    player.loop(); //La canzone gira in loop 
    //player.play();
    
  //Davanti
    PFont myFont = createFont("Arial-BoldItalicM-48", 48);
    textFont(myFont);
    
  //Tempo
    s = 0;
    tempo = second() + 5; 
}

void draw(){ 
  switch (stato){
    case 0 : 
      stato = 0;
      s = 0; 

      textSize(50);
      textAlign(CENTER);
      text("PROGETTO PROCESSING", width/2, 360); //Titolo del progetto
      fill(255);
    
      textSize(30);
      textAlign(CENTER);
      text(".....................................", width/2, 500); //Campo con informazioni dello studente
      fill(255);

      if ( second() > tempo){
        stato++;
        tempo = second() + 5; 
      }
break;
    
  
    case 1 :
      stato = 1;
      s = 5;
       
        background(Stanza);        
        image(Uomo1, 200, 400, 138, 415);
        image(Uomo2, 650, 360, 138, 440);
        

        **textSize(35);**
**textAlign(CENTER);**
**text("Li manda il giardiniere, dice di metterli in sala da pranzo.", width/2, 100);**
**fill(255);**
        
        beat.detect(player.mix);
        fill(#1A1F18, 100);
        noStroke();
        rect(0, 0, width, height); //Grandezza della finestra della composizione 
        translate(width/2, height/2); //Posiziona la figura al centro della composizione 
        fill(-1, 10);
        ellipse(0, 0, 2*rad, 2*rad);
        stroke(-1, 50);
        int bsize1 = player.bufferSize();
          for (int i = 0; i < bsize1 - 1; i+=5){
            float x = (r)*cos(i*2*PI/bsize1);
            float y = (r)*sin(i*2*PI/bsize1);
            float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize1);
            float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize1);
            line(x, y, x2, y2);
}
       beginShape();
       noFill();
       stroke(-1, 50);
       endShape();
       
         if ( second() > tempo){
           stato++;
           tempo = second() + 5; 
         }
break;

```

Ideas?  
Thanks!

---

<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 8, 2019, 3:38pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591/2 "2019-07-08T15:38:44Z")

</div>

I think it’s caused by your way to do a timer:

```auto
    if ( second() > tempo) {
      stato++;
      tempo = second() + 5;
    }

```

This is not how a timer is done.

(`second()` reads the seconds of the current time (12:22:47) which would be 47 (could be 5 or anything between 0 and 60). Not what you want.  
To check when this condition is executed insert `println("here 1");` in the if-clause.)

**How a timer is done**

Here is how a timer is done, using millis() which is the number of milliseconds since the sketch has started. See reference.

Every time you want to restart your timer or use a timer again say `timer = millis();` (either in `setup()` or in the previous state when you leave the state by saying `state++;`)

```auto

int timer; 
int i;

void setup() {
  size(555, 555);
  background(0);
  timer = millis();
}

void draw() {

  switch(i) {

  case 0: 
    background(0);
    text("Start Screen", 44, 44); 
    if (millis()-timer > 2000) {
      timer = millis();
      i++;
    }
    break; 

  case 1: 
    background(0);
    text("Here", 33, 33);
    break;
  }
}//
//

```

**Remark:**

you don’t have to set stato to 0 or to 1 when it already has that value; better write a comment that describes the screen of this stato (e.g. Intro screen):

```auto
 case 0 : 
      stato = 0; // no
      // Intro screen // yes 

```

or

```auto
 case 1 :
      stato = 1; // no

```

Regards,

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:** [July 8, 2019, 4:02pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591/3 "2019-07-08T16:02:53Z")

</div>

remember to press **ctrl-t** in processing to get auto-format for indents

---

<div class="post-metadata">

**Author:** ![edor97](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@edor97](https://discourse.processing.org/u/edor97)\
**Post date:** [July 8, 2019, 4:05pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591/4 "2019-07-08T16:05:33Z")

</div>

Text keeps showing behind background even after I changed the timer. It pulses as soon as the image of the room appears and then disappears behind it.

---

<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 8, 2019, 4:09pm UTC](https://discourse.processing.org/t/text-keeps-moving-to-the-background/12591/5 "2019-07-08T16:09:07Z")

</div>

> [@edor97](#):
>
> noStroke();  
> rect(0, 0, width, height);

when your timer is working now:  
with these lines you are drawing a rectangle over the entire screen.

The order in which you call commands is the order they are drawn on the canvas.

You draw the text first, then the rect on top of it, so the text disappears behind the rect.